Important Notes

• Please be sure to review Group State Preservation (Common).
• RenderMode: This extension is designed to work with RenderMode="Lightweight". If you want it to work with RenderMode="Classic", set the static Core.groupHeaderCellToggleElementName = "INPUT". Telerik is preparing to stop supporting the Classic render mode, so it should not be used except for legacy projects that will not be updated.

Additional Dependencies

• Telerik.Web.UI.dll (if you're not already using Telerik controls, you can download a free trial, install, and then "convert" the project to a Telerik Web Application).
• NuGet, Optional: TypeLite (not necessary, but very useful for generating TypeScript declarations from POCOs).
• NuGet, Optional: JSON.Net (again, not necessary, but makes it easier to send JSON to browser along with markup).

AJAX Setup (track page changes)

In order to trigger an AJAX request on page changes (so group state can be saved/restored automatically within the extension), you must add an AjaxSetting with the RadGrid as the control and itself as an updated control like this:

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
	<AjaxSettings>
		<telerik:AjaxSetting AjaxControlID="RadGrid1">
			<UpdatedControls>
				<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
			</UpdatedControls>
		</telerik:AjaxSetting>
	</AjaxSettings>
</telerik:RadAjaxManager>

That requirement does not apply when using client-side data.

Initialization

Just set RadGrid.GroupLoadMode = Client, and then pass a grid's Client ID to the constructor. You can then allow the extension to automatically save the state, or you can disable the default event handlers (by setting Options.addEventHandlers = false) and manually call methods to save/restore group state. See the grid-specific extension code to see what events are currently monitored and get ideas of how to integrate the extension into your grid if the default handlers are not suitable. See the Group State Preservation (Common) page for more initialization details.

Extension Options

gridClientID: string (Required)

• Simply specify the client ID of your RadGrid, which you can get on an ASPX/ASCX control markup using something like this: "<%= gridName.ClientID %>"

public RefreshMode: RefreshModes (Required)

• Specifies how the grid is refreshed (client data source, AJAX, etc.).

Current RefreshMode Options

ClApps_Common.Extenders.TelerikCustom.RadGrid.GroupStatePreservation.RefreshModes.ClientDataSource

Automatically save group state when using a Client Data Source.

ClApps_Common.Extenders.TelerikCustom.RadGrid.GroupStatePreservation.RefreshModes.AJAX

Automatically save group state when using AJAX.

saveGridScrollPosition: boolean = false

• Automatically maintain scroll position when grid.ClientSettings.Scrolling.AllowScroll = true
• Note: Telerik's built-in ClientSettings.Scrolling.SaveScrollPosition feature does not work in advanced scenarios (such as dynamic grid height), so this is a great alternative.

gridContainerSelector: string = null

• Must set saveGridScrollPosition = true to enable this option.
• Allows you to specify the grid container JQuery selector. Specify only if grid.ClientSettings.Scrolling.AllowScroll = false.