Hierarchical radgrid : Expand state

4 posts, 1 answers
  1. Angella
    Angella avatar
    22 posts
    Member since:
    Mar 2012

    Posted 05 Jun 2012 Link to this post

    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
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 05 Jun 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivan
    Ivan avatar
    3 posts
    Member since:
    May 2014

    Posted 29 Jan 2015 in reply to Shinu Link to this post

    Can the same be somehow achieved with Javascript
  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 03 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top