Telerik blogs

My new example illustrates how to cache the grid data client-side based on the current grid state. To do this we need to build a state key using current page index, page size, sort expressions and filter expressions:

function getCacheKey(tableView) {  
    return String.format("{0}{1}{2}{3}",   
        tableView.get_currentPageIndex(), tableView.get_pageSize(),   
            tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq());   


Every time when we get new data we can store the result in our client-side cache:

function updateGrid(result) {   
    var stateKey = getCacheKey(tableView);   
    if (!cache[stateKey]) {   
        cache[stateKey] = result;   

and when the next grid command occur we can call explicitly updateGrid() method if we have already saved result for the current grid state:

function RadGrid1_Command(sender, args) {   
    commandName = args.get_commandName();   
    var stateKey = getCacheKey(tableView);   
    if (cache[stateKey]) {   
    WebService.GetData(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(),   
            tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),   


The result:

1. Click on next page button to get the second page - server is requested:


2. Click on previous page button to get the first page - server is not requested:




About the Author

Vladimir Enchev

is Director of Engineering, Native Mobile UI & Frameworks


Comments are disabled in preview mode.