Controls / GridView / Visual Elements / Columns / Column Types

New to Telerik UI for WinForms? Download free 30-day trial

GridViewComboBoxColumn

GridViewComboBoxColumn displays a set of predefined text values in a drop down list. This column type is typically used to provide a lookup into some set of relatively static values. To use GridViewComboBoxColumn:

  • Set the DataSource property to the data source that contains possible values to choose from.

  • Set the DisplayMember property to the column of the DataSource that should be displayed in the drop down list.

  • Set the ValueMember property to the column of the DataSource that should be used to update the cell within the grid represented by the FieldName property.

Values will display in the column only if the value in FieldName is within the range of values provided by the ValueMember field values.

Other important properties for GridViewComboBoxColumn are:

Property Description
FilterMode It has two values and determine whether the column will be filtered according to the DisplayMember or the ValueMember.
DisplayMemberSort This property will determine whether the column will be sorted by the column's DisplayMember or ValueMember. Setting it to true will sort by DisplayMember, otherwise the sorting will be executed according to the ValueMember.
SyncSelectionWithText Gets a value that indicates the SelectedIndex will be synchronized with text in Editable area.
AutoCompleteMode Specifies the mode for the automatic completion feature used in the RadDropDownListEditor.
DropDownStyle Gets or sets a value specifying the style of the RadDropDownListEditor.
HasLookupValue Gets a value indicating whether this column has look-up value.

By default, when sorting is executed on GridViewComboBoxColumn it is sorted according to its ValueMember setting. However, if you need to perform the sorting according to the DisplayMember instead, you should set the DisplayMemberSort property of the column.

The useful methods for GridViewComboBoxColumn are:

Method Description
GetLookupValue Returns the look-up value for the specified cell value.
GetDefaultEditorType Returns the default editor type.
GetDefaultEditor Returns the default editor.

Figure 1: GridViewComboBoxColumn

WinForms RadGridView GridViewComboBoxColumn

Adding and binding GridViewComboBoxColumn

GridViewComboBoxColumn supplierColumn = new GridViewComboBoxColumn();
supplierColumn.Name = "SupplierColumn";
supplierColumn.HeaderText = "Supplier";
supplierColumn.DataSource = this.suppliersBindingSource;
supplierColumn.ValueMember = "SupplierID";
supplierColumn.DisplayMember = "ContactName";
supplierColumn.FieldName = "SupplierID";
supplierColumn.Width = 200;
this.radGridView1.Columns.Add(supplierColumn);

If you want to set initial values, you should match the GridViewComboBoxColumn to a column which has appropriate values in it. To do this, you should set the FieldName of the GridViewComboBoxColumn to be the same as the name of the existing column.

The displayed text in a cell can be retrieved by calling the GetLookupValue on the GridViewComboBoxColumn.

Get Cell Text

GridViewComboBoxColumn comboBoxColumn = this.radGridView1.Columns["column"] as GridViewComboBoxColumn;
object value = this.radGridView1.Rows[0].Cells["SupplierColumn"].Value;
string text = (string)comboBoxColumn.GetLookupValue(value);

The stored values inside the cells belonging to this column corresponds to the ValueMember field that is specified. In the above example, SupplierID is applied as ValueMember. Hence, the cells stores the numeric IDs of the suppliers. In case you are using unbound mode for the grid and the grid rows are programmatically added, you have to specify again a value that corresponds to the specified ValueMember.

In order to access the RadDropDownListEditor, you should subscribe to the CellEditorInitialized event of RadGridView. This event is fired when the initialization of an editor is done. The EditorElement property of the RadDropDownListEditor gives you access to the RadDropDownListEditorElement which allows you to apply various customizations to the editor's element:

Modify the DropDownList editor

void radGridView1_CellEditorInitialized(object sender, GridViewCellEventArgs e)
{
    RadDropDownListEditor editor = this.radGridView1.ActiveEditor as RadDropDownListEditor;
    if (editor != null)
    {
        ((RadDropDownListEditorElement)((RadDropDownListEditor)this.radGridView1.ActiveEditor).EditorElement).RightToLeft = true;
    }
}

Binding to array of strings

The following example demonstrates a case where the combo box is bound to a column with string values in the data source. In this case the DisplayMember and ValueMember properties are the same, and you need just an array of strings as a data source to the ComboBoxColumn (those strings should be equal to the possible values in the data source):

Bind to array of string

//Create the data source and fill some data
DataTable table = new DataTable();
table.Columns.Add("Phone", typeof(string));
table.Rows.Add("Mobile");
table.Rows.Add("Business");
table.Rows.Add("Business");
table.Rows.Add("Fax");
table.Rows.Add("Fax");
table.Rows.Add("Fax");
//allow the grid to genetate its columns
this.radGridView1.MasterTemplate.AutoGenerateColumns = false;
//set the grid data source
this.radGridView1.DataSource = table;

//create the combo box column
GridViewComboBoxColumn comboColumn = new GridViewComboBoxColumn("Phone");
//set the column data source - the possible column values
comboColumn.DataSource = new String[] { "Mobile", "Business", "Fax" };
//set the FieldName - the column will retrieve the value from "Phone" column in the data table
comboColumn.FieldName = "Phone";
//add the column to the grid
radGridView1.Columns.Add(comboColumn);

Binding to collection of custom object

The example below extends the previous sample, where we bound the combo column to array of strings, by adding a text box column and another combo column, this time bound to a collection of custom object.

1. The first step is to define your grid data source, fill in some data, and set column auto-generation to false so that the grid does not generate its columns from the data source.

2.Next, the grid columns are created and mapped to the data base columns. Note that you have to define a separate data source for each of your combo box columns different form the one of your grid. This separate data sources have helper function, the actual data for your combobox columns is still in your grid data source as it is for any other type of column (e.g. decimal column). The data source for the first combo column is a string array (from the previous example) and for the second combo column is a BindingList. The BindingList consists of objects having properties for your value and display members. In the sample code below, Id is the ValueMember and MyString is the DisplayMember. The "Another ComboBox column" in the grid data source is of type int and our custom object has a property of type int. So in order to link the data source field to our custom object integer field, we have set the ValueMember to "Id". You may use a DataTable in the same way like the BindingList.

Binding to collection of custom object

public partial class GridViewComboBoxColumn2 : Form
{
    public GridViewComboBoxColumn2()
    {
        InitializeComponent();
        DataTable table = new DataTable();
        table.Columns.Add("Text", typeof(string));
        table.Columns.Add("Phone", typeof(string));
        table.Columns.Add("Another ComboBox column", typeof(int));
        table.Rows.Add("Text 1", "Mobile", 1);
        table.Rows.Add("Text 2", "Business", 1);
        table.Rows.Add("Text 3", "Business", 2);
        table.Rows.Add("Text 4", "Fax", 1);
        this.radGridView1.MasterTemplate.AutoGenerateColumns = false;
        radGridView1.Columns.Add(new GridViewTextBoxColumn("Text"));
        GridViewComboBoxColumn comboCol = new GridViewComboBoxColumn("Phone");
        comboCol.DataSource = new String[] { "Mobile", "Business", "Fax" };
        comboCol.FieldName = "Phone";
        radGridView1.Columns.Add(comboCol);
        GridViewComboBoxColumn colboCol2 = new GridViewComboBoxColumn("Another ComboBox column");
        colboCol2.FieldName = "Another ComboBox column";
        colboCol2.ValueMember = "Id";
        colboCol2.DisplayMember = "MyString";
        BindingList<ComboBoxDataSourceObject> list = new BindingList<ComboBoxDataSourceObject>();
        ComboBoxDataSourceObject object1 = new ComboBoxDataSourceObject();
        object1.Id = 1;
        object1.MyString = "First object";
        list.Add(object1);
        ComboBoxDataSourceObject object2 = new ComboBoxDataSourceObject();
        object2.Id = 2;
        object2.MyString = "Second object";
        list.Add(object2);
        colboCol2.DataSource = list;
        radGridView1.Columns.Add(colboCol2);
        this.radGridView1.DataSource = table;
    }
}
public class ComboBoxDataSourceObject
{
    private string myString;
    public string MyString
    {
        get { return myString; }
        set { myString = value; }
    }
    private int id;
    public int Id
    {
        get { return id; }
        set { id = value; }
    }
}

 Customizing DropDownList editors in RadGridView

You have to handle the EditorRequired event. This event is fired every time when an editor needs to be shown. A sample code demonstrating this technique:

 Customizing DropDownList editors in RadGridView

public GridViewComboBoxColumn3()
{
    InitializeComponent();
    GridViewComboBoxColumn customerColumn = new GridViewComboBoxColumn();
    customerColumn.Name = "CustomerColumn";
    customerColumn.HeaderText = "Customer";
    customerColumn.DataSource = this.customersBindingSource;
    customerColumn.ValueMember = "CustomerID";
    customerColumn.DisplayMember = "ContactName";
    customerColumn.FieldName = "CustomerID";
    customerColumn.Width = 200;
    this.radGridView1.Columns.Add(customerColumn);
    radGridView1.EditorRequired += new EditorRequiredEventHandler(radGridView1_EditorRequired);
}
MyDropDownListEditor myComboEditor = new MyDropDownListEditor();
void radGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
{
    if (e.EditorType == typeof(RadDropDownListEditor))
    {
        e.Editor = new MyDropDownListEditor();
    }
}
private void GridViewComboBoxColumn3_Load(object sender, EventArgs e)
{
    // TODO: This line of code loads data into the 'nwindDataSet.Customers' table. You can move, or remove it, as needed.
    this.customersTableAdapter.Fill(this.nwindDataSet.Customers);
}
    }
public class MyDropDownListEditor : RadDropDownListEditor
    {
protected override RadElement CreateEditorElement()
{
    return new MyDropDownListEditorElement();
}
    }
public class MyDropDownListEditorElement : RadDropDownListEditorElement
    {
protected override void OnLoaded()
{
    base.OnLoaded();
    this.ListElement.CreatingVisualItem += new CreatingVisualListItemEventHandler(ListElement_CreatingVisualItem);

}
private void ListElement_CreatingVisualItem(object sender, CreatingVisualListItemEventArgs args)
{
    // add button element
    RadListVisualItem visualItem = new RadListVisualItem();
    visualItem.Padding = new Padding(12, 0, 0, 0);
    visualItem.NumberOfColors = 1;
    visualItem.BackColor = Color.Yellow;
    RadButtonElement button = new RadButtonElement();
    button.MinSize = new Size(12, 12);
    button.MaxSize = button.MinSize;
    button.Text = "x";
    button.TextAlignment = ContentAlignment.MiddleLeft;
    button.Click += new EventHandler(button_Click);
    visualItem.Children.Add(button);
    args.VisualItem = visualItem;

}
private void button_Click(object sender, EventArgs e)
{
    BindingSource source = (BindingSource)this.DataSource;
    source.Remove(source.Current);
    this.SelectedIndex = -1;
}
    }

Figure 2: The items styles are now changed.

WinForms RadGridView The items styles are now changed

Examples

You can check the following SDK project which demonstrates how you can use the GridViewComboBoxColumn in different scenarios:

In this article
Related articles
Not finding the help you need? Improve this article