Grid View for ASP.NET Web Forms - How to cache data on the client side

This example shows how to cache row values on the client side and access them without a callback to the server.

Implementation Details

The Grid View control does not store all row values on the client. Because of this, the client-side ASPxClientGridView.GetRowValues method sends callbacks to the server to load the values.

Use the steps below to cache the row values on the client:

1. Handle the ASPxGridView.CustomJSProperties event. Traverse the grid rows in this event handler and save the desired row values to e.Properties. This data is accessible on the client side:

protected void grid_CustomJSProperties(object sender, ASPxGridViewClientJSPropertiesEventArgs e) {
    int startIndex = grid.PageIndex * grid.SettingsPager.PageSize;
    int end = Math.Min(grid.VisibleRowCount, startIndex + grid.SettingsPager.PageSize);
    object[] titleId = new object[end - startIndex], titles = new object[end - startIndex];
    for (int n = startIndex; n < end; n++) {
        titleId[n - startIndex] = grid.GetRowValues(n, "title_id");
        titles[n - startIndex] = grid.GetRowValues(n, "title");
    }
    e.Properties["cpTitleId"] = titleId;
    e.Properties["cpTitles"] = titles;
}

2. Get the cached data as shown below:

function ProcessRow(index) {
    alert(
        "The row id is '" + grid.cpTitleId[index - grid.GetTopVisibleIndex()]
        + "', and title is " + grid.cpTitles[index - grid.GetTopVisibleIndex()]
    );
}

Files to Look At

• Default.aspx (VB: Default.aspx)
• Default.aspx.cs (VB: Default.aspx.vb)

Documentation

• Passing Values Between Client and Server Sides

More Examples

• Grid View for ASP.NET Web Forms - How to update total summaries on the client side in Batch Edit mode
• Grid View for ASP.NET Web Forms - Prevent the cell edit action on the client in batch edit mode
• Grid View for ASP.NET Web Forms - How to hide a grid column on the client