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#

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

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>