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

Adding Ajax causes FormTemplate to be inaccessible to jQuery

4 Answers 90 Views

Grid

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

Johnathan asked on 04 Mar 2013, 09:16 PM

I have a RadGrid with an Edit Form Template. Inside the template I have a RadioButtonList that has javascript attached that will hide or show elements within the form template depending on what is selected. It have it working as I expected; however, when I add a RadAjaxManager to the page, then the javascript stops working, as it no longer seems to be able to find the inner elements of the form template. Everything else on the grid seems to work with the ajax though.

The RadGrid markup is here:

<telerik:RadGrid ID="grdWorkflow" Skin="Outlook" AutoGenerateColumns="False" GridLines="None" Width="890px"

OnNeedDataSource="grdWorkflow_NeedDataSource" OnItemDataBound="grdWorkflow_ItemDataBound"

OnItemCommand="grdWorkflow_ItemCommand" OnRowDrop="grdWorkflow_RowDrop" runat="server">

<ClientSettings AllowColumnsReorder="false" EnableRowHoverStyle="true" Selecting-AllowRowSelect="false">

</ClientSettings>

<MasterTableView Caption="List of workflows" EditMode="EditForms" CommandItemDisplay="Top"

Summary="Add Step/Step Maintenance" CommandItemSettings-AddNewRecordText="Add New Step" CommandItemSettings-RefreshText="Refresh Workflow">

<NoRecordsTemplate>

<div class="bold">

No workflows to display. Please select the link above to add a new workflow step.

</div>

</NoRecordsTemplate>

<GroupByExpressions>

<telerik:GridGroupByExpression>

<SelectFields>

<telerik:GridGroupByField FieldAlias="Workflow" FieldName="WorkflowName" />

</SelectFields>

<GroupByFields>

<telerik:GridGroupByField FieldName="ArtificialSortingField" />

</GroupByFields>

</telerik:GridGroupByExpression>

</GroupByExpressions>

<Columns>

<telerik:GridBoundColumn UniqueName="WorkflowID" DataField="WorkflowID" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="WorkflowName" DataField="WorkflowName" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="StepID" DataField="StepID" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="StepType" DataField="StepType" Display="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="StepTypeIcon" HeaderText="Type" ItemStyle-Width="30px"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

<ItemTemplate>

<asp:Image ID="btnEdit" ImageUrl="<%# GetFileTypeIcon(((NAVIDAS.Core.WorkflowStep)Container.DataItem).StepType) %>"

ImageAlign="Middle" AlternateText='<%# (((NAVIDAS.Core.WorkflowStep)Container.DataItem).StepType == "C") ? "Decision Point" : "Approval Step" %>'

ToolTip='<%# (((NAVIDAS.Core.WorkflowStep)Container.DataItem).StepType == "C") ? "Decision Point" : "Approval Step" %>'

runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="StepName" HeaderText="Step Name" DataField="StepName">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Calculation" HeaderText="Show Path if:" ItemStyle-Width="105px">

<ItemTemplate>

<asp:RadioButtonList ID="rblCalculation" RepeatDirection="Horizontal" AutoPostBack="true"

OnSelectedIndexChanged="rblCalculation_SelectedIndexChanged" Visible='<%# (((NAVIDAS.Core.WorkflowStep)Container.DataItem).StepType == "C") %>'

runat="server">

<asp:ListItem Text="Yes" Value="1" Selected></asp:ListItem>

<asp:ListItem Text="No" Value="0"></asp:ListItem>

</asp:RadioButtonList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn UniqueName="Edit" HeaderText="Edit" HeaderStyle-Width="30px" ItemStyle-Width="30px" ButtonType="ImageButton"

HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">

</telerik:GridEditCommandColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<div style="margin-left:5px;">

<asp:Label ID="lblStepID" Text='<%# Bind("StepID") %>' Visible="false" runat="server"></asp:Label>

<asp:Label ID="lblWorkflowID" Text='<%# Bind("WorkflowID") %>' Visible="false" runat="server"></asp:Label>

<asp:Label ID="lblNextStepID" Text='<%# Bind("NextStepID") %>' Visible="false" runat="server"></asp:Label>

<asp:Label ID="lblFalseStepID" Text='<%# Bind("FalseStepID") %>' Visible="false" runat="server"></asp:Label>

<fieldset>

<ol>

<li>

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_txtWorkflowName">

Workflow Name:

</label>

<asp:TextBox ID="txtWorkflowName" Width="350px" MaxLength="50" Text='<%# Bind("WorkflowName") %>' runat="server" />

</li>

<li id="liStepType">

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_rblStepType">

<span class="required">*</span> Type of Step:

</label>

<span class="radioButtons">

<asp:RadioButtonList ID="rblStepType" RepeatDirection="Horizontal" RepeatLayout="Flow" runat="server">

<asp:ListItem Text="Approval" Value="A"></asp:ListItem>

<asp:ListItem Text="Decision Point" Value="C"></asp:ListItem>

</asp:RadioButtonList>

<asp:RequiredFieldValidator CssClass="requiredField" ID="rfvStepType" ControlToValidate="rblStepType"

Enabled="false" Display="Dynamic" runat="server" ErrorMessage="You must select a step type"

ValidationGroup="Save"> </asp:RequiredFieldValidator>

</span>

</li>

<li>

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_txtStepName">

Step Name:

</label>

<asp:TextBox ID="txtStepName" Width="350px" MaxLength="50" Text='<%# Bind("StepName") %>' runat="server" />

</li>

<li id="calcField">

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_ddlField">

Field:

</label>

<asp:DropDownList ID="ddlField" DataTextField="FieldName" DataValueField="FieldID" runat="server">

</asp:DropDownList>

</li>

<li id="calcOperator">

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_ddlOperators">

Comparison Type:

</label>

<asp:DropDownList ID="ddlOperators" runat="server">

<asp:ListItem Text="< less than" Value="<"></asp:ListItem>

<asp:ListItem Text="> greater than" Value=">"></asp:ListItem>

<asp:ListItem Text="<= less than or equal" Value="<="></asp:ListItem>

<asp:ListItem Text=">= greater than or equal" Value=">="></asp:ListItem>

<asp:ListItem Text="= equal" Value="="></asp:ListItem>

<asp:ListItem Text="<> not equal" Value="<>"></asp:ListItem>

</asp:DropDownList>

</li>

<li id="calcValue">

<label for="ctl00_ContentPlaceHolder1_grdWorkflow_ctl00_ctl06_txtCalculationValue">

Value:

</label>

<asp:TextBox ID="txtCalculationValue" Text='<%# Bind("Value") %>' runat="server">

</asp:TextBox>

or

<asp:DropDownList ID="ddlValueField" DataTextField="FieldName" DataValueField="FieldID" runat="server">

</asp:DropDownList>

</li>

</ol>

</fieldset>

<div class="buttons">

<asp:Button ID="btnUpdate" Text='<%# (Container is GridEditFormInsertItem) ? "Add" : "Update" %>'

CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

runat="server" ValidationGroup="Save" />

<asp:Button ID="btnDelete" Text="Delete" Visible='<%# (Container is GridEditFormInsertItem) ? false : true %>'

runat="server" CausesValidation="false" CommandName="Delete" OnClientClick="javascript:return confirm('Are you sure you want to remove this step?\r\n\r\n(But not the actual approver groups associated with this step)');" />

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="false"

CommandName="Cancel" />

</div>

</FormTemplate>

</EditFormSettings>

<NestedViewSettings>

<ParentTableRelation>

<telerik:GridRelationFields MasterKeyField="StepID" DetailKeyField="StepID" />

</ParentTableRelation>

</NestedViewSettings>

<NestedViewTemplate>

</NestedViewTemplate>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

<GroupingSettings ShowUnGroupButton="true" />

</telerik:RadGrid>

The working javascript (which fails after ajax applied) is here:

<script type="text/javascript">

$(document).ready(function ()

{

$("#liStepType input:radio").each(function ()

{

var i = $(this).attr("id");

var txt = $("#" + i).val();

if (txt == "C")

{

if ($(this).is(":checked"))

{

$("#calcField").show();

$("#calcOperator").show();

$("#calcValue").show();

$("#calcFieldValue").show();

}

else

{

$("#calcField").hide();

$("#calcOperator").hide();

$("#calcValue").hide();

$("#calcFieldValue").hide();

}

});

$("#liStepType input:radio").click(function ()

{

var i = $(this).attr("id");

var txt = $("#" + i).val();

if (txt == "C")

{

if ($(this).is(":checked"))

{

$("#calcField").show();

$("#calcOperator").show();

$("#calcValue").show();

$("#calcFieldValue").show();

}

else

{

$("#calcField").hide();

$("#calcOperator").hide();

$("#calcValue").hide();

$("#calcFieldValue").hide();

}

});

</script>

And the RadAjaxManager markup is here:

<telerik:RadAjaxManagerProxy ID="workflowProxy" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ddlCommand">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ddlOrganization" />

<telerik:AjaxUpdatedControl ControlID="grdWorkflow" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="ddlOrganization">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdWorkflow" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="grdWorkFlow">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdWorkflow" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

4 Answers, 1 is accepted

Accepted

answered on 07 Mar 2013, 04:23 PM

Hi Johnathan,

Note that when you are using Ajax you have to use pageLoad function instead $(document).ready(). This blog post elaborates more on this matter. Your code should looks like the following code snippet.

function pageLoad()

{

$("#liStepType input:radio").each(function () {

var i = $(this).attr("id");

var txt = $("#" + i).val();

if (txt == "C") {

if ($(this).is(":checked")) {

$("#calcField").show();

$("#calcOperator").show();

$("#calcValue").show();

$("#calcFieldValue").show();

}

else {

$("#calcField").hide();

$("#calcOperator").hide();

$("#calcValue").hide();

$("#calcFieldValue").hide();

}

});

$("#liStepType input:radio").click(function () {

var i = $(this).attr("id");

var txt = $("#" + i).val();

if (txt == "C") {

if ($(this).is(":checked")) {

$("#calcField").show();

$("#calcOperator").show();

$("#calcValue").show();

$("#calcFieldValue").show();

}

else {

$("#calcField").hide();

$("#calcOperator").hide();

$("#calcValue").hide();

$("#calcFieldValue").hide();

}

});

}

Regards,
Kostadin
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.