How to: Dynamically Change Images Displayed Within Data Cells

Oct 01, 2021

This example demonstrates how to dynamically change images displayed in the Change column’s cells.

For the full example, see the following demo: Grid - Live Data.

The image below shows the result:

C#
VB.NET
ASPX

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

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

aspx

<dx:ASPxGridView ID="grid" runat="server" DataSourceID="ObjectDataSource1" AutoGenerateColumns="False">
     <ClientSideEvents Init="grid_Init" BeginCallback="grid_BeginCallback" EndCallback="grid_EndCallback" />
     <Columns>
          <dx:GridViewDataTextColumn Caption="Symbol" FieldName="Symbol" />
          <dx:GridViewDataTextColumn Caption="Price" FieldName="Price" Width="120px">
                <PropertiesTextEdit DisplayFormatString="0.00" />
          </dx:GridViewDataTextColumn>
          <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>
          <dx:GridViewDataTextColumn Caption="Day Max" FieldName="DayMax" Width="120px">
                <PropertiesTextEdit DisplayFormatString="0.00" />
          </dx:GridViewDataTextColumn>
          <dx:GridViewDataTextColumn Caption="Day Min" FieldName="DayMin" Width="120px">
                <PropertiesTextEdit DisplayFormatString="0.00" />
          </dx:GridViewDataTextColumn>
          <dx:GridViewDataDateColumn Caption="Last Updated" FieldName="LastUpdated" Width="120px">
                <PropertiesDateEdit DisplayFormatString="HH:mm:ss" />
                <CellStyle HorizontalAlign="Right" />
          </dx:GridViewDataDateColumn>
     </Columns>
     ...
</dx:ASPxGridView>