Search code examples
asp.nethtmlkendo-gridtelerik-grid

Telerik Kendo and ASP.Net Grids: Preserve Group Expand/Collapse state on client

By default, the Telerik RadGrid (UI for ASP.NET AJAX) and Kendo UI grid controls reset all group expand/collapse state when the grid is refreshed. The Kendo grid doesn't even allow specifying the default expand/collapse state. All solutions I've found thus far are either incomplete or buggy.

Here's what I'm seeking that's not entirely available in the various telerik and community examples on the web:

  • Written in TypeScript to reduce implementation and coding errors.
  • Maintains state after grid data refresh (client data source or AJAX, sorting, etc.).
  • Maintains state even when sub-groups have identical names/values across multiple parent groups (tracks the full path to the group, not just the group name by itself).
  • Automatically tracks both Expanded and Collapsed state (your grid can be either collapsed or expanded by default) and clears saved grouped data when appropriate to reduce memory usage.
  • Saves state of all groups when state changes are detected, thereby covering scenarios where multiple groups might be expanded/collapsed after a single click event (e.g. expand/collapse parents and/or children simultaneously).
  • Includes intelligent functionality to specify the default toggle state (on startup/first group applied), which allows expanding/collapsing all rows without overriding previous user states (or expand/collapse on first load).
  • Includes ToggleAllGroups method.
  • Asynchronous group state saving to ensure the UX is not negatively impacted.
  • Grid position is saved and associated with specific page numbers, scroll position is adjusted automatically and intuitively, and scrolling is animated.
  • Core functionality that works with both Kendo UI Grid and ASP.Net Grid, thus reducing ongoing maintenance for those who use both control sets.
Solution

  • I've spent some time on this issue and developed a set of extender modules that work very well with many grid scenarios. This solution works for both AJAX postback refresh and client data refresh, and it works with Kendo UI Grid (see the examples and code for details).

    The extender class basically loops through the Grid's DOM (utilizing the available Telerik client APIs where possible) and saves the "full path group keys" in arrays. Because it's using full paths to save/restore the state, it will work even when the data changes and when there are duplicate sub-group headers across multiple parents. There's no dependency on tracking the ever-changing row index values on the server. This is 100% client-side functionality for Kendo UI, and mostly client-side functionality for ASP.Net RadGrid (some data needs to be added to RadGrid group header elements on pre-render because its client-side API is missing some critical methods/data).

    I won't post the code here because the extender is quite lengthy, but it is designed to expose only 5 methods. It should work with most RadGrid and Kendo Grid scenarios. To get the latest source code, go to this GitHub repository. The extender is very well organized, so you should be able to figure it out and tweak with ease to meet your particular needs.