Telerik blogs

How To: Telerik RadGrid client-side caching with client-side binding to web services using LINQ to SQL

by Vladimir Enchev
September 19, 2008 Web 0 Comments


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;   
    }   
 
    tableView.set_dataSource(result);   
    tableView.dataBind();   
}  

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) {   
    args.set_cancel(true);   
 
    commandName = args.get_commandName();   
 
    var stateKey = getCacheKey(tableView);   
    if (cache[stateKey]) {   
        updateGrid(cache[stateKey]);   
        return;   
    }   
 
    WebService.GetData(tableView.get_currentPageIndex() * tableView.get_pageSize(), tableView.get_pageSize(),   
            tableView.get_sortExpressions().toString(), tableView.get_filterExpressions().toDynamicLinq(),   
                updateGrid);   
}  

 

The result:

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

Untitled

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

Untitled2

Enjoy!

[Download]

About the Author

Vladimir Enchev

is Director of Engineering, Native Mobile UI & Frameworks

Comments

Comments are disabled in preview mode.