layout	post
title	Rows in WPF DataGrid control \| Syncfusion®
description	Learn here all about Rows support in Syncfusion® WPF DataGrid (SfDataGrid) control, its elements and more details.
platform	wpf
control	SfDataGrid
documentation	ug

Rows in WPF DataGrid (SfDataGrid)

This section explains about various row types in WPF DataGrid (SfDataGrid).

StackedHeaderRow

AddNewRow

SummaryRow

UnboundRow

Row Header

RowHeader is a special column used to indicate the status of row (current row, editing status, errors in row, etc.) which is placed as first cell of each row. You can show or hide the row header by setting SfDataGrid.ShowRowHeader property.

{% tabs %} {% highlight xaml %} <syncfusion:SfDataGrid x:Name="dataGrid" AddNewRowPosition="Top" ItemsSource="{Binding Orders}" ShowRowHeader="True"> {% endhighlight %} {% highlight c# %} dataGrid.ShowRowHeader = true; {% endhighlight %} {% endtabs %}

Row indicators and its description

Row Indicator	Description
�	Denotes the row which has current cell or selected item.
��	Denotes row is being edited.
��	Denotes row is AddNewRow.
��	Denotes the row has errors.
��	Denotes that the current row which has errors.

Row header width

You can change the width of the row header by setting SfDataGrid.RowHeaderWidth property.

{% tabs %} {% highlight xaml %} <syncfusion:SfDataGrid x:Name="dataGrid" ShowRowHeader="True" RowHeaderWidth="50" ItemsSource="{Binding Orders}" /> {% endhighlight %}

{% highlight c# %} dataGrid.RowHeaderWidth = 50; {% endhighlight %} {% endtabs %}

Display the row index in row header

You can display the corresponding row index in each row header, by customizing the ControlTemplate of GridRowHeaderCell. You have to bind the RowIndex property to TextBlock.Text like the below code example.

{% tabs %} {% highlight xaml %}

{% endhighlight %} {% endtabs %}

You can get the sample from here.

Change the current row indicator

You can change the CurrentRowIndicator in the row header by customizing the control template of GridRowHeaderCell.

{% tabs %} {% highlight xaml %}

{% endhighlight %} {% endtabs %}

You can get the sample from here.

Change the background of row header

You can change the background color of the row header by customizing the style of the GridRowHeaderCell. You can change the background color with the converter based on the underlying collection.

{% tabs %} {% highlight xaml %}

<Application.Resources>
<local:CustomConverter x:Key="converter"/> <Style TargetType= "syncfusion:GridRowHeaderCell"> </Style> </Application.Resources>

{% endhighlight %}

{% highlight c# %}

public class CustomConverter:IValueConverter {

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{

    //Type casting the value as Data class(Business logic)
    var data = value as Data;

    //The Red color is applied to RowHeader if the status value is true otherwise the white color is applied 

    if (data.Status == true)
        return Brushes.Red;

    else
        return Brushes.Green;
}

public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
    throw new NotImplementedException();
}

}

{% endhighlight %} {% endtabs %}

You can get the sample from here.

Header Row

Header row is present in top of the WPF DataGrid which has column headers in it. Column header describes the caption to identify the column content.

You can change the header row height by setting SfDataGrid.HeaderRowHeight property.

Hiding Header row

You can hide the header row by setting SfDataGrid.HeaderRowHeight as 0 (zero).

{% tabs %} {% highlight xaml %} <syncfusion:SfDataGrid x:Name="dataGrid" HeaderRowHeight="0" ItemsSource="{Binding Orders}"> {% endhighlight %} {% endtabs %}

You can also hide the header row of DetailsViewDataGrid by setting HeaderRowHeight as 0 (zero) to ViewDefinition.DataGrid.

{% tabs %} {% highlight xaml %} <syncfusion:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding Orders}"> syncfusion:SfDataGrid.DetailsViewDefinition <syncfusion:GridViewDefinition RelationalColumn="Details"> syncfusion:GridViewDefinition.DataGrid <syncfusion:SfDataGrid x:Name="FirstLevelNestedGrid" HeaderRowHeight="0" /> </syncfusion:GridViewDefinition.DataGrid> </syncfusion:GridViewDefinition> </syncfusion:SfDataGrid.DetailsViewDefinition> </ syncfusion:SfDataGrid> {% endhighlight %} {% endtabs %}

Freeze panes

WPF DataGrid provides support to freeze the rows and columns at top and bottom similar to excel. You can freeze the rows and columns by setting following properties,

Property Name	Description
{{'[FrozenRowsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FrozenRowsCount)'\| markdownify }}	Set the frozen rows count at `top` of the SfDataGrid.
{{'[FooterRowsCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfDataGrid.html#Syncfusion_UI_Xaml_Grid_SfDataGrid_FooterRowsCount)'\| markdownify }}	Set the footer rows count at bottom of the SfDataGrid.
{{'[FrozenColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FrozenColumnCount)'\| markdownify }}	Set the frozen columns count in `left side` of the SfDataGrid.
{{'[FooterColumnCount](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Grid.SfGridBase.html#Syncfusion_UI_Xaml_Grid_SfGridBase_FooterColumnCount)'\| markdownify }}	Set the frozen columns in `right side` of the SfDataGrid.

{% tabs %} {% highlight xaml %} <syncfusion:SfDataGrid x:Name="dataGrid" FooterColumnCount="1" FooterRowsCount="3" FrozenColumnCount="1" FrozenRowsCount="2" ItemsSource="{Binding Orders}"> {% endhighlight %} {% highlight c# %} dataGrid.FooterColumnCount = 1; dataGrid.FrozenColumnCount = 1; dataGrid.FrozenRowsCount = 2; dataGrid.FrozenRowsCount = 3; {% endhighlight %} {% endtabs %}

Differentiate frozen rows from normal rows

You can differentiate the frozen rows and footer rows from normal rows by writing style for VirtualizingCellsControl and by customizing the FrozenRow and FooterRow visual states.

{% tabs %} {% highlight xaml %}

{% endhighlight %} {% endtabs %}

Disable drag and drop between frozen and non-frozen columns

You can disable the drag and drop between frozen and non-frozen columns by handling QueryColumnDragging event. Using Reason property in QueryColumnDraggingEventArgs, you can cancel the column dropping operation.

In the below code, if the Reason is QueryColumnDraggingReason.Dropping and the column is dragged from frozen region to non-frozen region or vice versa, you can cancel the dropping action by setting e.Cancel as true in the event.

{% tabs %} {% highlight c# %} this.dataGrid.QueryColumnDragging +=dataGrid_QueryColumnDragging;

void dataGrid_QueryColumnDragging(object sender, QueryColumnDraggingEventArgs e) {

if (e.Reason == QueryColumnDraggingReason.Dropping)
{

    //used to get frozen column index from the  frozen column count
    var frozenColIndex = dataGrid.FrozenColumnCount +
                                          this.dataGrid.ResolveToStartColumnIndex();
    //cancels dragging from frozen column to non-frozen column

    if (e.From < frozenColIndex && e.To > frozenColIndex - 1)
        e.Cancel = true;

    // cancels dragging from non-frozen column to frozen column

    if (e.From > frozenColIndex && e.To < frozenColIndex ||
         (e.From == frozenColIndex && e.To < frozenColIndex))
        e.Cancel = true;
}

} {% endhighlight %} {% endtabs %}

Limitations

When using DetailsView with freeze panes, exception will be raised like DetailsView is not supported with Freeze panes support.
When AllowFrozenGroupHeaders is true, frozen rows will not be considered.
SfDataGrid has support to freeze the number of rows from top or bottom. There is no support to freeze a specific row.

N> 1. Header rows, table summary rows and row header are frozen regardless of FrozenRowsCount and FooterRowsCount. 2. FrozenRowsCount and FooterRowsCount values should be less than the number of rows and column visible.

Navigation Menu

Uh oh!

Rows in WPF DataGrid (SfDataGrid)