Group State Preservation (Common)
Simple initialization to get group expand/collapse state preservation entirely on the client. Works regardless of the grid refresh method, and groups are properly preserved even as the grid data or page number changes because the group name is tracked without depending on row indices or other constantly-changing data/intersections.
This extension makes significant improvements to Telerik's group state preservation example and enhances RadGrid, for which nothing else available even comes close to the Kendo UI example:
- Written in TypeScript to reduce implementation and coding errors.
- 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.
- Core functionality that works with both Kendo UI Grid and ASP.Net Grid, thus reducing ongoing maintenance for those who use both control sets.
- Grid position is saved and associated with specific page numbers, scroll position is adjusted automatically and intuitively, and scrolling is animated.
- JQuery
- Supports all modern browsers, plus IE 9 or above (unless you add code to support Array.indexOf, which will enable support for all browsers).
This has been tested with over 500 groups (1000 records) on a single page, and the UX was not impacted thanks to the an asynchronous SaveGroupingAsync() processing method that runs whenever grouping changes are made, and a backup FinishSaveGroupingCheck() method in case the grid data is about to change before the Async method has finished.
For paged grids, the performance impact should be zero. Larger non-paged grids (well over 500 groups in a single page) will result in a noticeable delay, so you may want to test if that applies to your use cases. Such large grids should be rare, though, as it's generally inefficient and not very useful to show many rows on a single page. Also, since this algorithm maintains group state across page changes, paging is improved with this extension.
- Call SaveGroupingAsync method any time the grouping levels change to asynchronously save the data (rather than forcing user to wait just before the data is about to refresh).
- Call FinishSaveGroupingCheck method on AJAX Request Start or before Client Data Source refresh (will run the save routine synchronously only if appropriate).
- Call RestoreGrouping method on AJAX Response End or after Client Data Source refresh.
- To minimize memory use, you can call the ResetGrouping method at appropriate times. The extension automatically resets grouping when the group structure changes. Otherwise, group states are maintained in memory indefinitely.
- ToggleAllGroups allows you to manually toggle the group state, which overrides all previously-saved states.
By default, appropriate event handlers will be added automatically during initialization. Make sure you specify the required options during initialization.
- When data changes above the scroll position (e.g. rows/groups added/removed), the grid rows jump and may confuse the user. One possible way to fix that would be to restore the scroll position according to the group that's at the top of the grid element when saving the group state.