How to set conditional styles programatically?

[Joan Lopez]

Hi,

I'm working with the SfDataGrid and now I have to apply some conditional styles: https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles

I've been reading the documentation but I can't find how to do what I need:

• Define row style (for example bold font for all the cells) depending on a determined property of the model (also I want to hide the column corresponding to this property).
  For example you can think about having a model property "bold" which, if true, the cells of this row have to be in bold font. Otherwise not.
  And of course this property has not to be a column in the grid, only to determine the style of its cells.
  
  
• Define cell style depending on the value. This should be different for each column.
  For example in the row "growth", if the value is lower than 1, it should be printed in red, otherwise in green.
  Otherwise, the row "sales" has to be printed red if lower than 0 (instead of 1 as growth).
  And so on for the rows..
  
  
• Define the type of the cells (integer, double, percentage(?), etc) and the precision (number of decimals).

The last thing I have to point out is that I'm working in a programatically way, so I do not have any XML/XAML to define the grid/columns structure.

Is it posible this way? Or should I use the XML/XAML way?

Thanks a lot,

Joan

[Joan Lopez]

Hi,

I'm working with the SfDataGrid and now I have to apply some conditional styles: https://help.syncfusion.com/xamarin/sfdatagrid/conditional-styles

I've been reading the documentation but I can't find how to do what I need:

• Define row style (for example bold font for all the cells) depending on a determined property of the model (also I want to hide the column corresponding to this property).
  For example you can think about having a model property "bold" which, if true, the cells of this row have to be in bold font. Otherwise not.
  And of course this property has not to be a column in the grid, only to determine the style of its cells.
  
  
• Define cell style depending on the value. This should be different for each column.
  For example in the row "growth", if the value is lower than 1, it should be printed in red, otherwise in green.
  Otherwise, the row "sales" has to be printed red if lower than 0 (instead of 1 as growth).
  And so on for the rows..
  
  
• Define the type of the cells (integer, double, percentage(?), etc) and the precision (number of decimals).

The last thing I have to point out is that I'm working in a programatically way, so I do not have any XML/XAML to define the grid/columns structure.

Is it posible this way? Or should I use the XML/XAML way?

Thanks a lot,

Joan

Regarding the point two defined above, I wanted to say columns instead of rows.

I mean, the conditional styles could be different between column.

The column that contains the "growth" of each row, is which one knows if the value has to be printed in red or in green depending on its value.

The conditional style by row is defined in the first point.

Thanks!

[Ashok N]

Hi Joan, 

Thanks for contacting Syncfusion support. 

Query regarding TextSize as Bold: 

You can achieve your requirement by customizing GridCellTextViewRenderer. You have to set the GridColumn.LoadUIView as True while customize the  GridCellTextViewRenderer. Please refer the below code example for GridCellTextViewRenderer customization 

//Add customrenderer 

dataGrid.CellRenderers.Remove("TextView"); 

dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt()); 

 

public class GridCellTextViewRendererExt : GridCellTextViewRenderer 

{ 

    public GridCellTextViewRendererExt() 

    { 

 

    } 

 

    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view) 

    { 

        base.OnInitializeDisplayView(dataColumn, view); 

        if ((dataColumn.RowData as OrderInfo).IsBold == true) 

        { 

            view.FontAttributes = FontAttributes.Bold; 

        } 

    } 

} 

Query regarding Custom style: 

You can achieve your requirement by setting Style to GridColumn.CellStyle as in the below code example 

GridTextColumn orderIDColumn = new GridTextColumn(); 

orderIDColumn.MappingName = "OrderID"; 

Style style = new Style(typeof(GridCell)); 

style.Setters.Add(new Setter() { Property = GridCell.ForegroundProperty, Value = new Binding("OrderID", BindingMode.TwoWay, new StyleConverter()) }); 

orderIDColumn.CellStyle = style; 

orderIDColumn.LoadUIView = true; 

dataGrid.Columns.Add(orderIDColumn); 

Refer the below code example for writing a converter to customize the cell foreground based on conditions 

public class StyleConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        int _value = (int)value; 

        if (_value % 2 == 0) 

            return Color.Green; 

        return Color.Red; 

    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        return value; 

    } 

} 

Sample link: http://www.syncfusion.com/downloads/support/forum/128392/ze/XamarinForms2024521315  

Regards, 

Ashok 

[Joan Lopez]

Thanks a lot for the examples!!! :) :)

Just one more thing:

- How I can hide the header of a given column? Not empty string/cell, of course.

[Ashok N]

Hi Joan, 

You can hide the HeaderColumn by setting SfDataGrid.HeaderRowHeight as 0.  

 

SfDataGrid.HeaderRowHeight = 0; 

 

Regards, 

Ashok    

[Joan Lopez]

Hi  Mr. Ashok,

Two things:

1. I think the example with the "HeaderRowHeight" is a general assignment for the entire data grid.
   
   Is it possible to hide the header of one single column?
   
   
2. I've tried to reproduce your examples with the "GridCellTextViewRenderer", but I couldn't.
   
   The initialization of the data grid is working well with the given conditions defined in my own implementation of the "GridCellTextViewRenderer",
   but the problems comes when I scroll up/down. The rows appearing from the bottom part, appears painted in a wrong way. Moreover, when I scroll up again,
   the first rows which previously were painted right, then are painted wrong.
   
   I've been debugging but I couldn't find the way these rows are being wrong painted. The only thing to point out is that the "OnInitializeDisplayView"
   method is only called for some rows (those that appears at the beginning), what I think is probably normal.
   
   Do you know what I could be doing wrong?

Thanks a lot,

Sorry for the inconvenience.

Joan

[Ashok N]

Hi Joan,

Thanks for your update. 

We are able to reproduced the reported “GridCellTextViewRenderer” issue. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents 

Regards,
Ashok  

[Joan Lopez]

Hi Joan, 

Thanks for contacting Syncfusion support. 

Query regarding TextSize as Bold: 

You can achieve your requirement by customizing GridCellTextViewRenderer. You have to set the GridColumn.LoadUIView as True while customize the  GridCellTextViewRenderer. Please refer the below code example for GridCellTextViewRenderer customization 

//Add customrenderer 

dataGrid.CellRenderers.Remove("TextView"); 

dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt()); 

 

public class GridCellTextViewRendererExt : GridCellTextViewRenderer 

{ 

    public GridCellTextViewRendererExt() 

    { 

 

    } 

 

    public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfLabel view) 

    { 

        base.OnInitializeDisplayView(dataColumn, view); 

        if ((dataColumn.RowData as OrderInfo).IsBold == true) 

        { 

            view.FontAttributes = FontAttributes.Bold; 

        } 

    } 

} 

Query regarding Custom style: 

You can achieve your requirement by setting Style to GridColumn.CellStyle as in the below code example 

GridTextColumn orderIDColumn = new GridTextColumn(); 

orderIDColumn.MappingName = "OrderID"; 

Style style = new Style(typeof(GridCell)); 

style.Setters.Add(new Setter() { Property = GridCell.ForegroundProperty, Value = new Binding("OrderID", BindingMode.TwoWay, new StyleConverter()) }); 

orderIDColumn.CellStyle = style; 

orderIDColumn.LoadUIView = true; 

dataGrid.Columns.Add(orderIDColumn); 

Refer the below code example for writing a converter to customize the cell foreground based on conditions 

public class StyleConverter : IValueConverter 

{ 

    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        int _value = (int)value; 

        if (_value % 2 == 0) 

            return Color.Green; 

        return Color.Red; 

    } 

    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 

    { 

        return value; 

    } 

} 

Sample link: http://www.syncfusion.com/downloads/support/forum/128392/ze/XamarinForms2024521315  

Regards, 

Ashok 

BTW,

How I can set the font style (instead of the font color) with an IValueConverter?

For example, I want to determine if the font should be bold/italic/normal depending on the value?

I've tried returning a FontAttributes value (for example: FontAttributes.Italic) but it does not work.

Moreover, I've also tried changing the Property of the Setter to StyleProperty or ContentProperty (instead of ForegroundProperty), but nothing happens.

Is it possible?

Thanks!

[Ashok N]

Hi Joan, 

We have checked your query and we do not have support for .You can achieve this by customizing GridCellTextViewRenderer class. We have provided the sample for this in one of your incident. Please check that incident for further updates

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Regards, 

Ashok