Using FlexGrid as an Advanced ListBox

This brief post shows how to create a ListBox type control which mimics the one used in Microsoft Access.

To create this we will use the ComponentOne FlexGrid control. Its flexible, unbound framework allows us to easily manipulate a grid of data however we want. We put the FlexGrid inside a C1NavBar control to give us the complete Office look and feel.

By default, the FlexGrid is setup with 50 rows (1 fixed) and 10 columns (1 fixed). Let's change this to 0 rows (0 fixed), and 1 column (0 fixed). We also set the ExtendLastColumn to true and set a few other properties. This basically gives us a single column grid we can fill with items, and the column will fill the size of the control. Cols.Count = 1 Cols.Fixed = 0 Rows.Count = 0 Rows.Fixed = 0 AllowEditing = False ExtendLastColumn = True FocusRect = None SelectionMode = Cell Next, we can define our Style settings at design-time as well. Open the Styles collection editor from the Styles property. Set the following properties for the Normal and Highlight styles: Normal Style Border.Style = None ImageSpacing = 8 Margins.Left = 8 Highlight Style BackColor = 255, 171, 63 ForeColor = Black or ControlText For this example we will add items in code using the AddItem method.

c1FlexGrid1.AddItem("Categories");
c1FlexGrid1.AddItem("Customers");
c1FlexGrid1.AddItem("Employees");
c1FlexGrid1.AddItem("Orders");
c1FlexGrid1.AddItem("Products");
c1FlexGrid1.AddItem("Shippers");
c1FlexGrid1.AddItem("Suppliers");
c1FlexGrid1.AddItem("Territories");

Or we could bind to a List of our custom object (Tables).

List items = new List();
items.Add(new Tables("Categories"));
items.Add(new Tables("Customers"));
items.Add(new Tables("Employees"));
items.Add(new Tables("Orders"));
items.Add(new Tables("Products"));
items.Add(new Tables("Shippers"));
items.Add(new Tables("Suppliers"));
items.Add(new Tables("Territories"));
c1FlexGrid1.DataSource = items;

To display an image, we've added an image resource we can display on each row by simply calling the SetCellImage method.

for (int i = 0; i < c1FlexGrid1.Rows.Count; i  )
{
    c1FlexGrid1.SetCellImage(i, 0, Properties.Resources.Table);
}

This is what we get.

To actually use this as a selectable list we need to listen for when the user changes selection. The best FlexGrid event to use here is the SelChange event, and use the FlexGrid's Row property to determine the selected index.

Why use FlexGrid for this?

The ListBox control provided by Microsoft does not easily allow you to display images. The other alternative, ListView, does not allow easy data-binding. With FlexGrid you have flexible options when it comes to loading your items, whether you want to do it at design-time, added through code manually, or even bound to a list of items. Displaying images is very simple and you have many more options available. Perhaps you only want to display an image on some items of various sizes. You aren't restricted to use an ImageList control. FlexGrid also supports TreeView functionalities so you can easily create hierarchical lists. Plus, you can unlock a number of other features of FlexGrid quite easily such as moving and reordering rows at runtime, sorting, filtering, and even printing if for some reason you need to do that. These features come by just triggering a few properties or method calls; namely AllowDragging, AllowSorting and AllowFiltering (you will want a column header visible) and the Print() method.

In another article, I demonstrate how to how to create a drop-down CheckedListBox in a C1FlexGrid for editing and formatting lists.