Questions on UI for ASP.NET AJAX Forum

1 answer

91 views

I have implemented this project as a test project:

http://www.telerik.com/help/aspnet-ajax/grid-updating-inplace-and-editforms.html

When I edit records, the edits show up in the grid... but they do not update in the northwinds database.

How do I get the updated records to write to the northwinds mdb using this code example?

Grid

answered on 24 May 2012

5 answers

462 views

Create ItemTemplate of RadComboBox at client-side (using JavaScript)

Hi,
I have a RadComboBox as:

<telerik:RadComboBox ID="rcbProducts" runat="server" EmptyMessage="Select a product" AllowCustomText="true"

AppendDataBoundItems="true" DataTextField="ProductName" ToolTip="ProductDescription"

HighlightTemplatedItems="true">

<ItemTemplate>

<div onmouseover='showToolTip(this);' title='<%# Eval("ProductDescription")%>' style='width: 100%;'>

<%# Eval("ProductName")%></div>

</ItemTemplate>

</telerik:RadComboBox>

I have loaded it with few items using Page_Load on server side. Now i need to add an item at client-side using javascript. How can i achieve this. This is what i have got.

function Add() {

var combo = $find("<%= rcbProducts.ClientID %>");

var comboItem = new Telerik.Web.UI.RadComboBoxItem();

comboItem.set_text("New Item");

var div = document.createElement("div");

div.setAttribute("onmouseover", "showToolTip(this);");

div.setAttribute("title", "New Item");

div.setAttribute("style", "width: 100%;");

div.innerHTML = "New Item";

comboItem.set_element(div);//It doesnt set div as element???

combo.get_items().add(comboItem);

comboItem.select();

return false;

}

Thanks in Advance.

ComboBox

answered on 24 May 2012

6 answers

290 views

Setting grid caption client-side

I know a grid's "caption" property can be set server-side by,

grid.MasterTableView.Caption = "my caption";

But is it also possible to set this client-side via javascript? I tried the following but no luck,

masterTableView = grid.get_masterTableView();
masterTableView.Caption = "my caption";

Thanks in advance.

Grid

answered on 24 May 2012

1 answer

146 views

Unable to expand/collapse group header in Grid

Hi,

I have a grid with group headers, i need to do expand all/collapse all as well as ensure the normal expand/collapse works too. I achieved expand all/collapse all via the below js:

        var EXPAND_CSS_CLASS = "<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>";//rgExpand
        var COLLAPSE_CSS_CLASS = "<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>";//rgCollapse

        //Expands or collapses all group headers based on expandCollapseClass
        function ExpandCollapseAllGroups(isExpand) {
            var sourceClass = (isExpand) ? EXPAND_CSS_CLASS : COLLAPSE_CSS_CLASS;
            var destinationClass = (isExpand) ? COLLAPSE_CSS_CLASS : EXPAND_CSS_CLASS;
            var toolTip = "<%=Tokens.CandidateExpandGroupToolTipText %>";
            if (isExpand) {
                toolTip = "<%=Tokens.CandidateCollapseGroupToolTipText %>";
            }
            // change the +/- states
            $("." + sourceClass).each(function(button) {
                $(this).removeClass(sourceClass).addClass(destinationClass);
                //change the tool tip for expand/collapse buttons
                $(this).attr("title", toolTip);
            });
            // hide/show the rows
            $("#<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ROW_CSS %>, #<%=m_UIExperienceGrid.ClientID %> .<%=CSSConstants.GRID_ALT_ROW_CSS %>").each(
                function(button) {
                    if (isExpand) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
            });
            //return false to prevent postbacks
            return false;
        }

The issue is, i am unable to do an individual expand/collapse due to the mark up for grid being tampered by some highlight javascript functionality built in our application which will merely add span tags around the keywords i search to highlight in my application. The keywords i search corresponds to words displayed in the header item of the grid. Once the markup is tampered, the telerik grid individual expand/collapse breaks. Hence i need to somehow remove the telerik generated expand/collapse js associated with the input tags that bear the class "rgExpand" or "rgCollapse" and add custom js to expand/collapse the groups individually. I tried the below js, it is not working

    $(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").attr('onclick', '');
$(".<%=CSSConstants.EXPAND_EXPERIENCE_CSS%>, .<%=CSSConstants.COLLAPSE_EXPERIENCE_CSS%>").each(
        function() {
            $(this)[0].onclick = function() {
                //TODO: if you need to know if the element is expanded, use the next line of code... otherwise remove it
                //var isExpanded = $(this).attr("class") == "rgCollapse";
                $(this).parents("TR.<%=CSSConstants.GRID_ROW_GROUP_HEADER_CSS %>").next("TR").toggle();
            }
        });

Please suggest me a solution as i have pretty much exhausted all the options.

Thanks and regards,
Damodar

Grid

answered on 24 May 2012

0 answers

106 views

RadGrid CSS does not load

I have a RadGrid in a UpdatePanel (standard .net one) which in turn is in a modal pop up. When the popup is first shown the grid displays correctly however if the popup is closed and reopened then the styling for the grid is missing, there are no gridlines. If I look at the CSS loaded for the page (using FireFox webdeveloper plugin) I can see that the CSS for the radGrid is missing on the second load, even though CSS for other rad components are there. Any idea what might cause this? The gird has visible="false" when the popup is opened and is only displayed after the user presses a button in the popup.

Grid

asked on 24 May 2012

9 answers

1.2K+ views

how to refresh controls using RadAjaxManager from codebehind.

RadAjaxManager

<telerik:RadAjaxManager ID="ajaxManager" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="gvMemberList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnRefresh">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

<telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<asp:ImageButton ID="btnRefresh" ImageUrl="~/Images/refresh.png" OnClick="btnRefresh_Click"

runat="server" ToolTip="Refresh all list." />

<telerik:RadGrid ID="gvMemberList" runat="server" AllowPaging="True" OnInit="gvMemberList_Init"

AllowCustomPaging="true" AllowSorting="True" SkinsPath="RadControls/Skins" EnableAJAX="True"

OnSortCommand="gvMemberList_SortCommand" OnPageIndexChanged="gvMemberList_PageIndexChanged"

OnItemDataBound="gvMemberList_ItemDataBound" OnItemCommand="gvMemberList_ItemCommand"

GridLines="None" EnableEmbeddedSkins="true" PageSize="10" Visible="true" ShowStatusBar="true"

LoadingTemplateTransparency="45" Width="90%" CellSpacing="0" CellPadding="0"

AutoGenerateColumns="false" AllowFilteringByColumn="True" Skin="WebBlue">

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataKeyNames="EmpID" FilterItemStyle-Width="1%" AllowFilteringByColumn="true"

AllowMultiColumnSorting="false">

<Columns>

<telerik:GridBoundColumn DataField="EmpName" HeaderText="EmployeeName" UniqueName="EmployeeName"

HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">

<ItemStyle HorizontalAlign="Center" Width="1%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Address" HeaderText="Emploee Address" UniqueName="Emploee Address"

HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">

<ItemStyle HorizontalAlign="Center" Width="1%" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails"

SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false"

ReorderTabsOnSelect="true" Width="1139px" OnTabClick="tabMemberDetails_Click"

ScrollChildren="true">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0"

CssClass="pageView" Width="1137px" Height="470px">

</telerik:RadMultiPage>

protected void tabMemberDetails_Click(object sender, RadTabStripEventArgs e)

{

StatusNotes control = LoadControl("~/Controls/StatusNotes.ascx") as StatusNotes;

control.btnSaveClk += new StatusNotes.btnStatus_Click(control_btnSaveClk);

}

void control_btnSaveClk(object sender, EventArgs e)

{

btnRefresh_Click(this, new ImageClickEventArgs(0,0));

}

protected void btnRefresh_Click(object sender, ImageClickEventArgs e)

{

gvMemberList.Rebind();

}

I have a problem to refresh my grid using RadAjaxManager from the button click of usercontrol. I have provided a very little portion of my code here. I have a grid,tab control and a refresh button. For partial post-back, I have used RadAjaxManger. When Rows are clicked on the grid, the grid is refreshed. Similarly, when refresh button is clicked grid and tabControl is partially refreshed thru AjaxManager. Till now there is no problem while performing Ajaxifying. Now i want to refresh the grid when user clicks a button in a usercontrol. I am dynamically loading different usercontrol inside tabMemberDetails_Click based on Tabs clicked. For Simplicity lets assume I have a button inside the dynamically loaded usercontrol and btnSaveClk is the event exposed from that usercontrol. I am calling btnRefresh_Click on occurence of that button click. when i debugged the code, everthing works, btnRefresh_Click is called and NeedDataSource of gvMemberList is called and the datasource shows the lates data. But the problem is the Grid doesnt show the lates data. The problem is obvious, Its just that the controls are not being refreshed because btnRefresh didnt occur by clicking on refresh button but another event called it.
I am having this problem for long time and I need to get over it very soon. Is it true that we can refresh control with the ones specified in the AjaxSettings in RadAjaxManager.Can anyone help me.

Ajax

answered on 24 May 2012

3 answers

160 views

[Solved] help with calendar control and time picker

Hi
This may sound stupid but i need to add a date and time to a database and am using the calendar control and the time picker as the time slots we are using are at 2 hr intervals ho do i pull the date out of the calender and the time out of the time picker and put the 2 together?

Many thanks

Calendar

answered on 24 May 2012

1 answer

249 views

[Solved] Dialog controls not rendering correctly

I am using a RadUpload control to select an image on the client machine to load into the image editor. I use a RadAjaxManager and its OnAjaxRequest event to load the image into the editor. That all works fine except I can't get the RadImageEditor's dialogue's to render correctly. The dialogue's work for the most part except their controls don't display images and the slider in the zoom dialogue renders as a set of link buttons. I see in the known issues that if the image editor is in an update panel the UpdateMode should be set to Conditional. But I don't know how to handle this with the RadAjaxManager.

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

</telerik:RadStyleSheetManager>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadFormDecorator runat="server" DecoratedControls="All" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest" RequestQueueSize="3">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadImageEditor1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var radUpload;

var radUploadInputs;

var radImageEditor;

function pageLoad()

{

radUpload = $find("<%= RadUpload1.ClientID %>");

radUploadInputs = $find("<%= RadUpload1.ClientID%>").getFileInputs();

}

function RadUpload1_ClientFileSelected(sender, args)

{

var item = radUploadInputs[0].value;

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

ajaxManager.ajaxRequest(item);

}

function RadImageEditor1_ClientLoad(sender, args)

{

radImageEditor = $find(sender.get_id());

radImageEditor = $telerik.toImageEditor(radImageEditor);

//radImageEditor.zoomBestFit();

}

function ImageEditor_OnClientSaved(imgEditor, args)

{

radUpload.clearFileInputAt(0);

Close();

}

function Close()

{

GetRadWindow().close();

}

function GetRadWindow()

{

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including classic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

</telerik:RadAjaxLoadingPanel>

<telerik:RadUpload ID="RadUpload1" runat="server" AllowedFileExtensions="jpg,jpeg,png,gif,bmp"

OnClientFileSelected="RadUpload1_ClientFileSelected" MaxFileInputsCount="1" FocusOnLoad="true"

InitialFileInputsCount="1" ControlObjectsVisibility="None">

</telerik:RadUpload>

<telerik:RadImageEditor ID="RadImageEditor1" runat="server" ExternalDialogsPath="~/App/ImageEditorDialogs"

Width="300px" Height="300px" OnClientSaved="ImageEditor_OnClientSaved" StatusBarMode="Hidden"

ToolsLoadPanelType="XmlHttpPanel" EnableResize="false" OnClientLoad="RadImageEditor1_ClientLoad">

<Tools>

<telerik:ImageEditorToolGroup>

<telerik:ImageEditorTool CommandName="Save" />

<telerik:ImageEditorTool CommandName="Print" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorToolStrip CommandName="Undo" Text="Undo" />

<telerik:ImageEditorToolStrip CommandName="Redo" Text="Redo" />

<telerik:ImageEditorToolSeparator />

<telerik:ImageEditorTool CommandName="Crop" />

<telerik:ImageEditorTool CommandName="Resize" Text="Resize" IsToggleButton="false" />

<telerik:ImageEditorTool CommandName="Zoom" />

</telerik:ImageEditorToolGroup>

</Tools>

</telerik:RadImageEditor>

</form>

</body>

</html>

Imports System

Imports System.Drawing

Imports System.IO

Imports EHR.Web.UI

Imports Telerik.Web.UI

Imports Telerik.Web.UI.ImageEditor

Imports System.Collections.Generic

Imports System.Web

Imports Telerik.Web.UI.Widgets

Imports System.Xml

Imports System.Text.RegularExpressions

Public Class AddPatImage

Inherits EhrPage

'Private pathToImage As String = "~/PatImages/Images/shield.png"

Private pathToImage As String = "~/Images/silhouette.gif"

Private pathToThumbs As String = "~/PatImages/Thumbs/"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Me.PatID = 42815

Me.UserID = 61

If Not IsPostBack Then

End If

End Sub

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

pathToImage = e.Argument

RadImageEditor1.ImageUrl = pathToImage

End Sub

Protected Sub RadImageEditor1_ImageSaving(sender As Object, args As Telerik.Web.UI.ImageEditorSavingEventArgs) Handles RadImageEditor1.ImageSaving

Dim image = args.Image.Clone().Image

'image.Resize(32, 32)

'Dim ms = New MemoryStream()

'image.Image() '.Save(ms, image.RawFormat)

'File.WriteAllBytes([String].Format("{0}{1}.{2}", MapPath(pathToThumbs),

'args.FileName, image.Format), DirectCast(ms.ToArray(), Byte()))

'Save image to Patients record using the PatientImage_Insert web method.

With clsEMR

.PatientPhoto_Insert(Me.PatID, ImageToByte(image), Me.UserID)

End With

End Sub

Public Shared Function ImageToByte(ByVal img As System.Drawing.Image) As Byte()

Dim imgStream As MemoryStream = New MemoryStream()

img.Save(imgStream, System.Drawing.Imaging.ImageFormat.Jpeg)

imgStream.Close()

Dim byteArray As Byte() = imgStream.ToArray()

imgStream.Dispose()

Return byteArray

End Function

Protected Sub RadImageEditor1_ImageLoading(sender As Object, args As Telerik.Web.UI.ImageEditorLoadingEventArgs) Handles RadImageEditor1.ImageLoading

args.Image = New EditableImage(MapPathSecure(pathToImage))

args.Cancel = True

End Sub

End Class

ImageEditor

answered on 24 May 2012

1 answer

96 views

ReBinding Grid on ParentPage on Close of RadWindow

Hi Guys hope someone can help, i know this is covered in another thread but im having an issue with the radwindow and rebinding the grid on my parent page.

I have a RadWindow that i open when i click a button on the ParentPage, the window opens as a modal window i am using thos to have a document upload on the new window. Once the document is uploaded i want the user to be able to click a close button on the radwindow and this close the window and rebind my grid on my parent page.

When my radWindow opens it is modal as the background is greyed out,once i have uploaded a document when i click my close button which is Button1 in this case , the window closes rebinds the grid as i want it to but then the radwindow opens again but not in a modal state and i am unable to close it.

Javascript on my parent page is

<script type="text/javascript">

function openWin() {

var value = '<%=MeetingID %>';

var oWnd = radopen("DocumentUpload.aspx?MeetingID=" + value, "WindowDocumentUpload");

}

function getRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow;

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;

return oWindow;

}

function refreshGrid(arg) {

if (!arg) {

$find("<%= RadAjaxManagerCreateMeeting.ClientID %>").ajaxRequest("Rebind");

}

else {

$find("<%= RadAjaxManagerCreateMeeting.ClientID %>").ajaxRequest("RebindAndNavigate");

}

function OnClientFileOpen(oExplorer, args) {

//get the extension of the opened item

// var item = args.get_item();

// var fileExt = args.get_item().get_extension();

// if (fileExt == "xlsx" || fileExt == "docx") {

// args.set_cancel(true);

// var requestImage = "FileSystemHandler.ashx?path=" + item.get_url();

// document.location = requestImage;

// }

//if (fileExt && fileExt.toLowerCase() == "pdf") {

//cancel the default behavior

args.set_cancel(true);

//open new RadWindow

var oWnd = radopen(args.get_item().get_path(), "RadWindow1");

//set size to the newly opened RadWindow

oWnd.center;

oWnd.setSize(850, 500);

//if you want to open the PDF file in a new browser window

//you can use the following code

//window.open(args.get_item().get_path());

// }

}

</script>

Javascript in my radwindow page is

<script type="text/javascript">

function CloseAndRebind(args) {

GetRadWindow().BrowserWindow.refreshGrid(args);

GetRadWindow().close();

}

function GetRadWindow() {

var oWindow = null;

if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog

else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

return oWindow;

}

function CancelEdit() {

GetRadWindow().close();

}

</script>

Then the VB in my Radwindow Page is

Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click

ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", True)

End Sub

Hope you can help

Thanks

Window

answered on 24 May 2012

1 answer

307 views

[Solved] RadWindow RestrictionZoneID and Modal.

Hi,

I have 2 questions regarding RestrictionZoneId and modal which are inter related to each other.

Can i set RestrictionZoneId of a RadWindow to another RadWindows' Id. If not is there any alternative to achieve this via code?
If i set RestrictionZoneId of a RadWindow to a div then can i set it to modal only for the div and not for the entire page.

Will appreciate your quick response.

Window

answered on 24 May 2012