Alternate row color

[Javier Gonzalez de Aragon]

Is it possible to have alternate row colors in listview?

Thanks,

Javier Gonzalez de Aragon

[Richard Slade]

Hola Javier, 

The RadListView doesn't have the property for alternating row colour, but you can easily do it using the VisualItemFormatting event. 
For exmaple, using the default view type. 

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using Telerik.WinControls;
using Telerik.WinControls.UI;

namespace RadControlsWinFormsApp1
{
    public partial class Form1 : Form
    {
        int _i = 0;

        public Form1()
        {
            InitializeComponent();

            List<Item> items = new List<Item>();
            int i = 0;
            while (i <= 100)
            {
                items.Add(new Item(i, "Item " + i.ToString()));
                i++;
            }

            this.radListView1.DataSource = items;
            this.radListView1.DisplayMember = "Name";
            this.radListView1.ValueMember = "Id";

            this.radListView1.VisualItemCreating += new ListViewVisualItemCreatingEventHandler(radListView1_VisualItemCreating);
            this.radListView1.VisualItemFormatting += new ListViewVisualItemEventHandler(radListView1_VisualItemFormatting);
        }

        void radListView1_VisualItemCreating(object sender, ListViewVisualItemCreatingEventArgs e)
        {
            e.VisualItem.Tag = _i;
            _i++;
        }


        void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
        {
            if (Convert.ToInt32(e.VisualItem.Tag) % 2 == 0)
            {
                e.VisualItem.NumberOfColors = 1;
                e.VisualItem.BackColor = Color.LightBlue;
                e.VisualItem.DrawFill = true;
            }
            else
            {
                e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty);
                e.VisualItem.ResetValue(LightVisualElement.BackColorProperty);
                e.VisualItem.ResetValue(LightVisualElement.DrawFillProperty);
            }
        }



        public class Item
        {
            public Item()
            { }

            public Item(int id, string name)
            {
                Id = id;
                Name = name;
            }

            public int Id
            { get; set; }

            public string Name
            { get; set; }

        }

    }
}

Hope that helps, but let me know if you have any questions
Richard

[Ivan Todorov]

Hello Javier,

This feature is not supported in RadListView out of the box but as Richard suggested, you can easily implement this using the VisualItemFormatting event. However, setting the Tag property of the visual item in the VisualItemCreating event is not recommended because the virtualization engine of RadListView stores the visual items in a cache and reuses them when scrolling up and down. This means that at some point the tag of the visual item might not be consistent with its place and you will get consecutive items with the same color.

The best approach here is to use the Id property of the bound objects:

public Form51()
{
    InitializeComponent();

    //fill items

    this.radListView1.DataSource = items;
    this.radListView1.DisplayMember = "Name";
    this.radListView1.ValueMember = "Id";
    this.radListView1.VisualItemFormatting += new ListViewVisualItemEventHandler(radListView1_VisualItemFormatting);
}

void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    Item item = e.VisualItem.Data.DataBoundItem as Item;
    if (item.Id % 2 == 0)
    {
        e.VisualItem.NumberOfColors = 1;
        e.VisualItem.BackColor = Color.LightBlue;
        e.VisualItem.DrawFill = true;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty);
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty);
        e.VisualItem.ResetValue(LightVisualElement.DrawFillProperty);
    }
}

Do not hesitate to ask if you have any additional questions.

Regards,
Ivan Todorov
the Telerik team

[Richard Slade]

Ivan, 

This does however mean that one needs to have a data source that contains a unique identity property though. If this is not available in the data source, perhaps the tag may be used, or another similar property. 
Regards, 
Richard

[Ivan Todorov]

Hello Richard,

You can use the Tag property of the ListViewDataItem if you are not using a datasource or if you are using a datasource which does not have a property to indicate the order of the items.

public Form1()
{
    InitializeComponent();
    for (int i = 0; i < 100; i++)
    {
        this.radListView1.Items.Add(new ListViewDataItem("List View Item " + i) { Tag = i });
    }
    this.radListView1.VisualItemFormatting += new ListViewVisualItemEventHandler(radListView1_VisualItemFormatting);
}

void radListView1_VisualItemFormatting(object sender, ListViewVisualItemEventArgs e)
{
    if ((int)e.VisualItem.Data.Tag % 2 == 0)
    {
        e.VisualItem.NumberOfColors = 1;
        e.VisualItem.BackColor = Color.LightBlue;
        e.VisualItem.DrawFill = true;
    }
    else
    {
        e.VisualItem.ResetValue(LightVisualElement.NumberOfColorsProperty);
        e.VisualItem.ResetValue(LightVisualElement.BackColorProperty);
        e.VisualItem.ResetValue(LightVisualElement.DrawFillProperty);
    }
}

In case you are using a datasource and you do not have a field which indicates the order of the items, you can use the ItemDataBound event to set the Tag property of the newly created ListViewDataItems.

The difference between the approach above and using the Tag property of the visual items is that the data items stay in the same order (except when sorting or filtering is applied) whilst the visual items are cached after they were created and a single visual item might get attached to different data items during its lifecycle. When a visual item is being synchronized with its data item, the VisualItemFormatting event is fired. Therefore, you can use this event to add custom synchronization logic to the visual items.

I hope you find this useful. Feel free to ask if you have any additional questions.

Kind regards,
Ivan Todorov
the Telerik team

[Javier Gonzalez de Aragon]

Thanks for the solution. It's working now. I have another question. I populate my Listview using the datasource property and it takes about 10 seconds to populate 5K+ elements. The data source is a SQL Server stored procedure that executes in less than a second. Is there any way to speed up this process?

Thanks

[Richard Slade]

Hello Javier, 

With a simple object source, I bind 5000 items almost instantly. If you are adding single items to the RadListView, then you can increase performance significantly by using 

this.radListView1.Items.BeginUpdate();
// add items
this.radListView1.Items.EndUpdate();

however, in bound mode, just binding it should be fine. 
Please can you post a sample that replicates the issue of taking so long to bind and I'll do my best to help
Thanks
Richard