1. Home
  2. Forum
  3. WPF
  4. SfDataGrid add cell style binding to each GridCell

SfDataGrid add cell style binding to each GridCell

I wanted to have a datagrid which the cell style is dynamic using multbinding with converter and the result of the converter is the style.

So everytime the data changes or other properties in the multbinding change, it will trigger a converter to generate a new cell style (include the setter for backgroundproperty, foregroundproperty etc..) And this have to be happens on each cell (each cell have different style)

I noticed that I can do the mutlbinding in Datagrid level, but that one is for the entire grid, and the binding to cell level changes is hard in this stage.

Also the cell style for each column does not allow binding. 

I also checked the GridCell style property binding, but that is not the same thing as cell style.

I also check the page talking about the conditional styling (https://help.syncfusion.com/wpf/datagrid/conditional-styling)
but that does not have the solution for this case.

5 Replies 1 reply marked as answer
VS Vijayarasan Sivanandham Syncfusion Team August 6, 2020 04:14 PM UTC

Hi Will Liu,

Thank you for contacting Syncfusion support.

Based on provided information we have prepared the sample for achieve your requirement. 
We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 


WL Will Liu August 7, 2020 01:14 AM UTC

Thank you for your reply.

The solution is not really want I am looking for, what I am trying to do is based on some value changes I will update the style of the cell (backgroundproperty, foregroundproperty etc..)
From the example, I could only rely on the callback function "OnDataPropertyChanged" and this will only get triggered if the value of that cell is changed. Let say I got one row, then I want the cell in column A listen to the value changes in column B. And this kind of use case is not really support in this example.

It will be ideal if I can use multbinding to the cell style directly.

VS Vijayarasan Sivanandham Syncfusion Team August 8, 2020 08:23 AM UTC

Hi Will Liu,

Your requirement can be achieved by using Converters or Style.Triggers. Please refer the below code snippet,

Using Triggers:  
  
<local:CellStyleConverter x:Key="cellStyleConverter"/>  
  
<syncfusion:GridTextColumn MappingName="Symbol" HeaderText="Column A" TextAlignment="Left" >  
    <syncfusion:GridTextColumn.CellStyle>  
          <Style TargetType="syncfusion:GridCell">  
              <!--Below code is for applying style using Triggers-->  
              <Style.Triggers>  
                  <DataTrigger Binding="{Binding Path=Change,   
                               Converter={StaticResource cellStyleConverter}}"   
                               Value="True" >  
                        <Setter Property="FontWeight" Value="Bold"/>  
                        <Setter Property="Foreground" Value="Blue"/>  
                        <Setter Property="Background" Value="Yellow"/>  
                  </DataTrigger>  
              </Style.Triggers>  
          </Style>  
     </syncfusion:GridTextColumn.CellStyle>  
</syncfusion:GridTextColumn>  
<syncfusion:GridTextColumn  MappingName="Change" TextAlignment="Center" HeaderText="Column B" /> 
 
public class CellStyleConverter : IValueConverter  
{  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            var changeValue = double.Parse(value.ToString()) >= 0;  
            return changeValue;  
        }  
  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
}  
 
Using Converters:  
  
public class FontStyleConverter : IValueConverter  
    {  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            if (double.Parse(value.ToString()) >= 0)  
                return FontWeights.Bold;  
            return FontWeights.Normal;  
        }  
  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
    }  
  
    public class ForegroundConverter : IValueConverter  
    {  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            if (double.Parse(value.ToString()) >= 0)  
                return new SolidColorBrush(Colors.Blue);  
            return new SolidColorBrush(Colors.Black);  
        }  
  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
    }  
  
    public class BackgroundConverter : IValueConverter  
    {  
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            if (double.Parse(value.ToString()) >= 0)  
                return new SolidColorBrush(Colors.Yellow);  
            return new SolidColorBrush(Colors.Transparent);  
        }  
  
        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
        {  
            throw new NotImplementedException();  
        }  
    }  
  
<syncfusion:GridTextColumn MappingName="Symbol"  HeaderText="Column A"  TextAlignment="Left" >  
   <syncfusion:GridTextColumn.CellStyle>  
        <Style TargetType="syncfusion:GridCell">  
             <!--Below code is for applying style using converters-->  
             <Setter Property="FontWeight" Value="{Binding Change,   
                     Converter={StaticResource fontStyleConverter}}" />  
             <Setter Property="Foreground" Value="{Binding Change,   
                     Converter={StaticResource foreGroundConverter}}" />  
             <Setter Property="Background" Value="{Binding Change,   
                     Converter={StaticResource backGroundConverter}}" />  
        </Style>  
    </syncfusion:GridTextColumn.CellStyle>  
</syncfusion:GridTextColumn>  
<syncfusion:GridTextColumn  MappingName="Change" TextAlignment="Center" HeaderText="Column B" /> 
  
We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 


Marked as answer
WL Will Liu August 11, 2020 02:50 AM UTC

I already read these two solution before, the second one seems to work for me. But I dont want to duplicate the logic to calculate the condtion more than what I need to (from your sample it will be "double.Parse(value.ToString()) >= 0")

And the first solution wont work for my case, I want to have dynamic result of the style, the first solution have to define all the setter in advance which I cant change later.

That's why I am asking for is there a way to use converter for cell style, than what I can do is to return the sytle in converter instead of each property one by one.

It will be somthing like this. than I dont have to duplicate the logic.

        public class CellStyleConverter : IValueConverter
        {
            public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
            {
                if (double.Parse(value.ToString()) >= 0)
                    return someStyle (with setters);
                return otherStyle(with other set of setters);
            }

            public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
            {
                throw new NotImplementedException();
            }
        }

VS Vijayarasan Sivanandham Syncfusion Team August 11, 2020 04:11 PM UTC

Hi Will Liu,

Thanks for the update.

Based on provided information we have prepared the sample for achieve your requirement. 
We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S 


Loader.
Up arrow icon