Jul 25

How to: Telerik RadGrid loses it’s state of expanded and contracted groups whenever you databind

The grouping functionality of the Ajax control RadGrid from Telerik is probably one of its most attractive features. However, many users might encounter themselves in a situation where you can take action on any given element and you wish to update the information being displayed on-screen to correspond to the action you’ve taken on the datasource. The big problem that occurs at this point is that on each ‘postback’ (you can do async calls too but the principle is the same) the groups that were collapsed and expanded all default back to their original condition which could result in a frustrated user having to re-collapse groups to get back to the view they had configured. In order to overcome this you need to save the grouping state before a databinding event and then restore it after the grid is databound. Below is a code snippet on how to achieve this:

 

        /// <summary>
        /// Page load function
        /// </summary>
        ///The parameter is not used.
        ///The parameter is not used.
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                // Set the session used to store the index of collapsed groupings to null as this is a new visit to the page.
                Session[“groupExpandedState”] = null;
            }
            this.RGV_Entity.DataBound += new EventHandler(RadGrid1_DataBound);
            this.RGV_Entity.DataBinding += new EventHandler(RadGrid1_DataBinding);
        }
        /// <summary>
        /// This method adds logic on how to handle a databound (restore the grouping set on screen)
        /// </summary>
        ///The parameter is not used.
        ///The parameter is not used.
        private void RadGrid1_DataBound(object sender, EventArgs e)
        {
            LoadGroupsExpandedState(this.RGV_Entity);
        }
        /// <summary>
        /// This method adds logic on how to handle a databinding (save the grouping set on screen)
        /// </summary>
        ///The parameter is not used.
        ///The parameter is not used.
        private void RadGrid1_DataBinding(object sender, EventArgs e)
        {
            SaveGroupsExpandedState(this.RGV_Entity);
        }
        /// <summary>
        /// Saves the state of the groupping on screen
        /// </summary>
        ///The RadGrid that needs to preserve it’s grouping state
        private void SaveGroupsExpandedState(RadGrid grid)
        {
            GridItem[] groupItems = grid.MasterTableView.GetItems(GridItemType.GroupHeader);
            if (groupItems.Length > 0)
            {
                listCollapsedIndexes = new List();
                foreach (GridItem item in groupItems)
                {
                    if (!item.Expanded)
                    {
                        listCollapsedIndexes.Add(item.RowIndex);
                    }
                }
                Session[“groupExpandedState”] = collapsedIndexes;
            }
        }
        /// <summary>
        /// Restores the state of the groupping on screen
        /// </summary>
        ///The RadGrid that needs to be restored to its grouping state
        private void LoadGroupsExpandedState(RadGrid grid)
        {
            listCollapsedIndexes= Session[“groupExpandedState”] as List;
            if (listCollapsedIndexes!= null)
            {
                foreach (GridItem item in grid.MasterTableView.GetItems(GridItemType.GroupHeader))
                {
                    if (listCollapsedIndexes.Contains(item.RowIndex))
                    {
                        item.Expanded = false;
                    }
                }
            }
        }
More information regarding this can be obtained at the Telerik site: http://www.telerik.com/community/forums/aspnet/grid/radgrid-group-expand-collapse-state-is-lost.aspx
Enhanced by Zemanta

6 comments

Skip to comment form

    • Guy on August 29, 2012 at 1:08 am
    • Reply

    Thanks!
    Solved my problem…

    Guy.

  1. your code is a mess!!!

    1. How so? I don’t think it’s great but I don’t think it is messy either. Thanks!

  2. Is there an other option besides a for each loop. My grid has many records and doing a for each loop would be too time consuming

  3. Any other option other than than the for each loop as I have many records in the radgrid

    1. Sorry for the late response. I haven’t used this control in a while perhaps they have addressed this issue in a new version. I could think of 3 alternatives although I am not sure how viable/helpful they would be:
      1) Perform the binding operation on the client side instead of the server side
      2) Use entity framework or other sort of query to just return the index of the collapsed items
      3) If there is a way to identify only what items have been collapsed track that in session rather than go through the entire array/list to re-record them. The restore operation seems fine, I’m guessing it is not as time consuming as storing the state.

      Finally, I could suggest you control the amount of data you show on screen. Oh wait, I just realized something. This code goes through your columns not rows. In that case the code should not take too long unless you have a super wide (guessing long means rows and wide columns) table which is doubtful. If the code on your screen is slow it could be because you are sending again the information in the grid from the server to the client. In theory the time it takes to load your screen the first time should be no more than the time it takes after you do a post back. This is because if you store the information in session you save the time from querying the db and if you perform the collapsing client side that should be even faster I would assume. I hope this helped and good luck!

Leave a Reply

%d bloggers like this: