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 change style of specific row in a SfDataGrid control

Thread ID:

Created:

Updated:

Platform:

Replies:

117407 Oct 15,2014 09:30 AM UTC Feb 23,2016 07:12 PM UTC WinRT 9
loading
Tags: SfDataGrid
Ric Silva
Asked On October 15, 2014 09:30 AM UTC

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 [Syncfusion]
Replied On October 16, 2014 03:22 PM UTC

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
Replied On October 17, 2014 09:19 AM UTC

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
Replied On October 17, 2014 01:02 PM UTC

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 [Syncfusion]
Replied On October 20, 2014 09:37 AM UTC

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
Replied On October 20, 2014 10:45 AM UTC

Ok, thanks for the help :)

Akila Rajaram [Syncfusion]
Replied On October 21, 2014 03:56 AM UTC

Hi Silva ,

 

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

 

Regards,

Akila


Alexander Schunk
Replied On February 22, 2016 03:30 PM UTC

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
Replied On February 22, 2016 03:47 PM UTC

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 [Syncfusion]
Replied On February 23, 2016 07:12 PM UTC

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

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

;