Row Indicator Panel

• Mar 25, 2022
• 2 minutes to read

The Row Indicator Panel is a region displayed at the GridControl‘s left edge.

The panel consists of two parts:

• The Row Indicator Header that you can customize for your needs.
• Row Indicator Cells that correspond to grid rows (data rows and service rows). A cell related to the focused row indicates the row state (whether it is in edit mode, was modified, and so on).

Indicator cells display the following icons:

Icon	Description	Customization Property
	The focused row	FocusedImage
	The focused row is in edit mode	EditingImage
	The focused row was modified	ChangedImage
	The unfocused New Item Row	NewItemRowImage
	Auto Filter Row	AutoFilterRowImage
	The focused row contains validation errors	FocusedErrorImage
	A non-focused row contains validation errors	ErrorImage
	None of the above applies to a row indicator cell	NoneImage

The table below lists properties that affect element behavior and appearance:

Characteristics	Members
Visibility	DataControlBase.ShowRowIndicator
Width	DataControlBase.RowIndicatorWidth
Template	DataControlBase.RowIndicatorTemplate
Header Template	DataControlBase.RowIndicatorHeaderTemplate
Appearance	DataControlBase.RowIndicatorStyleSettings

Customize the Row Indicator Panel

The following code sample uses the properties listed above to extend the Row Indicator Panel with row indexes and a button that invokes the Column Chooser:

XAML

<dxg:GridControl ...
                 ShowRowIndicator="True"
                 RowIndicatorWidth="48">
    <dxg:GridControl.RowIndicatorHeaderTemplate>
        <DataTemplate x:DataType="dxg:HeaderRowData">
            <Button HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    Padding="15,4,15,5"
                    ToolTipService.ToolTip="Show Column Chooser"
                    Command="{x:Bind ((dxg:GridControl)DataControl).Commands.ShowColumnChooser}">
                <Image Source="ms-appx:///DevExpress.WinUI.Grid.v23.2/Themes/Icons/Light/ContextMenu/ShowColumnChooser.svg"/>
            </Button>
        </DataTemplate>
    </dxg:GridControl.RowIndicatorHeaderTemplate>

    <dxg:GridControl.RowIndicatorTemplate>
        <DataTemplate x:DataType="dxg:RowDataBase">
            <Grid ToolTipService.ToolTip="{x:Bind RowHandle, Mode=OneWay}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <dxg:RowIndicatorImage/>
                <TextBlock Text="{x:Bind RowHandle, Mode=OneWay}"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Grid.Column="1"/>
            </Grid>
        </DataTemplate>
    </dxg:GridControl.RowIndicatorTemplate>

    <dxg:GridControl.RowIndicatorStyleSettings>
        <dxg:RowIndicatorStyleSettings BorderBrush="Transparent"/>
    </dxg:GridControl.RowIndicatorStyleSettings>
    <!-- ... -->
</dxg:GridControl>