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.
