This is a migrated thread and some comments may be shown as answers.
Colour a row of a datagrid
3 Answers 30 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 17 Jun 2019, 07:43 AM

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>

3 Answers, 1 is accepted

Sort by
0
Lance | Manager Technical Support
Telerik team
answered on 17 Jun 2019, 12:02 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
David
Top achievements
Rank 1
answered on 18 Jun 2019, 10:38 AM
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.
0
Lance | Manager Technical Support
Telerik team
answered on 18 Jun 2019, 02:30 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
David
Top achievements
Rank 1
Answers by
Lance | Manager Technical Support
Telerik team
David
Top achievements
Rank 1
Share this question
or