Row Indicator Panel
- 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 | Focused |
![]() |
The focused row is in edit mode | Editing |
![]() |
The focused row was modified | Changed |
![]() |
The unfocused New Item Row | New |
![]() |
Auto Filter Row | Auto |
![]() |
The focused row contains validation errors | Focused |
![]() |
A non-focused row contains validation errors | Error |
![]() |
None of the above applies to a row indicator cell | None |
The table below lists properties that affect element behavior and appearance:
Characteristics | Members |
---|---|
Visibility | Data |
Width | Data |
Template | Data |
Header Template | Data |
Appearance | Data |
#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:
<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>