Colour a row of a datagrid

4 posts, 0 answers
  1. David
    David avatar
    77 posts
    Member since:
    Nov 2011

    Posted 17 Jun 2019 Link to this post

    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>
  2. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1189 posts

    Posted 17 Jun 2019 Link to this post

    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
  3. David
    David avatar
    77 posts
    Member since:
    Nov 2011

    Posted 18 Jun 2019 in reply to Lance | Manager Technical Support Link to this post

    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.
  4. Lance | Manager Technical Support
    Admin
    Lance | Manager Technical Support avatar
    1189 posts

    Posted 18 Jun 2019 Link to this post

    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
Back to Top