Adding Ajax causes FormTemplate to be inaccessible to jQuery

[Johnathan]

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>
                            </div>
                        </FormTemplate>
                    </EditFormSettings>
                    <NestedViewSettings>
                        <ParentTableRelation>
                            <telerik:GridRelationFields MasterKeyField="StepID" DetailKeyField="StepID" />
                        </ParentTableRelation>
                    </NestedViewSettings>
                    <NestedViewTemplate>
<!-- removed for simplicity. Probably not relevant -->
                    </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>

[Jayesh Goyani]

Hello,

Please try to add your javascript in master page / Parent Page in-place of current page/user control.

Let me know if its working or not.

Thanks,
Jayesh Goyani

[Johnathan]

I saw no discernable difference moving the javascript to the master page. I also tried moving it to different sections of the page. (<head> vs. <body>) Within and outside of a RadCodeBlock, etc. I will try other things, but that is the current status, based on your suggestion.

[Kostadin]

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

[Johnathan]

Thanks, that worked nicely.