Cache grid pages client-side

[Jesse]

I have a read-only grid with paging enabled. It is retrieving the pages via AJAX. Is it possible to configure the grid to only make a AJAX request once for each page and to cache it after that? For example, when the user selects page 2, it makes an AJAX request to retrieve the page 2 records. Then the user selects page 1 again. I don't need it to go back to the server to request these. If it becomes stale, the user can just refresh the whole page. It sounded like the dataSource.transport.cache could do this, but I can't find any way of accessing that via the fluent DataSourceBuilder and it has next to no documentation. I tried setting ServerOperation to false thinking that might control caching, but that just prevented the paging params from being sent with the AJAX request. Can the Grid do this? Here is how my Grid is declared:

@(Html.Kendo().Grid<BatchHistoryVM>()
    .Name("grd-batch-history")
    .Columns(columns =>
    {
        columns.Bound(c => c.BatchNumber).Title("Batch #").HeaderHtmlAttributes(textCenterAttr);
        columns.Bound(c => c.BatchDate).Title("Batch Date").HeaderHtmlAttributes(textCenterAttr).HtmlAttributes(textCenterAttr).Format("{0:d}");
        columns.Bound(c => c.BatchAmount).Title("Batch Amount").HeaderHtmlAttributes(textCenterAttr).HtmlAttributes(textCenterAttr).Format("{0:c}");
        columns.Bound(c => c.SettledBy).Title("Settled By").HeaderHtmlAttributes(textCenterAttr).HtmlAttributes(textCenterAttr);
    })
    .Pageable()
    .NoRecords("There is no batch history available")
    .Selectable(selectable =>
    {
        selectable.Mode(GridSelectionMode.Single);
        selectable.Type(GridSelectionType.Row);
    })
    .Pageable(c => c.AlwaysVisible(false).ButtonCount(5))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => { model.Id(bh => bh.BatchID); })
        .PageSize(2)
        .ServerOperation(true)  //Ask the server to do paging/sorting/filtering/grouping rather than doing it client-side on the already loaded data
        .Read(read => read.Action("BatchHistory_Read", "MPC"))
        .Events(events => events
            .Error("clm.MPC.batchHistoryGrid_onError")
        )
    )
    .Navigatable()
    .Deferred() //Wait for kendo script to load at the bottom of the page
)

[Georgi]

Hi Jesse,

You can enable the cache by switching to a Custom dataSource.

e.g.

    .DataSource(dataSource => dataSource
        .Custom()
        .Transport(t=> {
            t.Read(...);
            t.Cache(true);
        })

Another option you have is to create a service worker which caches the requests for the grid.

I hope this helps.

Regards,
Georgi
Progress Telerik

[Jesse]

Ah, Custom! That's what I was missing. It's been years since I've used that. That's a lot of work just to enable caching. Can it be enabled client-side when the page loads more easily? Thanks for pointing out the service worker option too.

[Georgi]

Hi Jesse,

You could create the cache instance right after the initialization of the grid on the client.

e.g.

grid.dataSource.transport.cache = kendo.data.Cache.create(true);

Please give it a try and let me know if it works for you.

Regards,
Georgi
Progress Telerik