Grid CommandItemTemplate dynamic content lost after AJAX call

3 posts, 1 answers
  1. Tom Rasmussen
    Tom  Rasmussen avatar
    20 posts
    Member since:
    Jan 2009

    Posted 01 Aug 2012 Link to this post

    I have a RadGrid using a CommandItemTemplate wrapped in an RadAjaxPanel:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" ClientEvents-OnRequestStart="RequestStart" ClientEvents-OnResponseEnd="ResponseEnd" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid ID="AccountGrid1" runat="server" OnNeedDataSource="AccountGrid1_NeedDataSource"
                        OnSortCommand="AccountGrid1_SortCommand" OnGroupsChanging="AccountGrid1_GroupsChanging" OnColumnCreated="AccountGrid1_ColumnCreated" OnItemCreated="AccountGrid1_ItemCreated"
                        AutoGenerateColumns="true" AllowPaging="true" AllowCustomPaging="true" AllowSorting="true" GroupingEnabled="true"
                        ShowGroupPanel="true" ShowFooter="true" ShowHeader="true">
            <GroupingSettings CaseSensitive="false"  />
            <MasterTableView DataKeyNames="Id,ClientId" ClientDataKeyNames="Id" AllowNaturalSort="false"
             AllowMultiColumnSorting="false" AllowCustomSorting="true" CommandItemDisplay="Top">
                <CommandItemStyle HorizontalAlign="Right" />
                <CommandItemTemplate>
                    <asp:LinkButton ID="RefreshLinkButton" runat="server" CommandName="RebindGrid"><%= Navigator.Icon("Refresh", "refresh").ToHtmlImage() %> Refresh</asp:LinkButton>  |  
                    <telerik:RadComboBox ID="gridStatCombo" runat="server" OnClientSelectedIndexChanged="EnableStatButton" DropDownWidth="250" Visible="false">
                        <Items>
                            <telerik:RadComboBoxItem Text="Select a field to group by" Value="" />
     
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadComboBox ID="gridStatDateCombo" runat="server" Width="75" Visible="false" Enabled="false">
                        <Items>
                            <telerik:RadComboBoxItem Text="Day" Value="DAY" />
                            <telerik:RadComboBoxItem Text="Month" Value="MONTH" Selected="true" />
                            <telerik:RadComboBoxItem Text="Year" Value="YEAR" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadButton ID="gridStatBtn" runat="server" Text="View Statistics" OnClick="Stat_Click" Enabled="false" Visible="false" />  |  
     
                    <telerik:RadComboBox ID="gridExportCombo" runat="server" OnClientSelectedIndexChanged="EnableExportButton" DropDownWidth="250">
                        <Items>
                            <telerik:RadComboBoxItem Text="Select an export format" Value="" />
                            <telerik:RadComboBoxItem Text="Excel" Value="Excel" ImageUrl="~/Main/Content/Images/Icons/excel.png" />
                            <telerik:RadComboBoxItem Text="Word" Value="Word" ImageUrl="~/Main/Content/Images/Icons/ms_word_2.png" />
                            <telerik:RadComboBoxItem Text="PDF" Value="PDF" ImageUrl="~/Main/Content/Images/Icons/filetype_pdf.png" />
                            <telerik:RadComboBoxItem Text="Comma Separated Values (CSV)" Value="CSV" ImageUrl="~/Main/Content/Images/Icons/csv_file.png" />
                            <telerik:RadComboBoxItem Text="Tab-delimited" Value="Tab" ImageUrl="~/Main/Content/Images/Icons/txt_file.png" />
                            <telerik:RadComboBoxItem Text="Tab-delimited w/ Quotes" Value="TabQuote" ImageUrl="~/Main/Content/Images/Icons/txt_file.png" />
                        </Items>
                    </telerik:RadComboBox>
                    <telerik:RadButton ID="gridBtnExport" runat="server" Text="Export" OnClick="Export_Click" Enabled="false" />
                </CommandItemTemplate>
                <PagerStyle AlwaysVisible="true" />
            </MasterTableView>
            <ClientSettings AllowDragToGroup="true" AllowColumnsReorder="true">
                <Selecting AllowRowSelect="true" />
                <ClientEvents OnRowDblClick="ViewAccount" OnGridCreated="ResizeAccountGrid" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
            </ClientSettings>
            <GroupingSettings ShowUnGroupButton="true" />
            <FooterStyle HorizontalAlign="Right" />
            <ExportSettings ExportOnlyData="true" HideStructureColumns="true" IgnorePaging="true"/>
        </telerik:RadGrid>
     
        <telerik:RadScriptBlock ID="AccountGridScriptBlock" runat="server">
            <script type="text/javascript">
                $(window).resize(function () { ResizeAccountGrid(); });
     
                function ResizeAccountGrid(sender, eventArgs) {
                    ResizeGrid($find("<%= AccountGrid1.ClientID %>"));
                }
     
                function ViewAccount(sender, eventArgs) {
                    var accountId = eventArgs.get_gridDataItem().getDataKeyValue("Id");
                    ToolClick(null, null, "<%= Navigator.Inquiry() %>" + "?Id=" + accountId, "<%= (int)SiteNavigatorTab.Inquiry %>", false);
                }
     
                function RequestStart(sender, eventArgs) {
                    //Log the start time
                    startTime = new Date();
                    if (eventArgs.EventTarget.indexOf("gridBtnExport") > 0) {
                        eventArgs.EnableAjax = false;
                    }
                }
             
                function ResponseEnd(sender, eventArgs) {
                    //Log the end time
                    var endTime = new Date();
                    //Display the total time
                    //$get("<%= lblTotal.ClientID %>").innerHTML = endTime - startTime + " ms";
                }
             
                function EnableExportButton(sender, eventArgs) {
                    var item = eventArgs.get_item();
                    var button = $find('<%= (AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0]).FindControl("gridBtnExport").ClientID %>');
                    var selectedIndex = item.get_index();
                    button.set_enabled(selectedIndex != 0);
                }
     
                function EnableStatButton(sender, eventArgs) {
                    var item = eventArgs.get_item();
                    var button = $find('<%= (AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0]).FindControl("gridStatBtn").ClientID %>');
                    var dateBreak = $find('<%= (AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0]).FindControl("gridStatDateCombo").ClientID %>');
                    var selectedIndex = item.get_index();
                    button.set_enabled(selectedIndex != 0);
                    var dateFields = "<%= JsDateTimeFields %>".split("|");
                    var text = item.get_text();
                    var exists = $.inArray(text, dateFields) > -1;
                    dateBreak.set_enabled(exists);
                }
            </script>
        </telerik:RadScriptBlock>
    </telerik:RadAjaxPanel>

    The RadComboBox (id gridStatCombo) is populated server side in Page_Load:

    protected void Page_Load(object sender, EventArgs e)
    {
        var gridStatCombo = (RadComboBox)AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0].FindControl("gridStatCombo");
        var gridStatDateCombo = (RadComboBox)AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0].FindControl("gridStatDateCombo");
        var gridStatBtn = (RadButton)AccountGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0].FindControl("gridStatBtn");
        foreach (var fieldName in Configuration[Vars.StatisticalReportFields].Value
            .Split(new[] { ", " }, StringSplitOptions.RemoveEmptyEntries).OrderBy(f => f.Trim()))
        {
            if (!User.ParentCawClient.HasAccountField(fieldName)) continue;
            var field = User.ParentCawClient.GetAccountField(fieldName);
            gridStatCombo.Items.Add(new RadComboBoxItem(field.DisplayName, field.ColumnName));
            if (SqlServerUtils.IsDateTimeSqlType(field.SqlDbType))
                JsDateTimeFields += field.DisplayName + "|";
        }
        if (gridStatCombo.Items.Count > 1)
        {
            gridStatCombo.Visible = true;
            gridStatDateCombo.Visible = true;
            gridStatBtn.Visible = true;
        }
    }

    This process works great on the initial load of the control.  However, after making any form of Ajax call (sorting, paging, grouping, etc.) the combo box in the command item template is not updated.  The content disappears.  Stepping through the code, I can see that it is executed, but the control does not appear to be updated.  The rest of the grid is updated via the Ajax call though.

    What am I missing?
  2. Answer
    Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 06 Aug 2012 Link to this post

    Hello Tom,

    You can check the forum thread below which elaborates on similar subject and see if it helps:
    http://www.telerik.com/community/forums/aspnet-ajax/grid/radcombobox-inside-commanditemtemplate-doesn-t-keep-the-selectedvalue-property-after-grid-rebind.aspx

    Kind regards,
    Pavlina
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom Rasmussen
    Tom  Rasmussen avatar
    20 posts
    Member since:
    Jan 2009

    Posted 06 Aug 2012 Link to this post

    Thanks.  By moving the combo box population and enable/disable code to the grid's PreRender event the information remained after any AJAX postback.  
Back to Top