This is a migrated thread and some comments may be shown as answers.

RadGrid + RadAjaxManager + jQuery Validation Plugin issue

5 Answers 121 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Rohit asked on 16 Dec 2011, 06:08 PM

I've an editable RadGrid which on edit shows a custom user control as a pop-up. The grid was embedded in an update panel and the user control used jQuery Validation plugin for validating the inputs.

I was facing issues with displaying the wait panel during ajax calls. To resolve this I removed the update panel and implemented RadAjaxManager following which the wait panel is functioning perfectly. But that broke the jQuery Validation plugin functionality. What I understand is that RadAjaxManager handles the ajax requests and doesnt trigger the events that the validation plugin is hooked to.

Is there any way of getting RadGrid + RadAjaxManager + jQuery Validation Plugin working. I do not want to do old-school way of placing custom validation code as there is extensive validation implemented using the validation plugin. Any workaround to get this working would be greatly appreciated.

Thanks in advance.

Regards.

5 Answers, 1 is accepted

answered on 20 Dec 2011, 01:52 AM

Tsvetoslav, I appreciate you responding to this post. Please find below the markup of the pages and controls.

Master Page

<body>

<form>

<div>

<asp:ContentPlaceHolder ID="BodyPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

Child Page

<asp:Content ID="ctnStartPage" ContentPlaceHolderID="BodyPlaceHolder" runat="server">

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

</telerik:RadScriptManager>

<div id="divTabs" style="width: 100%; height: 100%;">

<telerik:RadTabStrip ID="masterTabStrip" runat="server" OnTabClick="masterTabString_OnTabClick"

MultiPageID="RadMultiPage1" Orientation="VerticalLeft" Style="float: left">

<Tabs>

<telerik:RadTab Text="My Alerts" Selected="true" SelectedCssClass="tabSelected">

</telerik:RadTab>

<telerik:RadTab Text="Global Alerts" SelectedCssClass="tabSelected">

</telerik:RadTab>

<telerik:RadTab Text="Admin" SelectedCssClass="tabSelected">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" CssClass="multiPage" ID="RadMultiPage1" SelectedIndex="0">

<telerik:RadPageView runat="server" ID="PageView1" ContentUrl="~/Pages/InternalAlertList.aspx"

Style="width: 100%; height: 100%;">

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadPublicPage" ContentUrl="~/Pages/InternalAlertList.aspx?Private=1"

Style="width: 100%; height: 100%;">

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="PageView2" ContentUrl="~/Pages/InternalAlertList.aspx?Private=0"

Style="width: 100%; height: 100%;">

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</asp:content>

InternalAlertList page

<head>

<telerik:RadScriptBlock ID="internalAlert_ScriptBlock" runat="server">

<script type="text/javascript" src="../Scripts/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="../Scripts/jquery.validate.min.js"></script>

<script type="text/javascript">

// some custom script.

</script>

</head>

<body>

<form id="registerForm" runat="server" style="width:100%; height:100%;">

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

</telerik:RadScriptManager>

<div style="height: 100%; width: 100%">

<telerik:RadGrid ID="rgAlertList" runat="server" PageSize="10" Width="100%" Height="635px"

AllowSorting="True" AllowPaging="True" ShowGroupPanel="True" DataSourceID="ObjectDataSource1"

GridLines="None" AutoGenerateColumns="False" AllowAutomaticUpdates="false" AllowAutomaticInserts ="false"

Style="border: 0; outline:none;" Skin="Office2007" AllowAutomaticDeletes="false"

OnItemDataBound="rgAlertList_ItemDataBound" OnDataBound="rgAlertList_DataBound">

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

<MasterTableView DataKeyNames="InternalAlertKey" AllowMultiColumnSorting="True" CommandItemDisplay="Top"

EditMode="PopUp" AllowAutomaticUpdates="false" AllowAutomaticInserts="false"

AllowFilteringByColumn="true" PagerStyle-AlwaysVisible="true" CommandItemSettings-ShowRefreshButton="false"

CommandItemSettings-AddNewRecordText="Add Alert"

CommandItemSettings-AddNewRecordImageUrl="../Images/add_btn.gif">

<EditFormSettings EditFormType="WebUserControl" UserControlName="../WebUserControl/EditInternalAlert.ascx"

PopUpSettings-Width="90%" PopUpSettings-Height="85%" PopUpSettings-Modal="true"

CaptionDataField="AlertName" CaptionFormatString="{0}" PopUpSettings-ScrollBars="Auto"

FormStyle-Font-Names="Verdana" FormStyle-Font-Size="Medium">

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="../Images/edit_btn.gif" HeaderText="Edit" HeaderStyle-Width="30px">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-Width="120px" HeaderText="Actions" Resizable="true">

<ItemTemplate>

<asp:LinkButton ID="btnEnable" runat="server" OnClick="OnGridCommandTriggered"

CommandName="Enable" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "InternalAlertKey").ToString()%>'

style="cursor:hand;" Text="Enable"

Visible='<%# DataBinder.Eval(Container.DataItem, "Status").ToString() == "Disabled"%>'/>

<asp:LinkButton ID="btnDisable" runat="server" OnClick="OnGridCommandTriggered"

CommandName="Disable" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "InternalAlertKey").ToString()%>'

style="cursor:hand;" Visible='<%# DataBinder.Eval(Container.DataItem, "Status").ToString() == "Enabled"%>'

Text="Disable"/>

<asp:LinkButton ID="btnTerminate" runat="server" OnClick="OnGridCommandTriggered"

CommandName="Terminate" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "InternalAlertKey").ToString()%>'

style="cursor:hand;" Text="Terminate"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Actions" HeaderStyle-Width="85" Resizable="true">

<ItemTemplate>

<asp:LinkButton ID="btnSubscribe" runat="server" OnClick="OnGridCommandTriggered"

CommandName="Subscribe" Text="Subscribe"

CommandArgument='<%# DataBinder.Eval(Container.DataItem, "InternalAlertKey").ToString()%>'

style="cursor:hand;" Visible='<%# !IsSubscribed(DataBinder.Eval(Container.DataItem, "Recipients")) %>'/>

<asp:LinkButton ID="btnUnsubscribe" runat="server" OnClick="OnGridCommandTriggered"

CommandName="Unsubscribe" Text="Unsubscribe"

CommandArgument='<%# DataBinder.Eval(Container.DataItem, "InternalAlertKey").ToString()%>'

style="cursor:hand;" Visible='<%# IsSubscribed(DataBinder.Eval(Container.DataItem, "Recipients")) %>'/>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="BusinessUnit" SortExpression="BusinessUnit"

HeaderText="Business Unit Key" DataField="BusinessUnit" Visible="false" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="BusinessUnitName" SortExpression="BusinessUnitName" HeaderText="Business Unit"

DataField="BusinessUnitName" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false"

Resizable="true" HeaderStyle-Width="55px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="InternalAlertKey" SortExpression="InternalAlertKey"

HeaderText="InternalAlertKey" Resizable="true"

DataField="InternalAlertKey" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="RuleKey" SortExpression="RuleKey" HeaderText="RuleKey"

DataField="RuleKey" Visible="false" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="AlertName" SortExpression="AlertName" HeaderText="Alert Name"

DataField="AlertName" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false"

HeaderStyle-Width="15%" ItemStyle-Wrap="true" Resizable="true" >

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Granularity" SortExpression="Granularity" HeaderText="Granularity"

DataField="Granularity" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false"

HeaderStyle-Width="75px" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn AllowFiltering="false" HeaderText="Devices" HeaderStyle-Width="105" Resizable="true">

<ItemTemplate>

<asp:Label ID="lblDevices" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "DeviceType").ToString()%>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="AlertDescription" SortExpression="AlertDescription"

HeaderText="Alert Description" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false"

DataField="AlertDescription" HeaderStyle-Width="30%" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CreatedBy" SortExpression="CreatedBy" HeaderText="Alias"

DataField="CreatedBy" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="CreatedBy" SortExpression="CreatedBy" HeaderText="Created By"

DataField="CreatedBy" AllowFiltering="false" AllowSorting="false" ShowFilterIcon="false"

HeaderStyle-Width="90px" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Status" SortExpression="Status" HeaderText="Status"

DataField="Status" AllowFiltering="false" AllowSorting="false" Resizable="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn AllowFiltering="false" HeaderText="History" Resizable="true">

<ItemTemplate>

<asp:LinkButton ID="btnViewHistory" runat="server" OnClick="OnGridCommandTriggered"

CommandName="ViewHistory" Text="History"

CommandArgument='<%# DataBinder.Eval(Container.DataItem, "RuleKey").ToString()%>'

style="cursor:hand;"/>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True"></Selecting>

<ClientMessages DragToGroupOrReorder="Drag to group" />

<ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="_OnPopupShowing"/>

<Resizing AllowColumnResize="true"/>

</ClientSettings>

</telerik:RadGrid>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

SelectMethod="GetAllAlertSubscriptions"

TypeName="GasQualityInternalAlertWeb.Pages.InternalAlertList"

DataObjectTypeName="InternalAlertListItem"

OnSelecting="ObjectDataSource1_Selecting"

SortParameterName="sortExpression">

<SelectParameters>

<asp:Parameter Name="userID" Type="String" />

<asp:SessionParameter SessionField="IsUserAdmin" Name="isAdmin" Type="Boolean" DefaultValue="false" />

</SelectParameters>

</asp:ObjectDataSource>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="lpInternalAlertGrid">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rgAlertList">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rgAlertList" LoadingPanelID="lpInternalAlertGrid" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnRequestStart="RequestStart" OnResponseEnd="ResponseEnd" />

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="lpInternalAlertGrid" runat="server" Transparency="10">

<asp:Panel ID="pnlLoadingImage" runat="server" BackColor="#000" style="width:100%; height:100%;">

<table style="width:100%; height:100%;">

<tr>

<td>

<asp:Image ImageUrl="~/Images/Loading.gif" runat="server" ID="ptLoadingImage" />

</td>

</tr>

</table>

</asp:Panel>

</telerik:RadAjaxLoadingPanel>

</div>

</form>

</body>

EditInternalAlert user control

<asp:Panel runat="server" ID="pnlEditInternalAlert" style="height:100%;">

<table border="0px" style="width:100%;height:90%;font-family:Verdana;font-size:small;">

<tr>

<td>

<asp:Panel ID="pnlAlertDetails" runat="server" GroupingText="Alert Details">

<table id="tblAlertDetails" border="0px"

style="width:100%;height:100%;font-family:Verdana;font-size:small;">

<tr>

<td style="width:17%;">

<asp:Label ID="lblAlertName" runat="server" Text="Alert Name" /></td>

<td style="width:35%;">

<asp:TextBox ID="txtAlertName" runat="server" Width="90%"

style="font-family:Verdana;font-size:small;" class="required" MaxLength="50"/>

</td>

<td style="width:15%;"></td>

<td></td>

</tr>

<tr>

<td>

<asp:Label ID="lblBusinessUnit" runat="server" Text="Business Unit" />

</td>

<td>

<asp:DropDownList ID="ddBusinessUnit" runat="server" class="defaultInvalid"

style="font-family:Verdana;font-size:small;width:90%;" AutoPostBack="true"

OnSelectedIndexChanged="OnBusinessUnitChanged" OnDataBound="SetDefaultOnDataBound">

</asp:DropDownList>

</td>

<td></td>

</tr>

<tr>

<td>

<asp:Label ID="lblDeviceType" runat="server" Text="Device Type" />

</td>

<td>

<asp:DropDownList ID="ddDeviceType" runat="server" AutoPostBack="True" class="defaultInvalid"

OnSelectedIndexChanged="OnDeviceTypeChanged" OnDataBound="SetDefaultOnDataBound"

style="font-family:Verdana;font-size:small;width:90%;">

</asp:DropDownList>

</td>

<td>

<asp:Label ID="lblAnlzrMeasureAttribute" runat="server" Text="Analyzer Type" Visible="false" />

</td>

<td>

<asp:DropDownList ID="ddAnlzrMeasureAttribute" runat="server" class="defaultInvalid"

style="font-family:Verdana;font-size:small;width:90%;" Visible="false" AutoPostBack="true"

OnSelectedIndexChanged="OnMeasureAttributeChanged" OnDataBound="SetDefaultOnDataBound">

</asp:DropDownList>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblChromatographArray" Visible="false" runat="server" Text="Chromatographs" />

<asp:Label ID="lblAnalyzerArray" Visible="false" runat="server" Text="Analyzers" />

</td>

<td>

<tel:ctlDropDown ID="ddChromatographs" Runat="server" Visible="false" style="font-family:Verdana;font-size:small;" Width="275"/>

<tel:ctlDropDown ID="ddAnalyzers" Runat="server" Visible="false" style="font-family:Verdana;font-size:small;" width="275"/>

</td>

<td>

<asp:Label ID="lblGranularity" runat="server" Text="Data Granularity" />

</td>

<td>

<asp:DropDownList ID="ddGranularity" runat="server" OnDataBound="SetDefaultOnDataBound" AutoPostBack="true"

style="font-family:Verdana;font-size:small;" class="defaultInvalid" OnSelectedIndexChanged="OnDataGranularityChanged">

</asp:DropDownList>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblIsPublicAlert" runat="server" Text="Make Alert Public" />

</td>

<td>

<asp:CheckBox ID="cbIsAlertPublic" runat="server" />

<asp:Image ID="imgPublicAlertHelp" runat="server" ImageUrl="~/Images/QuestionMark.jpg"

ToolTip=

"By making an alert public, other users will be able to subscribe to this alert and get notified when the business condition is met."

/>

</td>

<td></td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlAnalyzerCondition" runat="server" GroupingText="Analyzer conditions" Visible="false">

<tel:ctlCondition ID="ctrlAnalyzerCondition" runat="server" Mode='<%# "Analyzers" %>'/>

</asp:Panel>

<asp:Panel ID="pnlChromatographCondition" runat="server" GroupingText="Chromatograph conditions" Visible="false">

<asp:Button ID="btnAddCondition" runat="server" Text="Add condition" onclick="OnAddConditionClicked"/><br />

<asp:CheckBox ID="cbApplyAllConditions" runat="server" Text="Use all conditions"/>

<div id="divChromConditionPlaceHolders" runat="server">

</div>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlAlertDescription" runat="server" GroupingText=" ">

<table id="tblAlertDescription" border="0px"

style="width:100%;height:100%;font-family:Verdana;font-size:small;">

<tr>

<td style="width:17%">

<asp:Label ID="lblAlertDescription" runat="server" Text="Alert Description" />

</td>

<td colspan="3">

<asp:TextBox ID="txtAlertDescription" runat="server" MaxLength="255"

OnTextChanged="OnTextChanged" Rows="3" AutoPostBack="true"

style="font-family:Verdana;font-size:small;" TextMode="MultiLine"

Width="100%"/>

<asp:CheckBox ID="cbAlertDescriptionEdited" runat="server" Checked="false"

Visible="false" />

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

<tr>

<td>

<asp:Panel ID="pnlNotification" runat="server" GroupingText="Notification">

<telerik:RadTabStrip ID="tsNotification" runat="server"

MultiPageID="mpNotification">

<Tabs>

<telerik:RadTab Selected="True" SelectedCssClass="tabSelected" Text="Email">

</telerik:RadTab>

<telerik:RadTab SelectedCssClass="tabSelected" Text="SMS">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="mpNotification" runat="server" CssClass="multiPage"

Height="155px" SelectedIndex="0" Width="99%">

<telerik:RadPageView ID="pvEmail" runat="server" style="background-color:White;">

<table id="tblEmail"

style="width:100%;height:155px;font-family:Verdana;font-size:small;">

<tr>

<td style="width:16%">

<asp:Label ID="lblToRecipients" runat="server" Text="To" />

</td>

<td>

<asp:TextBox ID="txtToRecipients" runat="server"

class="required validEmailRecipient" Height="47px" MaxLength="800"

style="font-family:Verdana;font-size:small;" TextMode="MultiLine"

Width="98%" /><br />

<asp:Label runat="server" ID="lblRecipientHint" style="font-size:x-small; font-style:italic;"></asp:Label>

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblCcRecipients" runat="server" Text="Cc" />

</td>

<td>

<asp:TextBox ID="txtCcRecipients" runat="server" class="validEmailRecipient"

MaxLength="800" style="width:98%;font-family:Verdana;font-size:small;" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblSubject" runat="server" Text="Subject" />

</td>

<td>

<asp:TextBox ID="txtSubject" runat="server" class="required" MaxLength="255"

style="width:98%;font-family:Verdana;font-size:small;" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblHeader" runat="server" Text="Header" Visible="false" />

</td>

<td>

<asp:TextBox ID="txtHeader" runat="server" Height="16px"

style="font-family:Verdana;font-size:small;" TextMode="MultiLine"

Visible="false" Width="66px" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblFooter" runat="server" Text="Footer" Visible="false" />

</td>

<td>

<asp:TextBox ID="txtFooter" runat="server" Height="16px"

style="font-family:Verdana;font-size:small;" TextMode="MultiLine"

Visible="false" Width="68px" />

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="pvSMS" runat="server">

<table ID="tblSMS"

style="width:100%; height:215px;font-family:Verdana;font-size:small; visibility:hidden">

<tr>

<td colspan="2">

<asp:CheckBox ID="cbEnableSMS" runat="server"

style="font-family:Verdana;font-size:small;" Text="Enable SMS" />

</td>

</tr>

<tr>

<td style="width:16%;">

<asp:Label ID="lblSMSRecipients" runat="server" Text="Recipients" />

<br />

<asp:LinkButton ID="lbSendTestSMS" runat="server" OnClick="SendTestSMS"

Text="Send Test SMS" />

</td>

<td>

<asp:TextBox ID="txtSMSRecipients" runat="server" MaxLength="100"

style="width:98%;font-family:Verdana;font-size:small;" TextMode="MultiLine" />

<br />

<asp:Image ID="imgHint" runat="server" ImageUrl="~/Images/QuestionMark.jpg" ToolTip="Recipient Format:

ATT: PhoneNumber@txt.att.net

Verizon: PhoneNumber@vtext.com

Sprint: PhoneNumber@messaging.sprintpcs.com

T-Mobile: PhoneNumber@tmomail.net" />

</td>

</tr>

<tr>

<td>

<asp:Label ID="lblSMSMessage" runat="server" Text="Text Message" />

</td>

<td>

<asp:TextBox ID="txtSMSMessage" runat="server" MaxLength="1000"

style="width:98%;font-family:Verdana;font-size:small;" TextMode="MultiLine" />

<br />

<label ID="lblCharacterCount">

Character count:

<%= String.IsNullOrEmpty(txtSMSMessage.Text) ? "0" : txtSMSMessage.Text.Length.ToString()%>

</label>

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</td>

</tr>

</table>

<asp:HiddenField ID="hfRuleID" runat="server" Value='<%# DataBinder.Eval(Model,"RuleKey") %>' />

<asp:HiddenField ID="hfInternalAlertID" runat="server" Value='<%# DataBinder.Eval(Model,"InternalAlertID") %>' />

<asp:HiddenField ID="hfStatus" runat="server" Value='<%# DataBinder.Eval(Model,"Status") %>' />

<asp:HiddenField ID="hfOwnerName" runat="server" Value='<%# DataBinder.Eval(Model,"OwnerName") %>' />

<%-- </ContentTemplate>

</asp:UpdatePanel>--%>

<table border="0px" style="width:100%;font-family:Verdana;font-size:small;">

<tr>

<td align="right" style="width:50%;">

<asp:Button CommandName='<%# Convert.ToInt32(DataBinder.Eval(Model,"InternalAlertID")) > 0 ? "Update" : "PerformInsert" %>'

Text='<%# Convert.ToInt32(DataBinder.Eval(Model,"InternalAlertID")) > 0 ? "Update" : "Create" %>'

ID="btnCreateUpdate" style="font-family:Verdana;font-size:small;" runat="server"

OnClick="btnCreateUpdate_onclick"></asp:Button>

</td>

<td>

<%--<asp:Button ID="btnCancel" CommandName="Cancel" Text="Cancel" runat="server"

style="font-family:Verdana;font-size:small;width:65px;height:22px;"

class="cancel" CausesValidation="false"></asp:Button>--%>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" OnClick="btnCancel_Click">

</asp:Button>

</td>

</tr>

</table>

</asp:Panel>

answered on 22 Dec 2011, 10:02 AM

Hi Rohit,

Thanks for the code.

RadAjaxManager behind the scene wraps the controls ajaxified through it in UpdatePanels and therefore, there should be no difference if you are using UpdatePanels or RadAjaxManager. Furthermore, going through your code I could not spot anything that could indicate a potential problem with the validation (btw., the client-side validation code is missing). I'd ask you to isolate the problem in a small sample with a simple grid in it and jQuery validation for the edit form user control, ajaxify the grid, add the validation code and send us the project through a formal support ticket. This will speed up the resolution of the issue and also guarantee you a 24-hour response time.

Thanks in advance for that.

Greetings, Tsvetoslav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

answered on 06 Jan 2012, 05:36 PM

Hi Tsvetoslav,

I was working on trying to resolve the issue and I think I may have found the cause.

When I try to implement the custom pop-up edit form based on this example, I see that the following code

<asp:Button ID="btnInsert" Text="Insert" runat="server" CommandName="PerformInsert"

Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>'></asp:Button>

gets translated to

<input type="button" name="RadGrid1$ctl00$ctl02$ctl03$EditFormControl$btnInsert" value="Insert" onclick="javascript:__doPostBack('RadGrid1$ctl00$ctl02$ctl03$EditFormControl$btnInsert','')" id="RadGrid1_ctl00_ctl02_ctl03_EditFormControl_btnInsert">

instead of <input type="submit"...

I believe the validation plugin looks for [inputs, button] of type Submit to hook up the form submit to trigger validation. Now as the Insert/Update buttons were rendered as type="button", it was not getting properly hooked to validation plugin and hence the auto validation on submit was broken. I went back to the "UpdatePanel" implementation to validate that the buttons were rendered as submit type and that was the case. Tried the attribute UseSubmitBehavior="true" and it was ignored while rendering.

Am I missing something here? As a workaround I'm triggering the validation manually.

Regards.

answered on 11 Jan 2012, 06:59 PM

Hello Rohit,

Thanks for sharing that observation. However, on the online example you can notice that the buttons do get rendered as of type submit. So, it must be something else that is tampering with their rendering, not just the RadAjaxManager control. I'd ask you to open up a formal support ticket and send us a runnable sample where the problem is replicated. I shall debug it and get back toyou with further information. The ticket will also guarantee you a 24-hour resonse time and the sample a much faster resolution of the issue.

Looking forward to your feedback.

Regards,
Tsvetoslav
the Telerik team