Articles in this section
Category / Section

How to improve performance when using formatting and styling for the cells based on data in Silverlight DataGrid?

2 mins read

In SfDataGrid, you can customize the Cell/Row style based on the data in the following three ways,

  1. StyleSelector
  2. DataTriggers
  3. Customizing property in Style using Converters

StyleSelector

You can customize the Cell/Row based on content by using CellStyleSelector/ RowStyleSelector, but it affects the performance while styling more number of columns or rows. Therefore, this is not a recommended way for styling the SfDataGrid for more number of columns or rows. You can use this StyleSelector according to your necessity.

To know more about the StyleSelector you can refer to the following links:

https://help.syncfusion.com/wpf/datagrid/conditional-styling#conditional-styling-of-cells-using-style-selector

https://help.syncfusion.com/wpf/datagrid/conditional-styling#conditional-styling-of-rows-using-style-selector

https://support.syncfusion.com/kb/article/2782/how-to-set-background-color-for-cells-in-a-column-based-on-the-cell-content-in-wpf-datagrid-

DataTriggers

You can customize the Cell/Row based on content by using Style.Triggers, but compared to Binding Converter, the performance is low when styling more number of columns or rows in SfDataGrid.

To know more about the DataTriggers you can refer to the following links:

https://support.syncfusion.com/kb/article/2782/how-to-set-background-color-for-cells-in-a-column-based-on-the-cell-content-in-wpf-datagrid-

Customizing the properties in Style using Converters

In SfDataGrid, customizing properties in Style using Converter is the suggested way to customize the properties of Cell/Row, based on its content. As it provides improved performance compared to other two ways.

For Cell Style

In the following code example, the Background of the GridCell for a particular column is customized based on its content using Converters.

XAML

<Window.Resources>
    <local:CellStyleConverter x:Key="cellstyleconverter"/>
</Window.Resources>
<!--Defining SfDataGrid-->
<syncfusion:SfDataGrid x:Name="datagrid"
                    ItemsSource="{Binding GDCSource}"
                    AutoGenerateColumns="True"
                    ColumnSizer="Star"/>
<!--Setting GridCell key to SfDataGrid.Columns-->
<syncfusion:SfDataGrid.Columns>
    <syncfusion:GridTextColumn MappingName="EmployeeDesignation">
        <syncfusion:GridTextColumn.CellStyle>
            <Style TargetType="syncfusion:GridCell">
                <Setter Property="Background" Value="{Binding EmployeeDesignation, Converter = {StaticResource cellstyleconverter}}" />
            </Style>
        </syncfusion:GridTextColumn.CellStyle>
    </syncfusion:GridTextColumn>
</syncfusion:SfDataGrid.Columns>

The following code example illustrates the CellStyleConverter for customizing the Cell style based on the Cell content.

C#

class CellStyleConverter:IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        var cellvalue = value as string;
        if (cellvalue == "SoftwareEngineer")
            return "CadetBlue";
        else if (cellvalue == "SalesRepresentative")
            return "OrangeRed";
        else
            return "YellowGreen";
    }
    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The following screenshot displays the output of CellStyle in SfDataGrid.

F:\Farjana\F Drive\KB\Styles Performance\CellStyle 1.png

Figure 1: CellStyle in SfDataGrid

For Row Style

In the following code example, the Background of the VirtualizingCellsControl is customized based on its content using Converters.

XAML

<!--Customizing VirtualizingCellsControl -->
<Window.Resources>
    <local:RowStyleConverter x:Key="rowstyleconverter"/>
    <Style x:Key="stylecolor" TargetType="syncfusion:VirtualizingCellsControl">
        <Setter Property="Background" Value="{Binding Converter={StaticResource rowstyleconverter}}"/>
    </Style>
</Window.Resources>
<!--Setting VirtualizingCellsControl key to RowStyle in SfDataGrid -->
<syncfusion:SfDataGrid x:Name="datagrid"
                    RowStyle="{StaticResource stylecolor}"
                    ItemsSource="{Binding GDCSource}"
                    AutoGenerateColumns="True"
                    ColumnSizer="Star"/>

The following code example illustrates the RowStyleConverter for customizing the Cell/Row style.

C#

class RowStyleConverter:IValueConverter
{
    object IValueConverter.Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        if ((value as BusinessObjects).EmployeeSalary==null)
            return "CadetBlue";
        else if((value as BusinessObjects).EmployeeName==null)
            return " OrangeRed ";
        else
            return " YellowGreen ";
    }
    object IValueConverter.ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The following screenshot displays the output of RowStyle in SfDataGrid.

F:\Farjana\F Drive\KB\Styles Performance\RowStyle1.png

Figure 2: RowStyle in SfDataGrid

Sample Link:

Refer to the following sample links to customize the GridCell, based on the Converter to increase the performance of the SfDataGrid in WPF and Silverlight.

WPF: StylePerformanceofSfDataGrid_WPF

Silverlight: StylePerformanceofSfDataGrid_SilverLight

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment