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

Adding Ajax causes FormTemplate to be inaccessible to jQuery

4 Answers 24 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
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>
                            </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>

4 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 05 Mar 2013, 05:08 AM
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
0
Johnathan
Top achievements
Rank 1
answered on 05 Mar 2013, 02:13 PM
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.
0
Accepted
Kostadin
Telerik team
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.
0
Johnathan
Top achievements
Rank 1
answered on 07 Mar 2013, 04:42 PM
Thanks, that worked nicely.
Tags
Grid
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Johnathan
Top achievements
Rank 1
Kostadin
Telerik team
Share this question
or