Telerik Product and Version
|
Any version that includes RadGrid's GroupLoadMode="Client" functionality
|
Supported Browsers and Platforms
|
All modern browsers
|
Components/Widgets used (JS frameworks, etc.)
|
JQuery (Basic use only)
Written using TypeScript, which can be compiled to JS here
|
PROJECT DESCRIPTION
Finally: Preserve any RadGrid's group expand/collapse state automatically and entirely on the client, regardless of refresh method. Supports AJAX refresh (server-side Rebind/DataBind), ClientDataSource, or any other client-side data binding method.
Core Functionality
Pass Grid Client ID to constructor. You can then manually call methods to save/restore group state 100% on the client (when RadGrid.GroupLoadMode = Client).
- Call SaveGrouping method on AJAX Request Start/before Client Data Source refresh.
- Call RestoreGrouping method on AJAX Response End or after Client Data Source refresh.
Parameters
- saveGridScrollPosition
* Default = True
* This will save/restore the grid-specific scrolling position (scrollTop only) along with the group state.
* Works when ClientSettings.Scrolling.AllowScroll = True
- groupByExpression_SecondColumnDisplayName
* If you use a standardized expression in the GroupByExpression for all columns (second column summary is always the same for all groupable columns), then enter the second column's display name so the group preservation will work even if the secondary summary data changes.
* If you examine this code, you will see that minor adjustments could allow checking multiple second-column values (pass column names as Array<string>.
- clientDataSource_AddEventHandlers
* Default = False
* Automatically save group state when using a Client Data Source.
* Refinement suggestion: only save/restore for specific grid actions.
- ajaxRefresh_AddEventHandlers
* Default = False
* Automatically save group state when using AJAX.
* Refinement suggestion: only save/restore if a specific grid is refreshed.
Implementation Example
Add this code to a method that runs after your application has fully loaded--it should be executed only once after the page loads (if you're using AJAX, make sure it does not run after an AJAX postback response ends). Remember, you can convert all TypeScript to JavaScript at the
TS playground.
Extender Initialization (TypeScript)
var
Grid_GroupStatePreservation: ClApps_Common.Extenders.Telerik.RadGrid.GroupStatePreservation.Core;
function
ApplicationLoaded(): void {
var
GroupStatePreservation_Options =
new
ClApps_Common.Extenders.Telerik.RadGrid.GroupStatePreservation.Options(
"** Grid Client ID, e.g. <%= Grid1.ClientID %> **"
);
GroupStatePreservation_Options.groupByExpression_SecondColumnDisplayName =
"Tickets"
;
Grid_GroupStatePreservation =
new
ClApps_Common.Extenders.Telerik.RadGrid.GroupStatePreservation.Core(GroupStatePreservation_Options);
}
Preserve Group Expand State Manually
You should Save and Restore groups when appropriate for your application. For AJAX-refreshed grids, you'd want to save On Request Start and restore On Response End. For client-side data sources, it might be best to save
on grid command, and then restore
on dataBound. Using the options specified above, you could specify that the extender should apply those basic event handlers automatically or add additional automated event handlers to the extender to suit your needs.
Here's an example to manually call the methods to save/restore group expand state:
function
RadAjaxManager1_requestStart(sender, eventArgs): void {
Grid_GroupStatePreservation.SaveGrouping();
}
function
RadAjaxManager1_responseEnd(sender, eventArgs): void {
Grid_GroupStatePreservation.RestoreGrouping();
}
Please let me know if you have any questions or suggestions.