1. Home
  2. Forum
  3. WPF
  4. Conditional Formatting based on Higher and Lower values of a column

Conditional Formatting based on Higher and Lower values of a column

Hi,

I would like to know if it´s possible to conditional format a cell based on the higher and lower values of a specific column that has real time updates. Additionally,  I would like to use those values to calculate and show a proportional progress bar inside the cell. 

Thank you.

3 Replies
GT Gnanasownthari Thirugnanam Syncfusion Team October 23, 2017 01:08 PM UTC

Hi Edson, 

Please find the below response for your queries. 

Query 1: if it´s possible to conditional format a cell based on the higher and lower values of a specific column that has real time updates 
You can apply the style based on higher and lower cell value in RealTime update by writing style to GridCell using CellStyle property in GridColumn as like below code example. 

<syncfusion:GridTextColumn MappingName="PreviousClose" TextAlignment="Right" > 
                    <syncfusion:GridTextColumn.CellStyle> 
                        <Style TargetType="syncfusion:GridCell"> 
                            <Setter Property="Background" Value="{Binding Content.Text, RelativeSource={RelativeSource Self}, Converter={StaticResource cellStyleConverter}}" /> 
                            <Setter Property="BorderBrush" Value="#FF7fd0de" /> 
                        </Style> 
                    </syncfusion:GridTextColumn.CellStyle> 
                </syncfusion:GridTextColumn> 

internal class CellStyleConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        double _value; 
        if (!String.IsNullOrEmpty(value as string)) 
        { 
            _value = double.Parse(value.ToString(), NumberStyles.Currency); 
            if ( _value > 15.00) 
                return App.Current.Resources["Brush1"]; 
            else 
                return App.Current.Resources["Brush2"]; 
        } 
        return new SolidColorBrush(); 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 


Query 2: I would like to use those values to calculate and show a proportional progress bar inside the cell.  
You can display the progress bar inside the cell using CellTemplate property in GridColumn as like below code example. 

<syncfusion:GridTextColumn MappingName="LastTrade" TextAlignment="Right" > 
                    <syncfusion:GridTextColumn.CellTemplate> 
                        <DataTemplate> 
                            <Grid> 
                                <ProgressBar x:Name="progressBar" 
                                                 Background="Transparent" 
                                                 BorderThickness="0" 
                                                 FlowDirection="RightToLeft" 
                                                 Maximum="100" 
                                                 Minimum="0" 
                                                 Visibility="Visible" 
                                                 Value="{Binding LastTrade,Mode=TwoWay}" /> 
                                <TextBlock VerticalAlignment="Center" 
                                               Text="{Binding Path=LastTrade}" 
                                               TextAlignment="Right" /> 
                            </Grid> 
                        </DataTemplate> 
                    </syncfusion:GridTextColumn.CellTemplate> 
                </syncfusion:GridTextColumn> 



We have prepared the sample based on your requirement, you can download the same from below mentioned location. 

Sample location: 

Please refer the below UG link for more details about conditional formatting style. 

Regards, 
Gnanasownthari T. 
 


EB Edson Braz October 24, 2017 11:54 AM UTC

Hi,

Thank you for replying.

Forgot to mention that I currently don't keep track of the higher and lowest values. In your sample code, the 15.0 value is unknown. 

Could I use a multi binding instead and pass a value from the Summary Table Row? 

Thank you!

Edson.


GT Gnanasownthari Thirugnanam Syncfusion Team October 25, 2017 02:10 PM UTC

Hi Edson, 

You can apply ConditionalFormatting to GridCell based on TableSummaryRow value using SelectStyle method in StyleSelector. Please refer the below code snippet and you can modify this based on the requirement in your application.  

XAML 
<syncfusion:GridTextColumn MappingName="PreviousClose" TextAlignment="Right" > 
   <syncfusion:GridTextColumn.CellStyleSelector> 
      <local:SelectorClass />                       
   </syncfusion:GridTextColumn.CellStyleSelector> 
</syncfusion:GridTextColumn> 

C# 
public class SelectorClass : StyleSelector 
{ 
    public override Style SelectStyle(object item, DependencyObject container) 
    { 
        var dataGrid = (container as GridCell).ColumnBase.GridColumn.GetType(). 
            GetProperty("DataGrid", BindingFlags.NonPublic | BindingFlags.Instance).GetValue((container as GridCell).ColumnBase.GridColumn,null); 
        //You can get the TableSummaryRow value from RowData of tableSummaryRow 
        var tableSummaryRow = (dataGrid as SfDataGrid).RowGenerator.Items.Find(element => element.RowType == RowType.TableSummaryRow); 
        var value = (tableSummaryRow.RowData as SummaryRecordEntry).SummaryValues[0].AggregateValues.Values.ElementAt(0); 
         
        var data = item as StockData; 
        if (data != null && value!=null) 
        {               
            //you can apply conditional formatting based on TaleSummaryRow here. 
            if (double.Parse(data.PreviousClose.ToString()) < double.Parse(value.ToString())) 
                return App.Current.Resources["redCellStyle"] as Style; 
            else 
                return App.Current.Resources["blueCellStyle"] as Style;         
        } 
        return base.SelectStyle(item, container); 
    } 
} 

We have modified the sample based on your requirement, you can download the same from below mentioned location. 

Sample link: 

Please let us know of this helps you. 

Regards, 
Gnanasownthari T. 
 


Loader.
Up arrow icon