How to display the row number?

[Wagner]

Hi,

I have a requirement to display the row number (index of the binded ObservableCollection) similar to how Excel displays rows.  How can I accomplish this behavior?  I looked into different ways, but I didn't have much success.

Thanks in advance,

Wagner

[Pavel Pavlov]

Hello wdosanjos,

Please use the approach demonstrated in this online example.
It is for RadGridView for Silverlight , but the same approach may be used for WPF as both grids share a common codebase and the same API.

Best wishes,
Pavel Pavlov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Wagner]

Thanks for the link.  The sample displays the index on the grid and I needed the index on the ItemSource collection, but I was able to update the code (below) to provide what I needed.

            <telerik:RadGridView.Columns>
                <telerik:GridViewSelectColumn/>
                <local:RowNumberColumn Header="Line#">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:CountFunction Caption="Count: "/>
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </local:RowNumberColumn>

    public class RowNumberColumn : Telerik.Windows.Controls.GridViewDataColumn
    {
        public override System.Windows.FrameworkElement CreateCellElement(Telerik.Windows.Controls.GridView.GridViewCell cell, object dataItem)
        {
            TextBlock textBlock = cell.Content as TextBlock;

            if (textBlock == null)
            {
                textBlock = new TextBlock();
            }

            //textBlock.Text = (this.DataControl.Items.IndexOf(dataItem) + 1).ToString();
            textBlock.Text = ((this.DataControl.ItemsSource as IList).IndexOf(dataItem) + 1).ToString();

            return textBlock;
        }
    }

Thanks,

Wagner

[Espen Berglund]

This index isn't updated when the underlying collection gets an item deleted. Is it possible to achieve that (silverlight 4)?

[Milan]

Hi Espen Berglund,

You can create a more sophisticated control to plug-in into the RowNumberConlumn which will updated automatically. For example:

public class RowNumberColumn : Telerik.Windows.Controls.GridViewDataColumn
{
    public override System.Windows.FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
    {
        var numberPresenter = cell.Content as RowNumberPresenter;

        if (numberPresenter == null)
        {
            numberPresenter = new RowNumberPresenter() { ParentControl = this.DataControl };
        }

        return numberPresenter;
    }
}

public partial class RowNumberPresenter : UserControl
    {
        private GridViewDataControl parentControl;

        public GridViewDataControl ParentControl
        {
            get
            {
                return this.parentControl;
            }

            set
            {
                if (this.parentControl != null)
                {
                    this.parentControl.Items.CollectionChanged -=
                        new NotifyCollectionChangedEventHandler(Items_CollectionChanged);
                }

                this.parentControl = value;

                if (this.parentControl != null)
                {
                    this.parentControl.Items.CollectionChanged +=
                        new NotifyCollectionChangedEventHandler(Items_CollectionChanged);
                }
            }
        }

        void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
        {
            this.rowNumberText.Text = (this.ParentControl.Items.IndexOf(this.DataContext) + 1).ToString();
        }

        public RowNumberPresenter()
        {
            InitializeComponent();
        }
    }

<UserControl x:Class="GridView.TestApplication.RowNumberPresenter"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          >
    <Grid>
        <TextBlock x:Name="rowNumberText"/>
    </Grid>
</UserControl>

All the best,
Milan
the Telerik team

[Grr]

This does not seem to be a good solution.

When I insert a line or delete a line the row index just completely screws up. Is there some way we can override onDraw functionality and set the text to its index?

[TheFlo]

Hi All,

Based on Milan's example, I implemented a row number column based on the number of rows in the full grid or the number of rows in a group should you choose to use column grouping.
Here is the code :

public class RowNumberGridViewColumn : GridViewColumn
{
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem)
    {
        var numberPresenter = cell.Content as RowNumberPresenter;
        if (numberPresenter == null)
            numberPresenter = new RowNumberPresenter(this.DataControl, dataItem);
        return numberPresenter;
    }
}

public class RowNumberPresenter : TextBlock
{
    private GridViewDataControl _parentControl;
    public GridViewDataControl ParentControl
    {
        get { return this._parentControl; }
        private set
        {
            if (this._parentControl != null)
                this._parentControl.Items.CollectionChanged -= new NotifyCollectionChangedEventHandler(Items_CollectionChanged);
            this._parentControl = value;
            if (this._parentControl != null)
                this._parentControl.Items.CollectionChanged += new NotifyCollectionChangedEventHandler(Items_CollectionChanged);
        }
    }

    public RowNumberPresenter(GridViewDataControl parentControl, object dataItem)
        : base()
    {
        ParentControl = parentControl;
        SetText(dataItem);
    }

    private void Items_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        SetText(this.DataContext);
    }

    private void SetText(object dataItem)
    {
        // in case of grouping, this code is used to display the row number based on the number of items in the grouping
        if (this.ParentControl.IsGrouping)
        {
            var group = this.ParentControl.FindGroupByItem(dataItem);
            if (group != null)
            {
                var items = group.Items as ReadOnlyObservableCollection<object>;
                if (items != null)
                    this.Text = (items.IndexOf(dataItem) + 1).ToString();
            }
        }
        if (string.IsNullOrWhiteSpace(this.Text))
            this.Text = (this.ParentControl.Items.IndexOf(dataItem) + 1).ToString();
    }
}

Hope this help,

TheFlo

[John]

Hi - can't get this solution to work in WPF. Of course mine is a specific application so my namespace is different. - in my case it is PDDashboard - and the RadGridView is in a User Control called UserControl1 -

In UserControl1.xaml there is xmlsn:custom="clr-namespace:PDDashboard"

and in my telerik:RadGridView.Columns there is custom:MyColumn

and I made a class in the Project and called it MyColumn

However I get "The name MyColumn does not exist in the namespace....

whether or not I include the clr-namespace in the xaml file.

What gives? Do I need to add a reference or something in VS?

I will attach code if need be but it seems as if I have spelled it all out...no?

[Saykor]

Hi all,
Good to know:

The example for MyColumn.cs in http://demos.telerik.com/silverlight/#GridView/RowNumber not work if I want to add new item.
Allow user to insert new items and you will see that the numbers is not change.

The solution provided from TheFlo is working on insert new item if we remove the line: 
if (string.IsNullOrWhiteSpace(this.Text))

But we lost item number if user sort a column. Fast fix:

if (numberPresenter == null)
                numberPresenter = new RowNumberPresenter(this.DataControl, dataItem);
            else
                numberPresenter.SetText(dataItem);

To reset TextBox.Text value on column sort

Regards,
Saykor