How to change style of specific row in a SfDataGrid control

[Ric Silva]

Im using a SfDataGrid data grid control in a Windows Store app project, im able to apply my costum styles to the diferent rows, but there is one row in particular that i want to have a diferent style. this is what i have so far.

<Page.Resources>

    <Style x:Key="customCellStyle"  TargetType="syncfusion:GridCell">

        <Setter Property="BorderBrush" Value="#FF7fd0de" />
        <Setter Property="BorderThickness" Value="1,0,0,1" />
        <Setter Property="Padding" Value="0,0,0,0" />
        <Setter Property="FontFamily" Value=" Segoe UI" />
        <Setter Property="Foreground" Value="#FF2A2A2A" />
        <Setter Property="FontSize" Value="14" />
        <!--<Setter Property="Height"  Value="59" />-->

    </Style>

    <Style x:Key="rowStyle" TargetType="syncfusion:VirtualizingCellsControl">
        <Setter Property="Background" Value="WhiteSmoke" />
    </Style>

    <Style x:Key="altRowStyle" TargetType="syncfusion:VirtualizingCellsControl">
        <Setter Property="Background" Value="White" />
    </Style>

</Page.Resources>

<Grid x:Name="rootGrid" Style="{StaticResource RootGridStyle}" Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="140"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <syncfusion:SfDataGrid Grid.Row="1" x:Name="datagrid" Width="1366"
                           AllowResizingColumns="True"
                           AutoGenerateColumns="True"
                           CellStyle="{StaticResource customCellStyle}"
                           ColumnSizer="Star"
                           RowHeight="65"
                           AlternatingRowStyle="{StaticResource altRowStyle}"
                           RowStyle="{StaticResource rowStyle}" />

    <ProgressRing Grid.Row="1" IsActive="{Binding IsLoading}" />

    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonReverseStyle}"/>
</Grid>

How can i apply a specific style to one of the rows, lets say row 3.

[Akila Rajaram]

Hi Silva ,

 

Thanks for using Syncfusion Products .

 

We have analyzed your query . You can apply a specific style to one of the rows by  using StyleSelector which is used to apply custom style for cells and rows . We have prepared the sample based on your requirement . Please  refer the  below attached sample.

 

Please find the below code snippet ,

 

Code snippet:

 

App.xaml

 

<Application.Resources>

 

        <Style x:Key="rowStyle"   TargetType="syncfusion:VirtualizingCellsControl">

            <Setter Property="Background"  Value="WhiteSmoke"/>

         </Style>

       

        <Style x:Key="altRowStyle" TargetType="syncfusion:VirtualizingCellsControl">

            <Setter Property="Background" Value="White"/>

            <Setter Property="Foreground" Value="Black"/>

        </Style>

          

</Application.Resources>

 

Code behind:

 

public class CustomStyleSelector:StyleSelector

    {

       protected override Style SelectStyleCore(object item, DependencyObject container)

       {

           var row = item as DataRowBase;

           var collection =row.RowData as Student;

           //Based on the row index

      // if(row.RowIndex==2)

      //Based on the value

           if(collection.Age==12)

                return App.Current.Resources["rowStyle"] as Style;

           else

               return App.Current.Resources["altRowStyle"] as Style;

           return base.SelectStyle(item, container);         

       }

    }

   

 

Please let us know if you have any other queries .

 

Regards ,

Akila

Attachment: SfDataGridSample_Style_6088f7e5.zip

[Ric Silva]

Thanks, i managed to apply it to my project

If you could give a example to change the style of a specific Cell instead of the full row, it would also be great :)

[Ric Silva]

I managed to change the style of specific cells, but for some reason the font of my style inst being applied.
here's my code

<Page.Resources>

    <common:CustomStyleSelector x:Key="styleselector"/>

</Page.Resources>

...

        <syncfusion:SfDataGrid Grid.Row="1" x:Name="datagrid" Width="auto" Visibility="Collapsed"
                           Margin="10,0,10,10"
                           AllowResizingColumns="True"
                           AutoGenerateColumns="true"
                           AllowDraggingColumns="True"
                           AllowSorting="False"
                           ColumnSizer="Star"
                           RowHeight="65"
                           RowStyle="{StaticResource rowStyle}" 
                           ShowRowHeader="True"                               
                           CellStyleSelector="{StaticResource styleselector}"
                           />

and the CellStyleSelector uses this ( probably not the best method but it seems to work in my situation)

public class CustomStyleSelector : StyleSelector
{

    private Style cellStyle { get; set; }
    private static int cellCounter;


    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        cellCounter = cellCounter + 1;

        switch (cellCounter)
        {
            case 3:
            case 5:
            case 21:
            case 22:
            case 23:
            case 24:
            case 25:
            case 26:
            case 27:
            case 28:
            case 29:
            case 30:
                cellStyle = Application.Current.Resources["altCustomCellStyle"] as Style;
                return cellStyle;
            default:
                cellStyle = Application.Current.Resources["customCellStyle"] as Style;
                return cellStyle;
        }
    }
}

and this is the styles i am using ´

<Style x:Key="customCellStyle"  TargetType="syncfusion:GridCell">

    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1,0,0,1" />
    <Setter Property="Padding" Value="0,0,0,0" />
    <Setter Property="Foreground" Value="#FF2A2A2A" />
    <Setter Property="FontSize" Value="13" />
    <Setter Property="FontFamily" Value=" Segoe UI" />

</Style>

<Style x:Key="altCustomCellStyle"  TargetType="syncfusion:GridCell">

    <Setter Property="Background" Value="#49E367" />
    <Setter Property="BorderBrush" Value="Gray" />
    <Setter Property="BorderThickness" Value="1,0,0,1" />
    <Setter Property="Padding" Value="0,0,0,0" />
    <Setter Property="FontFamily" Value=" Segoe UI SemiBold" />
    <Setter Property="FontWeight" Value="Bold" />
    <Setter Property="Foreground" Value="#FF2A2A2A" />
    <Setter Property="FontSize" Value="24" />

</Style>

everything seems to be working, the cells im searching in the switch get a #49E367 background, but for some reason my FontSize and FontFamily dont get changed.

[Akila Rajaram]

Hi Silva ,

 

We have analyzed your query .  We regret to inform you that we are unable to reproduce the reported query on our end . We have Changed the FontSize and FontFamily in our sample based on the code snippet provided by you from the last update and its  working as expected . Please find the modified attached sample .

 

Please have a look at the sample and if the issue still exists, could you please try reproducing it in the above sample or send reproducible sample along with the reproducing steps so that we could sort out the cause of the issue and provide you a better solution?

 

Please let us know if you have any other queries .

 

Regards,

 

Akila

Attachment: SfDataGridSample_Style_6088f7e5_c24d40a.zip

[Ric Silva]

Ok, thanks for the help :)

[Akila Rajaram]

Hi Silva ,

 

Thank you for the update, Please let us know if you require further assistance.

 

Regards,

Akila

[Alexander Schunk]

I was able to reproduce these "problems" on UWP where FontSize, Font or Forecolor won't change by Cell Style. This is caused by a General Styling of the TextBlock. Like this

    <Style TargetType="TextBlock">
        <Setter Property="Foreground" Value="Black" />
        <Setter Property="FontWeight" Value="SemiLight" />
        <Setter Property="FontSize" Value="16" />
        <Setter Property="Margin" Value="0,4,2,2" />
        <Setter Property="IsColorFontEnabled" Value="True" />
        <Setter Property="TextWrapping" Value="WrapWholeWords" />
        <Setter Property="RequestedTheme" Value="Light" />
        <Setter Property="TextTrimming" Value="WordEllipsis" />
    </Style>

I did not found a good work around yet

[Alexander Schunk]

This is the only solution I could come up with that really works

the Style

    <Style x:Key="cellstyle" TargetType="syncfusion:GridCell">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="syncfusion:GridCell">
                    <ContentPresenter Foreground="Tomato" FontSize="12">
                        <behaviours:Interaction.Behaviours>
                            <behaviours:ContentPresenterForceTextStylesToTextBlockContent />
                        </behaviours:Interaction.Behaviours>
                    </ContentPresenter>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The Behaviour

    public sealed class ContentPresenterForceTextStylesToTextBlockContent : Behaviour<ContentPresenter>
    {
        protected override void OnDataContextChanged()
        {
            if (this.AssociatedObject.Content is TextBlock)
            {
                var textBlock = this.AssociatedObject.Content as TextBlock;

                textBlock.FontFamily = this.AssociatedObject.FontFamily;
                textBlock.FontSize = this.AssociatedObject.FontSize;
                textBlock.FontStretch = this.AssociatedObject.FontStretch;
                textBlock.FontWeight = this.AssociatedObject.FontWeight;
                textBlock.Foreground = this.AssociatedObject.Foreground;
                textBlock.TextWrapping = this.AssociatedObject.TextWrapping;
            }
        }
    }

[Antony Raj M]

Hi Alexander,

Please add a dummy TextBlock style within SfDataGrid.Resources, which will not apply your general TextBlock style. Please refer the below code example and implement the same in your application.

<syncfusion:SfDataGrid x:Name="dataGrid"

                        Margin="10"

                        AllowEditing="True"

                        ColumnSizer="Auto"

                        ItemsSource="{Binding NewList}">

    <syncfusion:SfDataGrid.Resources>

        <Style TargetType="TextBlock"/>

    </syncfusion:SfDataGrid.Resources>
</syncfusion:SfDataGrid>

Please let us know if you have any further assistance on this.


Regards,
Antony Raj