How to display row index not include stackedHeader in Syncfusion Treegrid

Question

I want to display Row index in syncfusion treegrid. I used this way

 <Style TargetType="syncfusion:TreeGridRowHeaderCell">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Gray" />            
        <Setter Property="BorderThickness" Value="0.1,0,0.1,0.1" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="IsTabStop" Value="True" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="syncfusion:TreeGridRowHeaderCell">
                    <Border x:Name="PART_RowHeaderCellBorder"
                        BorderBrush="Gray"
                        BorderThickness="{TemplateBinding BorderThickness}">

                        <Grid>
                            <TextBlock HorizontalAlignment="Center"
                                    VerticalAlignment="Center"
                                    Text="{Binding RowIndex,RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                    TextAlignment="Center"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>
<Grid Background="{ThemeResource SystemControlAcrylicWindowBrush}">
    <syncfusion:SfTreeGrid Name="treeGrid"
                           AutoGenerateColumns="False"
                           ChildPropertyName="Children"                              
                           AllowDraggingRows="True"
                           AllowDrop="True"         
                           AutoExpandMode="AllNodesExpanded"
                           SelectionMode="Extended"
                           HeaderStyle="{StaticResource syncTreeHeader}"        
                           ShowRowHeader="True"
                           >

but this Row index is include stacked header row like this

enter image description here

How to display without this?

Answer 1

You can achieve your requirement to “Display the row index only for the DataRow” will be achievable by using the below code snippet,

XAML:

<Page.Resources>
   <local:RowIndexValueConverter x:Key="rowIndexValueconverter"/>
   <Style TargetType="syncfusion:TreeGridRowHeaderCell">
       <Setter Property="Template">
           <Setter.Value>
               <ControlTemplate TargetType="syncfusion:TreeGridRowHeaderCell">
                   <Border x:Name="PART_RowHeaderCellBorder"
                   BorderBrush="{TemplateBinding BorderBrush}"
                   BorderThickness="{TemplateBinding BorderThickness}">
                       <Grid>
                              <TextBlock HorizontalAlignment="Center"
                                 VerticalAlignment="Center"                         
                                 Text="{Binding RowIndex,
                                 RelativeSource={RelativeSource TemplatedParent},
                                 ConverterParameter =treeGridComponents, 
                                 Converter={StaticResource rowIndexValueconverter}}"
                                 TextAlignment="Center"/>
                       </Grid>
                   </Border>
               </ControlTemplate>
           </Setter.Value>
       </Setter>
   </Style>
</Page.Resources>

RowIndexValueConverter.CS:

public class RowIndexValueConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, string language)
   {
       var currentPage = MainPage.CurrentPage;
       var treeGrid = (currentPage.Content as Grid).Children[0] as SfTreeGrid;
       int firstRowIndex = treeGrid.GetFirstDataRowIndex();
       int lastRowIndex = treeGrid.GetLastDataRowIndex();
       if (value == null || (int)value > lastRowIndex || (int)value < firstRowIndex)
           return string.Empty;
       return (int)value - firstRowIndex + 1;
   }
 
   public object ConvertBack(object value, Type targetType, object parameter, string language)
   {
       throw new NotImplementedException();
   }
}

MainPage.XAML.CS:

public sealed partial class MainPage : Page
{
   public MainPage()
   {
       this.InitializeComponent();
       CurrentPage = this;
   }
   public static MainPage CurrentPage;
}

Here I have attached the sample with the above suggestion, please have a look at this.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfTreeGridDemo1600759656