How to create custom drop-down cell

ReoGrid provides the Cell Body feature, a way to create custom cell type. There is a built-in cell body type called DropdownCell which provides the ability to make user-friendly customize drop-down cells. Learn more about  Built-in cell types.

To create a custom drop-down cell, make your own class inherited from the  DropdownCell class, which is included in unvell.ReoGrid.CellTypes namespace.

Drop-down interface

The DropdownCell class provides the simplest way to create a user-customized drop-down cell, which shows an arrow button at the right side of the cell, and receives user actions to show and hide the drop-down panel.

186

By using DropdownCell class, only the following things need to do:

  • Set any control into the drop-down panel
  • Set selected items from the control into a cell as data

DropdownCell provides a property named DropdownControl that is used to specify the control displayed inside the drop-down panel.

Create drop-down ListView

This example shows how to create a drop-down cell that shows standard .NET ListView control. Create a class named ListViewDropdownCell and make it inherit from the DropdownCell class.

class ListViewDropdownCell : DropdownCell
{
  private ListView listView;

  public ListViewDropdownCell()
  {
    // Initial code goes here
  }
}

In the constructor method,  initialize the ListView and set it into DropdownControl property.

public ListViewDropdownCell()
  {
    // initialize listview
    this.listView = new ListView()
    {
      BorderStyle = System.Windows.Forms.BorderStyle.None,
      View = View.Details,
      FullRowSelect = true,
    };

    // set listview as drop-down control
    this.DropdownControl = this.listView;
  }
}

Use the following code to add this ListViewDropdownCell instance into ReoGrid worksheet:

worksheet["B2"] = new ListViewDropdownCell();

tip_sYou can also use Body property of cell instance to change the cell body object. Set Body property to null will remove the cell body from cell.

Run the program and click on the drop-down button, an empty panel will be  displayed, where includes the ListView control.

187

To show selection items in the list view, use the following code to add items.

// add listview columns
this.listView.Columns.Add("Column 1", 120);
this.listView.Columns.Add("Column 2", 120);

// add groups and items
var group1 = listView.Groups.Add("grp1", "Group 1");
listView.Items.Add(new ListViewItem(new string[] { "Item 1.1", "Subitem 1.1" }) { Group = group1 });
listView.Items.Add(new ListViewItem(new string[] { "Item 1.2", "Subitem 1.2" }) { Group = group1 });
listView.Items.Add(new ListViewItem(new string[] { "Item 1.3", "Subitem 1.3" }) { Group = group1 });

var group2 = listView.Groups.Add("grp2", "Group 2");
listView.Items.Add(new ListViewItem(new string[] { "Item 2.1", "Subitem 2.1" }) { Group = group2 });
listView.Items.Add(new ListViewItem(new string[] { "Item 2.2", "Subitem 2.2" }) { Group = group2 });
listView.Items.Add(new ListViewItem(new string[] { "Item 2.3", "Subitem 2.3" }) { Group = group2 });

Run the program again:

188

As you can see, the ListView control with dummy items has been displayed, but the width of the drop-down panel is too small, to resolve this, set the MinimumDropdownWidth property of the DropdownCell instance:

// enlarge the dropdown panel
this.MinimumDropdownWidth = 300;

189

Receive selected items

By handling the Click event of the list view to set selected item:

// add click event handler
this.listView.Click += listView_Click;

Event handler:

void listView_Click(object sender, EventArgs e)
{
  if (this.listView.SelectedItems.Count > 0)
  {
    // set first selected item as cell's data
    this.Cell.Data = this.listView.SelectedItems[0].Text;

    this.PullUp();  // pull up the drop-down panel to finish editing
  }
}

Run program, try select items from drop-down list, the selected item will be shown inside the cell.

190

Finally, set borders and initial text for the drop-down cell:

worksheet["B2"] = "Choose...";
worksheet["B2"] = new ListViewDropdownCell();
worksheet.Ranges["B2"].BorderOutline = BorderStyle.GraySolid;

Final result

Before edit:

192

Select item:

193

After edit:

194

The full source code and demo available in the demo-project which is included in the release package from the download page.

Spreadsheet in drop-down cell

If you are considering to implement a feature that allows end-user to select content from another sub-spreadsheet, you may also consider putting another ReoGrid instance into the drop-down panel.

See Also