1. Home
  2. Forum
  3. WPF
  4. Set style on sfdatagrid cells

Set style on sfdatagrid cells

I would need to be able to view the sfdatagrid data with the following features:
- Display the scroll bar on the right if the lines in the list were greater than the space
- the quantity ordered can be in the following two conditions:
- Equal to Zero
- Greater than zero if ordered products.

In the case of products ordered I would like to see the value of the quantity in Bold, with foreground Blue and Yellow Backcolor.

Do you have any examples?
thank you
Moreno

I enclose an example form

Attachment: 20180330_SfDatagrid_41f06d26.zip

3 Replies
SP Shobika Palani Syncfusion Team April 2, 2018 08:54 AM UTC

Hi Moreno, 

We have analyzed your query and please find answers in below table, 

Queries 
Answers 
Query 1 : 
Display ScrollBar on right if lines were greater than space. 
By default, SfDatagrid shows ScrollBar on right side, if the lines exceeds the available space. If you are facing any issue in this, Could you please share more details ? 
Query 2: 
the quantity ordered can be in the following two conditions:
- Equal to Zero
- Greater than zero if ordered products. 
To achieve this, you can use DataValidation to restrict quantity values to be not less than Zero.  
Please find more details about DataValidation in SfDataGrid in below link 
Query 3: 
In the case of products ordered I would like to see the value of the quantity in Bold, with foreground Blue and Yellow Backcolor. 
To achieve this, you can use GridColumn.CellStyleSelector. Please refer the below code snippet 

public class StockCellStyleSelector : StyleSelector 
{ 
    public override Style SelectStyle(object item, DependencyObject container) 
    { 
        var row = item as StockData; 
        if (row != null) 
        { 
            if (row.Change >= 0) 
               return App.Current.Resources["SymbolCellStyle"] as Style; 
        } 
        return base.SelectStyle(item, container); 
    } 
} 
 
<Style x:Key="SymbolCellStyle" TargetType="syncfusion:GridCell"> 
       <Setter Property="FontWeight" Value="Bold" /> 
       <Setter Property="Foreground" Value="Blue" /> 
       <Setter Property="Background" Value="Yellow" /> 
</Style> 
 
<local:StockCellStyleSelector x:Key="stockCellStyleSelector" /> 
 
<syncfusion:SfDataGrid x:Name="datagrid" ItemsSource="{Binding Stocks}" > 
     <syncfusion:GridTextColumn MappingName="Symbol"                                                  
                                CellStyleSelector="{StaticResource stockCellStyleSelector}"/> 
</syncfusion:SfDataGrid> 

Also please find the sample in below link, 

Also please find the below KB links for more details, 


Please let us know, if you  have any queries. 

Regards, 
Shobika 


AG aga November 12, 2018 09:43 AM UTC

Hello, I found your StyleSelector very useful in my project. However, my values are changing during run-time. Unfortunately, the style (colors) are not updated immediately, but after refresh. Is it possible to update style just after the value got changed?

Thank you in advance!
Agatha

DY Deivaselvan Y Syncfusion Team November 13, 2018 08:43 AM UTC

Hi Agatha,

Thank you for contacting Syncfusion support.

We have analyzed your query to change style for GridCells at runtime and you can achieve this using Converters or Style.Triggers as like below code snippets 

Using Triggers : 
 
<local:CellStyleConverter x:Key="cellStyleConverter"/> 
 
<syncfusion:GridTextColumn MappingName="Symbol" 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> 

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" 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> 
 
Please find the sample from the below link and let us know if this helps you. 

Regards,
Deivaselvan 


Loader.
Up arrow icon