Adding Ajax causes FormTemplate to be inaccessible to jQuery

5 posts, 1 answers
  1. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 04 Mar 2013 Link to this post

    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>
  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 04 Mar 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 05 Mar 2013 Link to this post

    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.
  5. Answer
    Kostadin
    Admin
    Kostadin avatar
    1711 posts

    Posted 07 Mar 2013 Link to this post

    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.
  6. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 07 Mar 2013 Link to this post

    Thanks, that worked nicely.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017