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. Image for the cookie policy date
close icon

Highlight min/max SFDataGrid CellValue

Hi,
I need to highlight the max / min value of each column in the SFDataGrid.
I did the same with a DataGrid in WPF (see picture below). Is something like this also possible with SFDataGrid in Xamarin.Forms?



Thanks

7 Replies

DS Divakar Subramaniam Syncfusion Team October 17, 2016 11:14 AM UTC

Hi Thomas,  
 
 
Thanks for contacting Syncfusion Support. 
  
  
In SfDataGrid, you can able to set a style for the particular cell using GridColumn.CellStyle property and Converter. In the Converter, you will get the value of each cell in the column which you have bound to the converter. Based on the cell value(whether the value is minimum or maximum which is based on your condition) you can apply different styles to each cell. Please refer the below code snippet to know how to apply the style to the particular cell using Converter.  
  
  
//Main Page  
Style style = new Style(typeof(GridCell));  
style.Setters.Add(new Setter() { Property = GridCell.BackgroundColorProperty, Value = newBinding() { Path = "OrderID"Converter = new Converter() } });  
  
foreach (var column in sfGrid.Columns)  
{  
    if (column.MappingName == "OrderID")  
        column.CellStyle = style;  
}  
  
//Converter class  
public class Converter : IValueConverter  
{  
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)  
    {  
            var data = (int)value; 
            if (data < 0)//You can change the condition based on your requirement 
                return Color.Red; 
            else 
                return Color.Green; 
    }  
  
    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)  
    {  
        return null;  
    }  
}  
  
  
In the above code, we have bound “OrderID” property. So, you can get each value of the “OrderID” column. Hence, you can apply a style to any cell based on the cell value as above. We have applied background color as “Red” for the cell having the value is negative otherwise applied background color as “Green” in the above code. You can modify the code based on your requirement and can apply different styles to the particular cell.  
  
 
  
  
Regards,  
Divakar.   
 



TG Thomas Gruener October 18, 2016 08:08 AM UTC

Hi, thanks for your help.
But the solution you have send, won't work. I will explain on a sample.
We have three columns with the following values:
Column1: 10, 2, 6, 0, 9, 0, 7, 1, 5
Column2: 5, 8, 4, 9, 2, 7, 9, 6, 3, 2
Column3: 9, 11, 15, 9, 12, 13, 15, 9, 10, 15

So what I need would be to highlight the highest numbers (green) and the lowest number (red) for each column. So the highlights would be:
Column1: lowest (0) 2x red, highest (10) 1x green
Column2: lowest (2) 2x red, highest (9) 2x green
Column3: lowest (9) 3x red, highest (15) 3x green

So if I would write the code like you showed it wouldn't work, because 9 is the highest number in column2, but is the lowest number in column3!

So I can't write:
if( data = 9) return color green;  
because for column3 I would need it red, because it is the lowest number. So you see my problem here!!!
So is there any other way I could get this to work?
Because I can't have a static value for low or high, since I will never know which is the highest or the lowest value for a column, so it needs to be dynamic...
Is there no way to direcly edit or get the cell in the SFDatagrid?
I really need this.

Thanks for all your help.








DS Divakar Subramaniam Syncfusion Team October 19, 2016 03:00 PM UTC

Hi Thomas,  
 
 
Thanks for the update. 
 
 
Currently, it is not possible to get the cell value or edit the cell directly in SfDataGrid. However, you can achieve your requirement in Converter class itself. Please refer the below code snippet to know how to achieve your requirement. 
 
//Initialize the style. 
style = new Style(typeof(GridCell)); 
style.Setters.Add(new Setter() { Property = GridCell.BackgroundColorProperty,Value = new Binding() { Path = "OrderID",Converter = new Converter(), ConverterParameter=sfGrid } }); //Need to pass SfDataGrid as ConverterParameter. So that you can access the grid in converter. 
 
//Set the style for the column in GridViewCreated event. 
private void SfGrid_GridViewCreated(object sender, GridViewCreatedEventArgs e) 
{ 
    foreach (var column in sfGrid.Columns) 
    { 
        if (column.MappingName == "OrderID") 
        { 
            column.CellStyle = style; 
        } 
    } 
} 
 
//Converter class. 
public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
{ 
    //You can get the grid here since we passed SfDataGrid as parameter. 
    var grid = parameter as SfDataGrid; 
    var converterValue = (int)value; 
 
    List<int> list = new List<int>(); 
    foreach (var item in grid.View.Records) 
    { 
        foreach (var column in grid.Columns) 
        { 
            //You can apply this for all the columns as below. 
            if (column.MappingName == "OrderID") 
            { 
                var cellValue = (int)grid.GetCellValue(item.Data, column.MappingName); 
                list.Add(cellValue); 
            } 
        } 
} 
 
    //Max and Min values will be stored here. 
    var maxValue = list.ToArray().Max(); 
    var minValue = list.ToArray().Min(); 
 
    //Background will be set based on the condition 
    if (converterValue == maxValue) 
    { 
        return Color.Green; 
    } 
    else if (converterValue == minValue) 
    { 
        return Color.Red; 
    } 
    else 
        return Color.Default; 
 
} 
 
 
Also, we have prepared a sample based on your requirement and you can download the same from the below link. 
 
 
  
  
Regards,  
Divakar.  



TG Thomas Gruener October 21, 2016 09:29 AM UTC

Hi,
I applied the changes as you showed, but it seems this works only for the first column, and not for the other columns. Even so it goes through all columns to apply the style it doesn't actually show it when it finally displays the Grid????
Can you tell me why that would be?

Just put the attached files into a PCL to test. You can see it applies the style to all columns, but when it displays only the first column has the highlights...

Thanks for your help.

Attachment: ConverterDemo_a3c26cb0.zip


TG Thomas Gruener October 21, 2016 10:34 AM UTC

Hi,

OK I fixed the problem with only doing the first column, but it still doesn't work right. It's not doing the highlights for all columns, also it makes some weird highlights.
Place files into a PCL and check Namespace to test.

Thanks for the help.

Attachment: ConverterDemo_580320d9.zip


TG Thomas Gruener October 21, 2016 10:35 AM UTC

Please disregard the problem with only selecting just the first column. I fixed the issue for that.

Thanks


DS Divakar Subramaniam Syncfusion Team October 24, 2016 12:28 PM UTC

Hi Thomas, 
 

We have checked your query and we were able to reproduce the reported issue “GridStyle is not applied when reusing the columns” on our side. We have logged an issue report for the same and currently we are working on it. 
 
A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates
 
  
Regards, 
Divakar. 


Loader.
Live Chat Icon For mobile
Up arrow icon