uwpdatagridsyncfusiontreegrid

How to display row index not include stackedHeader in Syncfusion Treegrid


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?


Solution

  • 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