This is a migrated thread and some comments may be shown as answers.

Cache grid pages client-side

3 Answers 52 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Veteran
Jesse asked on 16 Mar 2021, 10:01 PM

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
)

3 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 19 Mar 2021, 11:28 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jesse
Top achievements
Rank 1
Veteran
answered on 19 Mar 2021, 07:39 PM
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.
0
Georgi
Telerik team
answered on 24 Mar 2021, 01:17 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Jesse
Top achievements
Rank 1
Veteran
Answers by
Georgi
Telerik team
Jesse
Top achievements
Rank 1
Veteran
Share this question
or