Retain expanded/selected state in hierarchy on rebind (3 Level)

[Mae]

I've had a hierarchical grid w/binds on server mode and a checkbox nested inside the GridTemplateColumn found on the third level. The problem is I can't get to work the functionality such that when user selects a checkbox then scrolls to next page it should retain the expanded state. Currently, I have tried your sample code found on http://www.telerik.com/forums/how-to-maintain-expanded-rows-of-detailtable-after-postback but the problem is for every row selected on a particular page, it also expands the row from detail table on the other pages.

Appreciate your immediate response and help on the matter.


Below is the aspx code

<td>
<Telerik:RadScriptManager runat="server" ID="RadScriptManager1">
</Telerik:RadScriptManager>
<Telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<Telerik:RadGrid ID="RadGridPatientData" runat="server" AllowMultiRowSelection="true"
CellSpacing="0" Width="945" Height="325" PagerStyle-AlwaysVisible="true" Visible="false"
AllowPaging="True" OnDetailTableDataBind="RadGridPatientData_DetailTableDataBind"
OnNeedDataSource="RadGridPatientData_NeedDataSource" OnItemDataBound="RadGridPatientData_ItemDataBound"
OnItemCreated="RadGridPatientData_ItemCreated" OnPageIndexChanged="RadGridPatientData_PageIndexChanged"
AutoGenerateColumns="true" HeaderStyle-HorizontalAlign="Left">
<PagerStyle Mode="NextPrev" PagerTextFormat="{4} Page {0} of {1}, items {2} to {3} of {5}">
</PagerStyle>
<MasterTableView DataMember="Patient" Width="100%" ClientDataKeyNames="CheckSumId"
DataKeyNames="CheckSumId" AllowMultiColumnSorting="True" AutoGenerateColumns="true"
EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="false">
<DetailTables>
<Telerik:GridTableView DataMember="Admission" ClientDataKeyNames="AdmissionId" DataKeyNames="AdmissionId"
Width="100%" AllowPaging="false">
<DetailTables>
<Telerik:GridTableView DataMember="Document" ClientDataKeyNames="Id" DataKeyNames="Id"
Width="99%" AllowPaging="false">
<Columns>
<Telerik:GridTemplateColumn HeaderText="">
<ItemTemplate>
<asp:CheckBox ID="chkSelectDoc" runat="server" AutoPostBack="true" OnCheckedChanged="chkSelectDoc_CheckChanged" />
</ItemTemplate>
</Telerik:GridTemplateColumn>
</Columns>
</Telerik:GridTableView>
</DetailTables>
</Telerik:GridTableView>
</DetailTables>
<NoRecordsTemplate>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<br />
<p style="color: Black">
No document(s) found...</p>
</td>
</tr>
</table>
</NoRecordsTemplate>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" ScrollHeight="400px" UseStaticHeaders="true" />
<Selecting AllowRowSelect="true" />
<ClientEvents OnCommand="function(){}" />
</ClientSettings>
</Telerik:RadGrid>
</Telerik:RadAjaxPanel>
</td>

[Shinu]

Hi Mae,

You can set the RetainExpandStateOnRebind property of the grid, it gets or sets a value indicating if the Expanded property of both hierarchy and group items will be retained after a call to Rebind() or Rebind() method. Please take a look at the sample code snippet to have the checkbox  persist its state as well as the expanded state.

ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <telerik:RadGrid ID="RadGrid" runat="server" RetainExpandStateOnRebind="true" OnDetailTableDataBind="RadGridPatientData_DetailTableDataBind" OnNeedDataSource="RadGridPatientData_NeedDataSource" OnItemDataBound="RadGridPatientData_ItemDataBound">
  <MasterTableView DataMember="Country" DataKeyNames="CountryID" HierarchyLoadMode="Client" Name="Country">
            <DetailTables>
                <telerik:GridTableView DataKeyNames="StateID" Name="State" HierarchyLoadMode="Client" RetainExpandStateOnRebind="true" DataMember="State">
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="StateID,DistrictID" Name="District" RetainExpandStateOnRebind="true" DataMember="District">
                            <Columns>
                                <telerik:GridTemplateColumn HeaderText="">
                                    <ItemTemplate>
                                        <asp:CheckBox ID="chkSelectDoc" runat="server" AutoPostBack="true" OnCheckedChanged="chkSelectDoc_CheckChanged" />
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                </telerik:GridTableView>
            </DetailTables>
        </MasterTableView>
        <ClientSettings>
            <Scrolling AllowScroll="true" ScrollHeight="400px" UseStaticHeaders="true" />
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
    </telerik:RadGrid>
</telerik:RadAjaxPanel>

C#:

protected void RadGridPatientData_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    if (!e.IsFromDetailTable)
    {
       RadGrid.DataSource = GetDataTable("Select * from Country");
    }
}
protected void RadGridPatientData_DetailTableDataBind(object source, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
{
    GridDataItem dataItem = (GridDataItem)e.DetailTableView.ParentItem;
    switch (e.DetailTableView.Name)
    {
        case "State":
            {
                string CountryID = dataItem.GetDataKeyValue("CountryID").ToString();
                e.DetailTableView.DataSource = GetDataTable("SELECT * FROM State WHERE CountryID = '" + CountryID + "'");
                break;
            }
        case "District":
            {
                string StateID = dataItem.GetDataKeyValue("StateID").ToString();
                e.DetailTableView.DataSource = GetDataTable("SELECT * FROM District WHERE StateID = '" + StateID + "'");
                break;
            }
    }
}

public DataTable GetDataTable(string query)
{
    String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlConnection conn = new SqlConnection(ConnString);
    SqlDataAdapter adapter = new SqlDataAdapter();
    adapter.SelectCommand = new SqlCommand(query, conn);

    DataTable myDataTable = new DataTable();

    conn.Open();
    try
    {
        adapter.Fill(myDataTable);
    }
    finally
    {
        conn.Close();
    }

    return myDataTable;
}
protected void chkSelectDoc_CheckChanged(object sender, EventArgs e)
{
    CheckBox box = (CheckBox)sender;
    GridDataItem item = (GridDataItem)box.NamingContainer;
    Hashtable target = null;
    if (item.OwnerTableView.DataMember == "District")
    {
        target = DistrictChecked;
    }

    if (box.Checked)
    {
        target[item["DistrictID"].Text] = true;
    }
    else
    {
        target[item["DistrictID"].Text] = null;
    }
}

private Hashtable DistrictChecked
{
    get
    {
        object res = ViewState["_cc2"];
        if (res == null)
        {
            res = new Hashtable();
            ViewState["_cc2"] = res;
        }

        return (Hashtable)res;
    }
}

protected void RadGridPatientData_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem item = e.Item as GridDataItem;
        CheckBox box = (CheckBox)item.FindControl("chkSelectDoc");
        object isChecked = null;
        if (item.OwnerTableView.DataMember == "District")
        {
            isChecked = DistrictChecked[item["DistrictID"].Text];
        }
        if (isChecked != null)
        {
            box.Checked = (bool)isChecked == true;
        }
    }
}

Thanks,
Shinu

[Cindy]

I set the RetainExpandStateOnRebind property of the grid = true and on the detail tables as well.  Still does not work.

 

    <telerik:RadGrid ID="RadGrid1" runat="server" Width="95%" ShowStatusBar="true" AutoGenerateColumns="False" PageSize="700" AllowSorting="True"
         AllowMultiRowSelection="False" AllowPaging="False" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" Skin="Office2007" 
        OnNeedDataSource="RadGrid1_NeedDataSource" OnItemDataBound="RadGrid1_ItemDataBound" OnPreRender="RadGrid1_PreRender" ShowGroupPanel="true"
         ShowFooter="false" GridLines="None" GroupingSettings-RetainGroupFootersVisibility="true" RetainExpandStateOnRebind="true">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
            <Selecting AllowRowSelect="true"></Selecting>
        </ClientSettings>
        <MasterTableView Width="100%" DataKeyNames="CC" AllowMultiColumnSorting="True" ShowHeader="false" HierarchyLoadMode="Conditional">
            <Columns>
                <telerik:GridBoundColumn DataField="Zone"></telerik:GridBoundColumn>
            </Columns>
            <DetailTables>
                <telerik:GridTableView DataKeyNames="CustomerName" Name="ServiceCC" Width="100%" ShowHeader="false" HierarchyLoadMode="Conditional" RetainExpandStateOnRebind="true">
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="ID" Name="Customers" Width="100%" HierarchyLoadMode="Conditional" RetainExpandStateOnRebind="true">
                            <DetailTables>
                                <telerik:GridTableView DataKeyNames="AlertID" Name="Responses" Width="100%" HierarchyLoadMode="Conditional" RetainExpandStateOnRebind="true">
                                    <Columns>
                                        <telerik:GridBoundColumn SortExpression="AlertID" HeaderText="" Visible="false" HeaderButtonType="TextButton" 
                                            DataField="AlertID">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridTemplateColumn HeaderText="Response Title" ItemStyle-CssClass="dcol1"  HeaderButtonType="TextButton" UniqueName="ResponseTitle">
                                            <ItemTemplate>
                                                <asp:Label ID="lblResponseTitle" runat="server" Text='<%#Eval("Title") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Assigned To" ItemStyle-CssClass="dcol3"  HeaderButtonType="TextButton" UniqueName="AssignedTo">
                                            <ItemTemplate>
                                                <asp:Label ID="lblAssignedTo" runat="server" Text='<%#Eval("AssignedTo") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Response Status" ItemStyle-CssClass="dcol4"  HeaderButtonType="TextButton" UniqueName="ResponseStatus">
                                            <ItemTemplate>
                                                <asp:Label ID="lblResponseStatus" runat="server" Text='<%#Eval("Status") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn HeaderText="Response Created By" ItemStyle-CssClass="dcol5"  HeaderButtonType="TextButton" UniqueName="ResponseAuthor">
                                            <ItemTemplate>
                                                <asp:Label ID="lblResponseAuthor" runat="server" Text='<%#Eval("Author") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridBoundColumn SortExpression="Created" HeaderText="Response Created" HeaderButtonType="TextButton" DataField="Created" DataFormatString="{0:M/d/yyyy}"></telerik:GridBoundColumn>
                                        <telerik:GridTemplateColumn HeaderText="ID" HeaderButtonType="TextButton" UniqueName="ID" Visible="true">
                                            <ItemTemplate>
                                                <asp:Label ID="lblID" runat="server" Text='<%#Eval("ID") %>'></asp:Label>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn DataField="Comments" ItemStyle-CssClass="dcol7"  UniqueName="Comments" HeaderText="Response Comment History">
                                            <ItemTemplate>
                                                <uc1:Comments runat="server" ID="ctrlComments" />
                                                <uc3:CustomEmail runat="server" ID="CustomEmail" />
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                </telerik:GridTableView>
                            </DetailTables>
                            <Columns>
                                <telerik:GridBoundColumn SortExpression="ID" HeaderText="" Visible="false"  HeaderButtonType="TextButton" DataField="ID"></telerik:GridBoundColumn>
                                <telerik:GridTemplateColumn HeaderText="Alert Title" ItemStyle-Width="200px" ItemStyle-CssClass="acol1"  HeaderButtonType="TextButton" UniqueName="Title">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# DataBinder.Eval(Container.DataItem, "Url") %>'><%# DataBinder.Eval(Container.DataItem, "Title") %></asp:HyperLink>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Alert Description" ItemStyle-Width="400px" ItemStyle-CssClass="acol2"  HeaderButtonType="TextButton" UniqueName="Description">
                                    <ItemTemplate>
                                        <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("Description") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Alert Sub Type" ItemStyle-CssClass="acol3"  HeaderButtonType="TextButton" UniqueName="SubType">
                                    <ItemTemplate>
                                        <asp:Label ID="lblSubType" runat="server" Text='<%#Eval("SubType") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Areas of Impact" ItemStyle-CssClass="acol3"  HeaderButtonType="TextButton" UniqueName="AlertArea">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAlertArea" runat="server" Text='<%#Eval("AlertArea") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Alert Owner" ItemStyle-CssClass="acol4"  HeaderButtonType="TextButton" UniqueName="Owner">
                                    <ItemTemplate>
                                        <asp:Label ID="lblOwner" runat="server" Text='<%#Eval("Owner") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridTemplateColumn HeaderText="Alert Created By" ItemStyle-CssClass="acol5"  HeaderButtonType="TextButton" UniqueName="Author">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAuthor" runat="server" Text='<%#Eval("Author") %>'></asp:Label>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn SortExpression="Created" HeaderText="Alert Created" HeaderButtonType="TextButton" DataField="Created" DataFormatString="{0:M/d/yyyy}"></telerik:GridBoundColumn>
                            </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                            <telerik:GridBoundColumn SortExpression="CustomerName" HeaderText="Customer" HeaderButtonType="TextButton" DataField="CustomerName"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn Visible="false" SortExpression="CC" HeaderText="CC" HeaderButtonType="TextButton" DataField="CC"></telerik:GridBoundColumn>
                    </Columns>
                </telerik:GridTableView>
            </DetailTables>
            <Columns>
                <telerik:GridBoundColumn SortExpression="CC" HeaderText="" HeaderButtonType="TextButton" DataField="CC">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        </telerik:RadGrid>

[Pavlina]

Hello,

Indeed there is a problem with RetainExpandStateOnRebind property of the grid which is a known one and our developers will fix it as soon as possible. Meanwhile you can use the approach presented in the following code library to persist the expanded/selected state of hierarchy grid on Rebind: 
http://www.telerik.com/support/code-library/retain-expanded-selected-state-in-hierarchy-on-rebind

Regards,
Pavlina
Telerik

[Chris]

Any update on this? We have set the same property but it is not working. We are using 2015.2.623.35 version

[Pavlina]

Hello,

Could you confirm that the same problem exists with the latest release of ASP.NET AJAX? In case RetainExpandStateOnRebind is not working with version 2017.1.228, please isolate the issue in a runnable project and send it to us. We will debug it locally and in case the bug still exists we we will log it in our bug tracking system and will fix it as soon as possible.

Regards,
Pavlina
Telerik by Progress