Once again I’m sharing some tips and tricks for the Telerik RadGridView control; this time for your combobox editors inside the grid.  The RadGridView makes it very easy to add combobox columns to your grids, and with these tips you can get an even smoother user experience.

For these examples, I’m using a sample form that uses some GridViewComboBoxColumns for the day of week and month fields.

Combobox dropdowns are great, but what if you want your users to be able to clear the field, and even assign a null value that you will store in your database?  If the combobox datasource is a list generated elsewhere, you may want to add the blank value when the editor is initialized.

To add the blank item, handle the CellEditorInitialized event of the RadGridView.  At this point, the combobox item list is already created, and a blank item can be inserted.  Since the grid re-uses the editors, we first check that a blank item does not already exist.  Here the blank item is inserted as the first item in the list.

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
     if ((e.ColumnIndex == 0) && 
     (!(radGridView1.ActiveEditor as RadComboBoxEditor).Items.Any(
         i => i.Text == String.Empty)))
     (radGridView1.ActiveEditor as RadComboBoxEditor).Items.Insert(
         0, new RadComboBoxItem(String.Empty, null));

}

Now the user can choose the blank item, which will clear the cell and set the underlying data to null.  Here the top row Day field has been cleared, and you can see the blank option in the dropdown.

The combobox can also be made more user-friendly by resizing the dropdown to always show all the items, as opposed to being bound to the size of the parent cell.  If the control focus is on the column when the dropdown is opened, users may find the list too small to see the items.

The dropdown size can be managed from inside the same CellEditorInitialized handler as before.  The viewport of the ListBox has a DesiredSize property which can be used to set the dropdown width.  Here we’re also accounting for the width of the scrollbar, and setting to the calculated width only if it is larger than the cell’s width.

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    if (e.ColumnIndex == 1)
    {
        RadComboBoxEditor rcbe = radGridView1.ActiveEditor as RadComboBoxEditor;
        int _desiredWidth = (int)rcbe.ListBoxElement.Viewport.DesiredSize.Width;
        _desiredWidth += (rcbe.ListBoxElement.ScrollThickness);
        rcbe.DropDownWidth = Math.Max(rcbe.Size.Width, _desiredWidth);
    }
}

Now regardless of the width of the column, the dropdown will size to show the list items.

Actually, from inside the CellEditorInitialized handler, you can manipulate all the properties of the combobox just as if it were an independent control.  Any special formatting, colors, or images can be added right there as well!

As always, you can find more help with Telerik’s RadGridView for WinForms on Telerik’s support site, or check out Falafel’s own training classes and consulting services .