1. Home
  2. Forum
  3. WPF
  4. Need to change background color of row in griddatacontrol based on value of data column

Need to change background color of row in griddatacontrol based on value of data column

I have succeeded in getting this to work using QueryCellInfo as shown below, but it seems slow. I imagine there must be a way to do it at the row-level rather then the cell level. I tried using DataTriggers and Styles in xaml, but couldn't get it to work. Hope you can show me how.

Right now, I am doing:

 

 runDataGrid.Model.QueryCellInfo += new GridQueryCellInfoEventHandler(gridControlModel_QueryCellInfo);


 void gridControlModel_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e)
        {
            try
            {
                 UpdateCellBackground(e.Cell, e.Style);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.ToString());
            }
        }

      private void UpdateCellBackground(RowColumnIndex cellIndex, GridStyleInfo style)
        {
            int rowIndex = cellIndex.RowIndex;
      

            if (rowIndex >= 2)
            {
                var item = runDataGrid.Model.View.Records[rowIndex - 2];
                ProcessRun run = (ProcessRun)item.Data;
                if (run.EventType == "comment")
                    style.Background = Brushes.Gainsboro;
            }

        }




7 Replies
SJ Sathiyathanam Jeyakumar Syncfusion Team June 8, 2018 01:21 PM UTC

Hi Steve, 
 
Thank you for contacting syncfusion support. 
 
We have analyzed your query and prepare the sample based on the provided code snippets. 
 
Code snippets C#. 
 
private void Window_Loaded(object sender, RoutedEventArgs e) 
        { 
            grid.AllowSelection = GridSelectionFlags.Table | GridSelectionFlags.Row | GridSelectionFlags.Column | GridSelectionFlags.Cell; 
            grid.CopyPasteOption = CopyPaste.CopyText | CopyPaste.PasteText; 
            this.grid.Model.QueryCellInfo += Model_QueryCellInfo; 
        } 
 
private void Model_QueryCellInfo(object sender, GridQueryCellInfoEventArgs e) 
{ 
            try 
            { 
                UpdateCellBackground(e.Cell, e.Style); 
            } 
            catch (Exception ex) 
            { 
                Console.WriteLine(ex.ToString()); 
            } 
} 
 private void UpdateCellBackground(RowColumnIndex rowColumnIndex, GridStyleInfo style) 
 { 
            int rowIndex = rowColumnIndex.RowIndex; 
 
 
            if (rowIndex >= 2) 
            { 
                var item = grid.Model.View.Records[rowIndex - 2]; 
                if(item != null) 
                { 
                    var zipCodes = item.Data as ZipCodeInfo; 
                    if(zipCodes.City.Equals("MAYAGUEZ")) 
                    { 
                        style.Background = Brushes.Aqua; 
                    } 
                } 
 
            } 
 
} 
 
 
Please find the sample from the below location. 
 
 
Additional information:  
  
GridControl extension GridDataControl marked as classic since cell-oriented architecture not able to meet certain binding and extensibility requirement of WPF. So, we developed SfDataGrid as alternate for GridDataControl and and marked it as classic. And GridDataControl does not support the Data-Virtualization. 
Regarding performance:  
If you are looking for best performance with more number of cells and real-time updates, I would suggest you use SfDataGrid. Since we added more features to meet performance requirement for various scenarios. Please refer the below links,  
Refer below article which has sample,  
 
SfDataGrid overview. 
 
Styles and Templates 
 
KB for Styles and Templates 
 
  
Regards,
Sathiyathanam  


SM Steve McWilliams July 13, 2018 03:10 PM UTC

The updating of the row background is working well now, except I noticed that when I use the filter bar, the filtering is very slow.
It takes a long time to respond after entering or deleting each character of the filter string.
I think it must be because the filtering is changing the row indexes, so the QueryCellInfo code is getting invoked too often.

Is there a way to maybe know I am in "filtering mode", so I can skip the row update code in that case ?

You can reproduce the issue by adding these parameters to the grid in MainWindow.xaml in the ObservableCollectionDemo you sent in this thread.

  ShowFilters="True" ShowFilterBar="True"

JG Jai Ganesh S Syncfusion Team July 16, 2018 10:36 AM UTC

Hi Steve,  
 
We have analyzed your query. If we do filtering in filter row ,all row index getting updated in QueryCellInfo event. Hence the delay occurred. However, you can achieve the same requirement (change the row background based on cell value) in xaml by using conditional formatting like below, 
 
<syncfusion:GridDataControl.ConditionalFormats> 
 
            <syncfusion:GridDataConditionalFormat Name="C1"> 
 
                <syncfusion:GridDataConditionalFormat.Style> 
 
                    <syncfusion:GridDataStyleInfo Background="Aqua" /> 
 
                </syncfusion:GridDataConditionalFormat.Style> 
 
                <syncfusion:GridDataConditionalFormat.Conditions> 
 
                    <syncfusion:GridDataCondition ColumnName="City"  Value="MAYAGUEZ" /> 
 
                </syncfusion:GridDataConditionalFormat.Conditions> 
 
            </syncfusion:GridDataConditionalFormat> 
        </syncfusion:GridDataControl.ConditionalFormats> 
 
We have changed the sample based on this and please find the sample from the below location, 
 
 
UG Link: 
 
KB link: 
 
Regards, 
Jai Ganesh S 
 


SM Steve McWilliams July 16, 2018 07:15 PM UTC

Thanks. I set properties on my items to handle some more complex conditions and based my conditional formats on those properties, but made them hidden columns.
That seems to work well, and the filtering is fast again.

One more question. Is there  a way to base the XAML conditional format on a checkbox or something like that, rather than just on Columns?
I'd like my formatting to be based, for example, on whether a checkbox is checked or not.
I think I can make it work by changing the property values on all the items in my grid, but I want to make sure there's not a better way.

SJ Sathiyathanam Jeyakumar Syncfusion Team July 18, 2018 05:34 PM UTC

Hi Steve, 
We have analyzed your query and you can apply the conditional format based on the checkbox checked and unchecked by using the below code snippets. 
 
private void SetConditionalFormats(CheckBox checkbox) 
{ 
       if (checkbox != null) 
       { 
           if (checkbox.IsChecked == true) 
           { 
                GridDataCondition condition = new GridDataCondition() { ColumnName = "City", Value = "MAYAGUEZ" }; 
                 var conditionalFormat = new GridDataConditionalFormat() 
                 { 
                     Conditions = new FreezableCollection<GridDataCondition>(), 
                     Style = new GridDataStyleInfo { Background = Brushes.Aqua } 
                 }; 
                 conditionalFormat.Conditions.Add(condition); 
                 this.grid.ConditionalFormats.Add(conditionalFormat); 
                 this.grid.Model.View.Refresh(); 
           } 
           else 
           { 
                if (this.grid.ConditionalFormats != null && this.grid.ConditionalFormats.Count > 0) 
                { 
                     this.grid.ConditionalFormats.Clear(); 
                     this.grid.Model.View.Refresh(); 
                } 
           } 
            } 
        } 
 
private void checkBox_Click(object sender, RoutedEventArgs e) 
{ 
     var checkbox = sender as CheckBox; 
     SetConditionalFormats(checkBox); 
} 
 
 
 
You can download the modified sample from the below location. 
 
 
Regards, 
Sathiyathanam 


SM Steve McWilliams July 18, 2018 09:16 PM UTC

Thanks. That works better than what I was going to try to do.

SJ Sathiyathanam Jeyakumar Syncfusion Team July 19, 2018 04:33 AM UTC

Hi Steve, 
Thank you for your update. 
We are happy to hear that you have achieved your requirement with the given details. Please let us know if you need any further assistance on this. 
Regards, 
Sathiyathanam. 


Loader.
Up arrow icon