We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to set conditional styles programatically?

Thread ID:

Created:

Updated:

Platform:

Replies:

128392 Jan 18,2017 06:57 PM UTC Jan 30,2017 10:01 AM UTC Xamarin.Forms 8
loading
Tags: SfDataGrid
Joan Lopez
Asked On January 18, 2017 06:57 PM UTC

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
Replied On January 18, 2017 07:01 PM UTC

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 [Syncfusion]
Replied On January 19, 2017 10:33 AM UTC

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; 
    } 
} 


Regards, 
Ashok 


Joan Lopez
Replied On January 20, 2017 06:17 PM UTC

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 [Syncfusion]
Replied On January 23, 2017 05:48 AM UTC

Hi Joan, 

You can hide the HeaderColumn by setting SfDataGrid.HeaderRowHeight as 0.  
 
SfDataGrid.HeaderRowHeight = 0; 
 
Regards, 
Ashok    


Joan Lopez
Replied On January 23, 2017 08:27 AM UTC

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 [Syncfusion]
Replied On January 24, 2017 01:06 PM UTC

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
Replied On January 27, 2017 01:18 PM UTC

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; 
    } 
} 


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 [Syncfusion]
Replied On January 30, 2017 10:01 AM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;