0

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.

Thought
  • 5,326
  • 7
  • 33
  • 69
  • 1
    you need to use a template selector – Franck Oct 15 '14 at 11:10
  • can you tell me where i can find some examples of documentation about that ? – Thought Oct 15 '14 at 11:29
  • 1
    [this](http://msdn.microsoft.com/en-us/library/system.windows.controls.datatemplateselector%28v=vs.110%29.aspx) would be Microsoft documentation. [This](http://wpftutorial.net/DataTemplates.html) one is a quite simple example. Standard datatemplate will switch depending on object type but with template selector you can also make it pick one template or another depending on a property value even if the object is same type. Best comparison of template selector is the conditional formatting in Excel. – Franck Oct 15 '14 at 11:36

1 Answers1

1

By using RowStyleSelector, you can apply the style for particular row. Refer this link : http://help.syncfusion.com/wpf/sfdatagrid/conditional-styling#rows

public class CustomRowStyleSelector : StyleSelector
{       
        protected override Style SelectStyleCore(object item, Windows.UI.Xaml.DependencyObject container)
        {
            var row = item as DataRowBase;                
            if (row.RowIndex == 3)
                return App.Current.Resources["rowStyle"] as Style;
            return base.SelectStyleCore(item, container);
        }        
}

<syncfusion:SfDataGrid x:Name="sfdatagrid" Grid.Row="0"
                   AutoGenerateColumns="True" 
                   ItemsSource="{Binding Path=Products}"
                   RowStyleSelector="{StaticResource rowStyleSelector}"/>
Elavarasan M
  • 182
  • 1
  • 11