How To: Telerik RadGrid client-side caching with client-side binding to web services using LINQ to SQL
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:
2. Click on previous page button to get the first page - server is not requested:
Enjoy!
[Download]
About the Author
Vladimir Enchev
Vladimir Enchev is Director of Engineering, Native Mobile UI & Frameworks
Comments
Comments are disabled in preview mode.