Colour a row of a datagrid

[David]

Hi All,

 

 I have a data grid that is bound via itemSource my quesiton is the following how does one  color a row based on a column value I would need in this example if TotalQty is less than Quantity to have it an amber color then green once they are equal. Also how does one change the font colour as well.

 

01.<telerikGrid:RadDataGrid x:Name="gridItemsBoms"   IsVisible="False" SelectionMode="Single"  SelectionChanged="GridItems_SelectionChanged"   AutoGenerateColumns="False" >
02.    <telerikGrid:RadDataGrid.Columns>
03.        <telerikGrid:DataGridTextColumn PropertyName="SequenceNumber"  HeaderText="Sequence" />
04.        <telerikGrid:DataGridTextColumn PropertyName="TotalQty" HeaderText="Pick Qauntity" />
05.
06.        <telerikGrid:DataGridTextColumn PropertyName="Quantity" HeaderText="Quantity" />
07.         <telerikGrid:DataGridTextColumn PropertyName="Description" HeaderText="Name"  />
08.        <telerikGrid:DataGridTextColumn PropertyName="UnitOfMeasure"  HeaderText="UnitOfMeasure" />
09.
10.
11.    </telerikGrid:RadDataGrid.Columns>
12.</telerikGrid:RadDataGrid>

[Lance | Manager Technical Support]

Hi David,

You can use a DataGrid Style Selector to accomplish this. In that documentation, you'll find an example class named MyCellContentStyleSelector. It's this class that picks a particular template for the cell based on a value of the bound data object for that row.

From what you described your scenario to be, the logic would look something like this:

DataGridCellInfo cellInfo = item as DataGridCellInfo;

if (cellInfo != null)
{
    var bom = cellInfo.Item as MyDataModel;

    if (bom.TotalQty == bom.Quantity)
    {
        return MyGreenTemplate;
    }
    else
    {
        return MyAmberTemplate;
    }
}

One thing to keep in mind is that you'll want to think about this as cell styling, not row styling. So if you want the entire row's cells to use that same coloring, you can assign that same Style Selector for each column.

Side Note: If you expect the values to change in real time after they've been rendered (e.g. through property changed notifications), then you'll want to use an IValueConverter or Xamarin DataTrigger in the CellTemplate instead of a Style Selector.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik

[David]

Hi it was just a case of wanting to style the row not just the cell or does the data grid treat a row as a cell in terms of terminolgy.

[Lance | Manager Technical Support]

Hi David,

The only row-specific styling is the RowBackground and AlternateRowBackground. For everything else, it's a cell-based approach (especially if you need access to the row's data item).

In the end, this doesn't change what you want to do. Just use the same style selector for each of your columns. For example, it would look like this:

<telerikGrid:RadDataGrid x:Name="gridItemsBoms" IsVisible="False" SelectionMode="Single" SelectionChanged="GridItems_SelectionChanged"   AutoGenerateColumns="False" >
    <telerikGrid:RadDataGrid.Columns>
        <telerikGrid:DataGridTextColumn CellContentStyleSelector="{StaticResource MyAmberGreenSelector} PropertyName="SequenceNumber" HeaderText="Sequence" />
        <telerikGrid:DataGridTextColumn CellContentStyleSelector="{StaticResource MyAmberGreenSelector} PropertyName="TotalQty" HeaderText="Pick Qauntity" />
        <telerikGrid:DataGridTextColumn CellContentStyleSelector="{StaticResource MyAmberGreenSelector} PropertyName="Quantity" HeaderText="Quantity" />
         <telerikGrid:DataGridTextColumn CellContentStyleSelector="{StaticResource MyAmberGreenSelector} PropertyName="Description" HeaderText="Name"  />
        <telerikGrid:DataGridTextColumn CellContentStyleSelector="{StaticResource MyAmberGreenSelector} PropertyName="UnitOfMeasure"  HeaderText="UnitOfMeasure" />
    </telerikGrid:RadDataGrid.Columns>
</telerikGrid:RadDataGrid>

I hope this clears things up.

Regards,
Lance | Technical Support Engineer, Principal
Progress Telerik