Skip to main content

How to: Display Real-Time Data

  • 2 minutes to read

This tutorial illustrates how to use the ASPxGridView control to display data that is updated at regular intervals.

Handle the ASPxClientGridView’s Init event to call the ASPxClientGridView.Refresh method every two seconds.

<dx:ASPxGridView ID="grid" runat="server" DataSourceID="ObjectDataSource1"
    Width="100%" AutoGenerateColumns="False">
    <ClientSideEvents Init="grid_Init" BeginCallback="grid_BeginCallback" EndCallback="grid_EndCallback" />
    <Columns>
    ...
    </Columns>
</dx:ASPxGridView>

The ASPxClientGridView.Refresh method sends a callback to the server and re-binds the grid (GridViewDataColumn.DataItemTemplate). This initiates the ASPxClientGridView.BeginCallback and ASPxClientGridView.EndCallback client events.

var timeout;
function scheduleGridUpdate(grid) {
    window.clearTimeout(timeout);
    timeout = window.setTimeout(function() { grid.Refresh(); },2000);
}
function grid_BeginCallback(s, e) {
    window.clearTimeout(timeout);
}
function grid_EndCallback(s, e) {
    scheduleGridUpdate(s);
}

Online Demo

GridView - Live Data