We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Best way for implemetn Implement row number column for SfDataGrid

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?


9 Replies

JG Jai Ganesh S Syncfusion Team September 8, 2015 03:03 AM UTC

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



VL Vladimir September 8, 2015 03:55 PM UTC

Thanks you!

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


AN Ashok N Syncfusion Team September 9, 2015 12:13 PM UTC

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




VL Vladimir September 23, 2015 11:29 AM UTC

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.



JN Jayaleshwari N Syncfusion Team September 24, 2015 05:41 AM UTC

Hi Vladimir,

Thank you for your update.

Please let us know, if you need further assistance.

Regards,

Jayaleshwari N.


PA Pawel replied to Jai Ganesh S August 21, 2018 06:28 PM UTC

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?
;)


DY Deivaselvan Y Syncfusion Team August 22, 2018 03:57 PM UTC

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 



PA Pawel August 22, 2018 05:36 PM UTC

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


DY Deivaselvan Y Syncfusion Team August 22, 2018 05:45 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon