How to: Display Real-Time Data

• Dec 17, 2020
• 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.

ASPX

<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>

JS

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

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.

JS

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);
}

ASPX

<dx:ASPxGridView ID="grid" runat="server" DataSourceID="ObjectDataSource1"
    Width="100%" AutoGenerateColumns="False">
    <ClientSideEvents Init="grid_Init" BeginCallback="grid_BeginCallback" EndCallback="grid_EndCallback" />
    <Columns>
    ...
        <dx:GridViewDataTextColumn Caption="Change" FieldName="Change" Width="120px">
            <DataItemTemplate>
                <dx:ASPxImage runat="server" ID="icon" ImageUrl="<%# GetIconImageUrl(Container) %>" style="margin: 2px 4px;" Width="10" Height="10" />
                <%# GetPercentageText(Container) %>                    
            </DataItemTemplate>
        </dx:GridViewDataTextColumn>
    ...
    </Columns>  
</dx:ASPxGridView>

C#

protected string GetIconImageUrl(GridViewDataItemTemplateContainer container) {
    Quote quote = (Quote)grid.GetRow(container.VisibleIndex);
    return String.Format("Images/{0}.gif", quote.Change >= 0 ? "Up" : "Down");
}
protected string GetPercentageText(GridViewDataItemTemplateContainer container) {
    Quote quote = (Quote)grid.GetRow(container.VisibleIndex);
    return HttpUtility.HtmlEncode(quote.Change.ToString("P"));
}

VB.NET

Class SurroundingClass
    Protected Function GetIconImageUrl(ByVal container As GridViewDataItemTemplateContainer) As String
        Dim quote As Quote = CType(grid.GetRow(container.VisibleIndex), Quote)
        Return String.Format("Images/{0}.gif", If(quote.Change >= 0, "Up", "Down"))
    End Function

    Protected Function GetPercentageText(ByVal container As GridViewDataItemTemplateContainer) As String
        Dim quote As Quote = CType(grid.GetRow(container.VisibleIndex), Quote)
        Return HttpUtility.HtmlEncode(quote.Change.ToString("P"))
    End Function
End Class

Online Demo

GridView - Live Data