Hierarchical radgrid : Expand state

[Angella]

Hi all,
I have a hierarchical radgrid. I have problem like, on postback the hierarchy expand state is vanished. When a button outside the grid is clicked, the expanded row will be collapsed, I need it expanded even after the button click.
Please help.

Thanks in advance

[Shinu]

Hi,

Please take a look into the following code snippet i tried to retain the expanded state of the Hierarchical RadGrid

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
   <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadGrid1">
       <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
       </UpdatedControls>
      </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"/>
</telerik:RadAjaxLoadingPanel>
<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server"AutoGenerateColumns="False" OnDataBound="RadGrid1_DataBound" OnItemCommand="RadGrid1_ItemCommand">
   <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="CustomerID"CommandItemDisplay="Top">
      <DetailTables>
          <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource2"  runat="server" CommandItemDisplay="Top">
              <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="CustomerID" MasterKeyField="CustomerID" />
              </ParentTableRelation>
     <DetailTables>
          <telerik:GridTableView DataKeyNames="OrderID" DataSourceID="SqlDataSource3" runat="server">
              <ParentTableRelation>
                   <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
              </ParentTableRelation>
              <Columns>
                   <telerik:GridBoundColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                   DataField="UnitPrice" UniqueName="UnitPrice">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                   DataField="Quantity" UniqueName="Quantity">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                   DataField="Discount" UniqueName="Discount">
                   </telerik:GridBoundColumn>
                   <telerik:GridButtonColumn UniqueName="OrderDetailsSelectColumn" CommandName="Select"
                   Text="Select" />
                   <telerik:GridButtonColumn UniqueName="OrderDetailsDeselectColumn" CommandName="Deselect"
                   Text="Deselect" />
                   </Columns>
                   </telerik:GridTableView>
                   </DetailTables>
              <Columns>
                   <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                   DataField="OrderID" UniqueName="OrderID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="OrderDate" HeaderText="Date Ordered" HeaderButtonType="TextButton"
                   DataField="OrderDate" UniqueName="OrderDate">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="EmployeeID" HeaderText="EmployeeID" HeaderButtonType="TextButton"
                   DataField="EmployeeID" UniqueName="EmployeeID">
                   </telerik:GridBoundColumn>
                   <telerik:GridButtonColumn UniqueName="OrdersSelectColumn" CommandName="Select" Text="Select" />
                   <telerik:GridButtonColumn UniqueName="OrdersDeselectColumn" CommandName="Deselect"
                   Text="Deselect" />
              </Columns>
         </telerik:GridTableView>
     </DetailTables>
             <Columns>
                   <telerik:GridBoundColumn SortExpression="CustomerID" HeaderText="CustomerID" HeaderButtonType="TextButton"
                   DataField="CustomerID" UniqueName="CustomerID">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="ContactName" HeaderText="Contact Name" HeaderButtonType="TextButton"
                   DataField="ContactName" UniqueName="ContactName">
                   </telerik:GridBoundColumn>
                   <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="Company" HeaderButtonType="TextButton"
                   DataField="CompanyName" UniqueName="CompanyName">
                   </telerik:GridBoundColumn>
                   <telerik:GridButtonColumn UniqueName="CustomersSelectColumn" CommandName="Select"
                   Text="Select" />
                   <telerik:GridButtonColumn UniqueName="CustomersSelectColumn" CommandName="Deselect"
                   Text="Deselect" />
              </Columns>
    </MasterTableView>
</telerik:RadGrid>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>"
SelectCommand="SELECT   * from  [Customers]" >
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>"
SelectCommand="SELECT  Top 10 * from  [Orders]" >
  <SelectParameters>
     <asp:SessionParameter Name="CustomerID" SessionField="CustomerID" Type="string" />
  </SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>"
SelectCommand="SELECT Top 10 * FROM [Order Details] where OrderID =  @OrderID" >
  <SelectParameters>
     <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" />
  </SelectParameters>
</asp:SqlDataSource>

<asp:Button ID="grdRebind" runat="server" Text="Rebind grid" OnClick="grdRebind_Click" />

C#:

private Hashtable _ordersExpandedState;
private Hashtable _selectedState;

public void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //reset expanded states
        this._ordersExpandedState = null;
        this.Session["_ordersExpandedState"] = null;
    }
}
//Save/load expanded states Hash from the session
//this can also be implemented in the ViewState
private Hashtable ExpandedStates
{
    get
    {
        if (this._ordersExpandedState == null)
        {
            _ordersExpandedState = this.Session["_ordersExpandedState"] as Hashtable;
            if (_ordersExpandedState == null)
            {
                _ordersExpandedState = new Hashtable();
                this.Session["_ordersExpandedState"] = _ordersExpandedState;
            }
        }

        return this._ordersExpandedState;
    }
}

//Clear the state for all expanded children if a parent item is collapsed
private void ClearExpandedChildren(string parentHierarchicalIndex)
{
    string[] indexes = new string[this.ExpandedStates.Keys.Count];
    this.ExpandedStates.Keys.CopyTo(indexes, 0);
    foreach (string index in indexes)
    {
        //all indexes of child items
        if (index.StartsWith(parentHierarchicalIndex + "_") ||
            index.StartsWith(parentHierarchicalIndex + ":"))
        {
            this.ExpandedStates.Remove(index);
        }
    }
}
//Save/load selected states Hash from the session
//this can also be implemented in the ViewState
private Hashtable SelectedStates
{
    get
    {
        if (this._selectedState == null)
        {
            _selectedState = this.Session["_selectedState"] as Hashtable;
            if (_selectedState == null)
            {
                _selectedState = new Hashtable();
                this.Session["_selectedState"] = _selectedState;
            }
        }

        return this._selectedState;
    }
}
protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
{
    //save the expanded/selected state in the session
    if (e.CommandName == RadGrid.ExpandCollapseCommandName)
    {
        //Is the item about to be expanded or collapsed
        if (!e.Item.Expanded)
        {
            //Save its unique index among all the items in the hierarchy
            this.ExpandedStates[e.Item.ItemIndexHierarchical] = true;
        }
        else //collapsed
        {
            this.ExpandedStates.Remove(e.Item.ItemIndexHierarchical);
            this.ClearExpandedChildren(e.Item.ItemIndexHierarchical);
        }
    }
    //Is the item about to be selected
    else if (e.CommandName == RadGrid.SelectCommandName)
    {
        //Save its unique index among all the items in the hierarchy
        this.SelectedStates[e.Item.ItemIndexHierarchical] = true;
    }
    //Is the item about to be deselected
    else if (e.CommandName == RadGrid.DeselectCommandName)
    {
        this.SelectedStates.Remove(e.Item.ItemIndexHierarchical);
    }
}
protected void RadGrid1_DataBound(object sender, EventArgs e)
{
    //Expand all items using our custom storage
    string[] indexes = new string[this.ExpandedStates.Keys.Count];
    this.ExpandedStates.Keys.CopyTo(indexes, 0);

    ArrayList arr = new ArrayList(indexes);
    //Sort so we can guarantee that a parent item is expanded before any of
    //its children
    arr.Sort();

    foreach (string key in arr)
    {
        bool value = (bool)this.ExpandedStates[key];
        if (value)
        {
            RadGrid1.Items[key].Expanded = true;
        }
    }

    //Select all items using our custom storage
    indexes = new string[this.SelectedStates.Keys.Count];
    this.SelectedStates.Keys.CopyTo(indexes, 0);

    arr = new ArrayList(indexes);
    //Sort to ensure that a parent item is selected before any of its children
    arr.Sort();

    foreach (string key in arr)
    {
        bool value = (bool)this.SelectedStates[key];
        if (value)
        {
            RadGrid1.Items[key].Selected = true;
        }
    }
}
protected void grdRebind_Click(object sender, EventArgs e)
{
    RadGrid1.Rebind();
}

Please check this code library for further information.

Thanks,
Shinu.

[Ivan]

Can the same be somehow achieved with Javascript

[Eyup]

Hello Ivan,

I've already replied to your query in the other thread:
http://www.telerik.com/forums/grid-expad-collapse-after-refresh#ib5kZWxbdEudoNs_W5_eqw

I suggest we continue our conversation in the mentioned thread.

Regards,
Eyup
Telerik