Coloring Cells when there is a difference between cells

[Scott Manning]

In the project that I am working on, I need to highlight differences, so in col1 I am displaying the source data and in col2 I am showing the target data.  When the cell value in cell1 is not equal to cell2, then I need to color cell 2 to show that there is a difference.  In my small sample app, I am using CellLoaded event and the code below.  This kind of works but from time to time the wrong cells are highlighted.  Also the approach to handle this use case seems kind of brute force and I was wondering if there is a better way to handle this.

Below is a sample piece of code that I have been using in the test

private void RowDataGrid_CellLoaded(object sender, CellEventArgs e)
{
    GridViewCell tgtFld = e.Cell as GridViewCell;

    if (tgtFld != null)
    {
        if (e.Cell.Column.UniqueName.ToUpper().EndsWith("_T"))
        {
             string fieldName = e.Cell.Column.UniqueName.ToUpper().Replace("_T", "_S");
             foreach (var item in e.Cell.ParentRow.Cells)
             {
             if (item.Column.UniqueName.ToUpper() == fieldName)
                {
                if (((GridViewCell)item).Value != tgtFld.Value)
                   {
                       tgtFld.Background = new SolidColorBrush(Colors.Green);
                   }
                   break;
                }
        }
     }
   }
}

[Boris]

Hello Scott,

A possible way to go is to use a CellStyleSelector. For a more practical example you can check the CellStyleSelector sdk example. Although GitHub is a very well-known platform we saw a better and easier approach for reviewing our examples by developing our SDK Samples Browser.

I hope this helps.

Regards,
Boris
Telerik

 

 

[Scott Manning]

From looking at all of the code sample, it appears that this will work for a business object.  In my project, I have a delimited file that is read in and the number and type of columns will always be different, so I cannot do a business object.  I am reading the delimited data into a datatable and then binding the data table to the WPF grid.  When I display the data, I need to color the different cells.  Will the CellStyleSelector still work in this use case?

[Boris]

Hello Scott,

A possible way to go about this is to apply the CellStyleSelector to the columns in code behind by using the AutoGeneratingColumn event. It occurs each time new column is auto generated by the GridView control and thepassed event arguments are of type GridViewAutoGeneratingColumnEventArgs.
Lets say you have the ItemsSource property of RadGridView bound to a DataTable and have defined the style selector as a resource in the GridView Resource collection like so:

<telerik:RadGridView Name="clubsGrid"
                     ItemsSource="{Binding MyDataTable.DefaultView}"
                     Margin="5">
    <telerik:RadGridView.Resources>
        <my:DataTableStyleSelector x:Key="DataTableStyle">
           ...
        </my:DataTableStyleSelector>
    </telerik:RadGridView.Resources>
</telerik:RadGridView>

Then you can apply the StyleSelector to every column or to just some of them, based on some condition as follows:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        this.clubsGrid.AutoGeneratingColumn += clubsGrid_AutoGeneratingColumn;
    }

    void clubsGrid_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
    {
        e.Column.CellStyleSelector = clubsGrid.Resources["DataTableStyle"] as StyleSelector;
    }
}

Please keep in mind that you will need to handle the condition in your custom StyleSelector class:

public class DataTableStyleSelector : StyleSelector
    {
        public override Style SelectStyle(object item, DependencyObject container)
        {
            // Your condition
            if (item is DataRowView)
            {
                return BigStadiumStyle;
            }

            return null;
        }

        public Style BigStadiumStyle { get; set; }
        public Style SmallStadiumStyle { get; set; }
    }

I hope this helps.

Regards,
Boris
Telerik