How to bind BootstrapChart to filtered or sorted ASPxGridView data at runtime

This example demonstrates how to show filtered or sorted ASPxGridView data in BootstrapChart on a callback at runtime.

In page markup, enable ASPxGridView’s ShowFilterRow property to show FilterRow in it. Handle the DataBound event on the first page loadg to bind BootstrapChart data to ASPxGridView data.
Use the VisibleRowCount property to determine what ASPxGridView data is not filtered.

Then, handle ASPxGridView's AfterPerformCallback event to bind BootstrapChart data to ASPxGridView on the server side after a callback. In this event handler, check the e.CallbackName property to determine the sorting ("APPLYCOLUMNFILTER") or filtering ("SORT") callback command. Convert BootstrapChart data into the JSON format using the JavaScriptSerializer.Serialize function. Set the obtained JSON data string as ASPxGridView JSProperties to transfer data from the server to the client.

Handle ASPxGridView's client-side EndCallback event for client-side data binding on a callback initiated by data filtering or sorting. Call the JSON.parse function to obtain transferred ASPxGridView data as a JavaScript object.

To set BootstrapChart's data source on the client side, use BootstrapChart’s private BootstrapClientChart.SetDataSource method.