How to set the AlternatingRowStyle to TextBox which is directly loaded into GridTemplateColumn?

1 min read

SfDataGrid.AlternatingRowStyle property helps you to apply styles for the alternate rows in SfDataGrid. When you set the SfDataGrid.AlternatingRowStyle, the style is not applied to TextBox that is directly loaded into GridTemplateColumn as displayed in the following screenshot.

$D:\Issuesample\KB's\templatestyle\FL1.png$

You can overcome this by setting the TextBox Background as Transparent that is loaded in GridTemplateColumn.

The following code example explains the SfDataGrid is defined with AlternatingRowStyle and GridTemplateColumn is defined with TextBox.

XML

<!--Need to add this code snippet in Resources Define the style with Key-->
<Style x:Key="AlternateRowStyle" TargetType="syncfusion:VirtualizingCellsControl">
      <Setter Property="Background" Value = "LightGray " />
</Style>
<syncfusion:SfDataGrid Name="SfdataGrid" 
                    AlternatingRowStyle="{StaticResource AlternateRowStyle}"
                    AllowDraggingColumns="True"
                    AllowEditing="True"
                    ColumnSizer="Star"
                    AutoGenerateColumns="False"
                    ItemsSource="{Binding Employee}"
                    NavigationMode="cell">
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTemplateColumn HeaderText="Employee Name" MappingName="Name" >
            <syncfusion:GridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <TextBox Background="Transparent" Text="{Binding Name}" />
                </DataTemplate>
            </syncfusion:GridTemplateColumn.CellTemplate>
        </syncfusion:GridTemplateColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

The following screenshot displays the output of SfDataGrid with AlternatingRowStyle. Here, the TextBox is loaded to the Employee name column.

$D:\Issuesample\KB's\templatestyle\LS2.png$