Grouping ListView items dynamically

Description:

Grouping ListView items dynamically can be confusing at first, the reason is that you can't simply "tell" the item what's his group's header is. You have to find the proper group from the group-collection and add the item to that existing group. And if no matching group is found, you have to create a new group. Okay, let's get started:

I'm going to skip form-designing. The form that I'm going to use for demonstration looks like this:

Drop-down list items:

Size: Small, Medium, Large
Color: Red, Yellow, Green, Blue, Violet
Group: By name, By size, By color

Our grouping function:

private void GroupItem(ListViewItem item)

{

// This flag will tell us if proper group already exists

bool group_exists = false;

// Check each group if it fits to the item

foreach (ListViewGroup group in this.listView.Groups)

{

// Compare group's header to selected subitem's text

if (group.Header == item.SubItems[this.groupBox.SelectedIndex].Text)

{

// Add item to the group.

// Alternative is: group.Items.Add(item);

item.Group = group;

group_exists = true;

break;

}

// Create new group if no proper group was found

if (!group_exists)

{

// Create group and specify its header by

// getting selected subitem's text

ListViewGroup group = new ListViewGroup(item.SubItems[this.groupBox.SelectedIndex].Text);

// We need to add the group to the ListView first

this.listView.Groups.Add(group);

item.Group = group;

}

Make sure some items are selected from the start:

this.sizeBox.SelectedIndex = 0;

this.colorBox.SelectedIndex = 0;

this.groupBox.SelectedIndex = 0;

Add an event handler to the SelectedIndexChanged event, which occurs when different type of grouping is selected :

this.groupBox.SelectedIndexChanged += (object o, EventArgs e) =>

{

// Clear group collection

this.listView.Groups.Clear();

// Loop through all existing items to group them properly

foreach (ListViewItem item in this.listView.Items)

{

GroupItem(item);

}

};

Event handler for a click on the "Add" button:

this.add.Click += (object o, EventArgs e) =>

{

// Display messagebox if textbox with name is empty

if (this.nameBox.Text == "")

{

MessageBox.Show("No name was specified.", "Name missing!",

MessageBoxButtons.OK, MessageBoxIcon.Error);

}

else

{

// ListViewItem has a useful constructor that

// allows us to add collection of subitems

// in form of a string array

ListViewItem item = new ListViewItem(new string[] {

this.nameBox.Text,

// Unbox the selected item by using a cast

(string)this.sizeBox.SelectedItem,

(string)this.colorBox.SelectedItem

});

// Call our item-grouping function

GroupItem(item);

// Finally, add the item to the ListView

this.listView.Items.Add(item);

}

};

For more complex grouping use enumeration (for types of grouping) and a switch statement that assigns proper checking actions to a boolean delegate. Use the boolean delegate in the if statement that checks if existing group matches the condition.

For example, let's group items either by first letter or by name lenght:

Our delegate and its variable:

delegate bool GroupMatch(ListViewItem item, ListViewGroup group);

GroupMatch groupMatch;

Enumeration and its variable with "ByLetter" as initial value:

enum Grouping { ByLetter, ByLenght };

Grouping grouping = Grouping.ByLetter;

Switch statement that assigns proper checking actions to our delegate variable

switch (grouping)

{

case Grouping.ByLetter:

groupMatch = (ListViewItem item, ListViewGroup group) =>

{

return item.Text.ToUpper()[0] == group.Header[0];

};

break;

case Grouping.ByLenght:

groupMatch = (ListViewItem item, ListViewGroup group) =>

{

return item.Text.Length == group.Header.Length;

};

break;

}

The body of our new GroupItem function:

bool group_exists = false;

foreach (ListViewGroup group in this.listView.Groups)

{

if (groupMatch(item, group))

{

item.Group = group;

group_exists = true;

break;

}

if (!group_exists)

{

ListViewGroup group;

switch (grouping)

{

case Grouping.ByLetter:

group = new ListViewGroup(item.Name.ToUpper()[0].ToString());

break;

case Grouping.ByLenght:

group = new ListViewGroup(item.Name.Length.ToString());

break;

default:

// even though this will never execute

// we have add default case, otherwise

// the program won't compile, because group

// supposedly isn't assigned in all cases

return;

}

this.listView.Groups.Add(group);

item.Group = group;

}

If you want to sort items by a value that isn't in the collection of subitems, one way to do it is to assign the value to ListViewItem.Tag. Tag's type is Sytem.Object (keyword object), which means that you can add whole collection of data to the item without adding any subitems. But be sure to box and unbox your data properly.

Thanks for reading, code safely!

7 Comments

Join the conversation! Your thoughts help the community grow.

robert Miranda12y ago
if i need to group it with continent and country how to make it?
robert Miranda12y ago
how to make it for multiple groping?
lan lan13y ago
thankz bro help me a lot
Nathan Jansen13y ago
I am sorry, i am naab! I got it working. :D?
Nathan Jansen13y agoedited
if (group.Header == item.SubItems[this.groupBox.SelectedIndex].Text) Hi! What does 'groupBox' refer to? there is no such item. Sorry for english. Thanks to many!
Anand Khatri14y ago
Thnaks a lot
sam15y ago
nice article.. may be this can be helpful too, http://winform-net.blogspot.com/2011/06/automatic-listview-grouping.html