New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Save Grid State Using the URL History Browser API

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I save the current Grid state by using the URL history browser API?

Solution

The solution relies on the following key steps:

Define the Grid and handle its DataBound event:

Razor

@model IEnumerable<Product>

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .DataSource(ds => ds
        .Ajax()
        .PageSize(5)
        .Model(m =>
        {
            m.Id(p => p.ProductID);
        })
        .Read(r => r.Action("Read", "Home"))
    )
    .Events(ev => ev.DataBound("onDataBound"))
    ...// Additional configuration.
)

Within the DataBound event handler, add a custom logic that appends the current state of the Grid, such as the current page, sorting, filtering, and page size, to the URL in the browser's address bar.

function onDataBound(e) {
    var grid = $('#Grid').data('kendoGrid');
    // Use the "parameterMap" to create the request object.
    var requestObject = (new kendo.data.transports["aspnetmvc-server"]({ prefix: "" }))
    .options.parameterMap({
        page: grid.dataSource.page(),
        sort: grid.dataSource.sort(),
        filter: grid.dataSource.filter()
    });

    // Construct the URL of the page.
    var href = '@(Url.Action("Index", "Home"))' + "?Grid-page=~&Grid-pageSize=~&Grid-filter=~&Grid-sort=~";

    // Update the 'page' parameter with the grid's current page.
    href = href.replace(/page=([^&]*)/, 'page=' + requestObject.page || '~');


    // Update the 'sort' parameter with the grid's current sort descriptor.
    href = href.replace(/sort=([^&]*)/, 'sort=' + requestObject.sort || '~');

    // Update the 'pageSize' parameter with the grid's current 'pageSize'.
    href = href.replace(/pageSize=([^&]*)/, 'pageSize=' + grid.dataSource._pageSize);

    // Update filter descriptor with the applied filters.
    href = href.replace(/filter=([^&]*)/, 'filter=' + (requestObject.filter || '~'));

    history.pushState({}, "URL Rewrite Example", href);
}

To review the complete example, refer to the project on how to save the current state of the Telerik UI Grid by using the URL history browser API in ASP.NET MVC applications.

Save Grid State Using the URL History Browser API

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also