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
JS

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>

javascript

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
ASPX
C#
VB.NET

javascript

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>

csharp

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

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