Best way for implemetn Implement row number column for SfDataGrid

[Vladimir]

Hello.

In SfDataGrid i need have column with row number.

I tried to use DataTemplate vith IValueConverter, but it not update other values in column on add/remove/sort. So when i add row then i have 2 rows with same number etc.

It sounds like a pretty basic feature, and until I do not complicate this too much, I want to ask you, what is the best way to implement this?

[Jai Ganesh S]

Hi Vladimir,

Thank you for using Syncfusion products.

We have analyzed your query. You can show the row number in RowHeader by write the style for GridRowHeaderCell and bind the RowIndex.

Code Example [XAML]:

<Style TargetType="Syncfusion:GridRowHeaderCell">

            <Setter Property="Background" Value="Transparent" />

            <Setter Property="BorderBrush" Value="Gray" />

            <Setter Property="BorderThickness" Value="0,0,1,1" />

            <Setter Property="Padding" Value="0,0,0,0" />

            <Setter Property="FontFamily" Value=" Segoe UI" />

            <Setter Property="FontSize" Value="12" />

            <Setter Property="FocusVisualStyle" Value="{x:Null}" />

            <Setter Property="IsTabStop" Value="False" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Syncfusion:GridRowHeaderCell">

                        <Border x:Name="PART_RowHeaderCellBorder"

                            Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}">

                            <Grid>

                                <TextBlock Text="{Binding RowIndex, RelativeSource={RelativeSource TemplatedParent}}"/>

                            </Grid>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

We have also prepared the sample based on this and you can download the sample from the below location,

Sample: http://www.syncfusion.com/downloads/support/directtrac/143673/ze/SfGridDemo652568442

Please let us know if you need further assistance.

Thank you,

Jai Ganesh S

[Vladimir]

Thanks you!

Could you please tell about processing StackedColumns? For erach StackedColumns RowIngex gets +1.

[Ashok N]

Hi Vladimir,

Thank you for your update.

StackedHeaderRows collection has the definition for StackedHeaderRow. A Stacked Header Row is viewed as a set of Stacked Columns where each StackedColumn contains a number of Child Columns. Each Stacked Header Row has different RowIndex in SfDataGrid. Please refer the below UG link to get more details regarding StackedHeaderRows in SfDataGrid

UG link: http://docs.syncfusion.com/wpf/sfdatagrid/columns#frozen-columns

Please let us know if you require any further assistance.

Thanks,
Ashok

[Vladimir]

Yes, I have read this documentation, thank you. :)

I assumed that there is some existing solution, such as an extra field names like DataRowIndex omewhere or some method for this need somewhere in helpers.

Now i solve this with IMultiValueConverter

Template looks like:

                <ControlTemplate TargetType="syncfusion:GridRowHeaderCell">
                    <Border x:Name="PART_RowHeaderCellBorder"
                            Background="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}"
                            BorderBrush="{Binding BorderBrush, RelativeSource={RelativeSource TemplatedParent}}"
                            BorderThickness="{Binding BorderThickness, RelativeSource={RelativeSource TemplatedParent}}">
                        <Grid>
                            <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">
                                <TextBlock.Text>
                                    <MultiBinding Converter="{StaticResource RowToIndexConverter}">
                                        <Binding RelativeSource="{RelativeSource Mode=FindAncestor, AncestorType=sfGrid:SfDataGrid}" />
                                        <Binding Path="RowIndex" RelativeSource="{RelativeSource Mode=TemplatedParent}" />
                                    </MultiBinding>
                                </TextBlock.Text>
                            </TextBlock>
                        </Grid>
                    </Border>
                </ControlTemplate>

And converter looks like:

    public class RowToIndexConverter : IMultiValueConverter

    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            SfDataGrid sfdatgrid = values.Single(v => v is SfDataGrid) as SfDataGrid;
            int rowIndex = (int) values.Single(v => v is int);
            object recordRow = sfdatgrid.GetRecordAtRowIndex(rowIndex);
            // Only for record rows
            if (recordRow != null)
            {
                rowIndex = rowIndex - sfdatgrid.StackedHeaderRows.Count;
                return rowIndex.ToString();
            }
            return DependencyProperty.UnsetValue;
        }
        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

This works fine and smells acceptable for me.

[Jayaleshwari N]

Hi Vladimir,

Thank you for your update.

Please let us know, if you need further assistance.

Regards,

Jayaleshwari N.

[Pawel]

Hi Vladimir,

Thank you for using Syncfusion products.

We have analyzed your query. You can show the row number in RowHeader by write the style for GridRowHeaderCell and bind the RowIndex.

Code Example [XAML]:

<Style TargetType="Syncfusion:GridRowHeaderCell">

            <Setter Property="Background" Value="Transparent" />

            <Setter Property="BorderBrush" Value="Gray" />

            <Setter Property="BorderThickness" Value="0,0,1,1" />

            <Setter Property="Padding" Value="0,0,0,0" />

            <Setter Property="FontFamily" Value=" Segoe UI" />

            <Setter Property="FontSize" Value="12" />

            <Setter Property="FocusVisualStyle" Value="{x:Null}" />

            <Setter Property="IsTabStop" Value="False" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="Syncfusion:GridRowHeaderCell">

                        <Border x:Name="PART_RowHeaderCellBorder"

                            Background="{TemplateBinding Background}"

                            BorderBrush="{TemplateBinding BorderBrush}"

                            BorderThickness="{TemplateBinding BorderThickness}">

                            <Grid>

                                <TextBlock Text="{Binding RowIndex, RelativeSource={RelativeSource TemplatedParent}}"/>

                            </Grid>

                        </Border>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

We have also prepared the sample based on this and you can download the sample from the below location,

Sample: http://www.syncfusion.com/downloads/support/directtrac/143673/ze/SfGridDemo652568442

Please let us know if you need further assistance.

Thank you,

Jai Ganesh S

Hello,

I have a question. How add text to header to your sample?

;)

[Deivaselvan Y]

Hi Pawel,

Thank you for contacting Syncfusion support.

You can add Text to RowHeaderIndentCell in HeaderRow by writing style for GridRowHeaderIndentCell as like below code snippet 

<Style TargetType="Syncfusion:GridRowHeaderIndentCell">  

     <Setter Property="Template">  

          <Setter.Value>  

               <ControlTemplate TargetType="Syncfusion:GridRowHeaderIndentCell">  

                   <Border Background="{TemplateBinding Background}"  

                           BorderBrush="{TemplateBinding BorderBrush}"  

                           BorderThickness="{TemplateBinding BorderThickness}" >  

                        <Grid>  

                            <TextBlock Text="{Binding RowHeaderText}"/>  

                        </Grid>  

                   </Border>  

              </ControlTemplate>  

          </Setter.Value>  

     </Setter>  

</Style>  

Please find sample for the same from the below link 
http://www.syncfusion.com/downloads/support/forum/120149/ze/SfGridDemo-148101133 

Please let me know, if you have any concern. 

Regards,
Deivaselvan 

[Pawel]

Hello Deivaselvan

Thank you for your answer. Your sample was very helpful. Thank you for your help ;)

[Deivaselvan Y]

Hi Pawel,

We are happy to know that the given sample meet your requirement. Please let us know if you require any further assistance.

Regards,
Deivaselvan