RadGrid for ASP.NET
Contents
Customize/Configure GridDropDownColumn Send comments on this topic.
How-to > Customize/Configure GridDropDownColumn

Glossary Item Box

Configuring GridDropDownColumn

Here is some insight about the mechanism which Telerik RadGrid uses to present values for GridDropDownColumn:

C# Copy Code
//sample select command for grid data-source generation
DBadapter.SelectCommand = New OleDbCommand("SELECT userid, username, GRID_AccessLevelID FROM WebUsers, conn)
DBadapter.Fill(MyUsersData, "WebUsers")
VB.NET Copy Code
'sample select command for GridDropDownColumn data-source generation
DBadapter.SelectCommand = New OleDbCommand("SELECT DDL_AccessLevelID, Description FROM AccessLevel", conn)
DBadapter.Fill(MyUsersData, "AccessLevel")
ASPX/ASCX Copy Code
//sample inline GridDropDownColumn definition
<rad:GridDropDownColumn UniqueName="AccessLevelID" ListDataMember="AccessLevel"
SortExpression="AccessLevelID" ListTextField="Description"
ListValueField ="DDL_AccessLevelID" HeaderText="AccessLevelID" DataField="GRID_AccessLevelID" />

Note: Under .NET 2.0 framework the ListDataMember property can be replaced by the DataSourceID property (when having declarative data sources) of the corresponding GridDropDownColumn
  • The DataField property points to the column in the grid data-source containing values which will be compared at a later stage with the values available in the column, referenced by the ListValueField property.
  • The ListValueField points to the column in the AccessLevel table which will be used as a pointer to retrieve the items for the dropdown in the GridDropDownColumn.
  • The ListTextField points to the column in the AccessLevel table from which the grid will extract the values for the dropdown.
  • The ListDataMember property points to the AccessLevel table (part of the dataset used for grid data-source) which is the source for the GridDropDownColumn generation (can be replaced by DataSourceID - see the highlighted section above).

As you can see, a requirement for the proper functioning of GridDropDownColumn is that all column values referenced by the DataField attribute match the column values referenced by the ListValueField attribute.
If there are values in the GRID_AccessLevelID column of the WebUsers table which do not have corresponding equal values in the DLL_AccessLevelID column of the AccessLevel table, then the grid will display the default first value from the Description column as it will not "know" what is the correct field.

Online demo which demonstrates the behavior of GridDropDownColumn is available here.

Note: The built-in GridDropDownColumn is designed to be used mainly with DataTables in order to easily map and generate their dropdown items values in conjunction with the DataField/ListValueField/DataSourceID/ListDataMember values of the column.

For custom objects collections consider replacing the GridDropDownColumn with template column holding MS DropDownList in its edit template (generating/binding the items for the MS DropDownList inside the ItemDataBound handler of RadGrid).


Adding GridDropDownColumn option on insert/edit

If you would like to display the additional item in your dropdown list editor both on editing and insertion, you can perform this operation on ItemDataBound. You have to check whether the currently bound item is GridEditableItem and that it is in edit mode. If this condition is met, you can obtain reference to the DropDownList control through the GridDropDownListEditor for the respective column and inject new item in its Items collection.

The code below will place new item with text Select Contact Title (colored in red) on first position in the dropdown list editor of GridDropDownColumn. Note that this drop down column has UniqueName DropDownColumn.

VB.NET Copy Code
Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.WebControls.GridItemEventArgs) Handles RadGrid1.ItemDataBound
         If (TypeOf e.Item Is GridEditableItem AndAlso CType(e.Item, GridEditableItem).IsInEditMode)Then
             Dim editedItem As GridEditableItem = CType(e.Item, GridEditableItem)
             Dim editMan As GridEditManager = editedItem.EditManager

             Dim editor As GridDropDownListColumnEditor = CType(editMan.GetColumnEditor("DropDownColumn"), GridDropDownListColumnEditor)
             Dim ddList As DropDownList = editor.DropDownListControl
            ddList.Items.Insert(0, New ListItem("Select Contact Title", "NotSetItem"))
            ddList.Items(0).Attributes( "style") = "color: red"
         End If

End Sub
C# Copy Code
protected void RadGrid1_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e) {
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
 GridEditableItem editedItem = e.Item as GridDataItem;
 GridEditManager editMan = editedItem.EditManager;

 GridDropDownListColumnEditor editor = (GridDropDownListColumnEditor)(editMan.GetColumnEditor( "DropDownColumn"));
 DropDownList ddList = editor.DropDownListControl;
 ddList.Items.Insert(0, new ListItem("Select Contact Title", "NotSetItem"));
 ddList.Items[0].Attributes["style"] = "color: red";
}
}
Note: This option will not be persisted/available after the update command. Inserting such item is suitable only for user-friendly message/presentation.

Moreover, you may want to display an empty item/default item which differs from the first in the list (inside the dropdown editor) as selected on initial insertion. This can be accomplished in a codeless manner setting the EnableEmptyListItem property of the GridDropDownColumn to true (its default value is false) and choosing EmptyListItemText/EmptyListItemValue. Below is an example for that:

ASPX/ASCX Copy Code
<rad:GridDropDownColumn UniqueName="ContactName" DataSourceID="ddListColumnDataSource"
SortExpression="ContactName" ListTextField="ContactName"
EnableEmptyListItem = "true" EmptyListItemText="--Choose an option--" EmptyListItemValue=""
ListValueField ="CustomerID" HeaderText="Contact name" DataField="CustomerID" />

Customizing the options for GridDropDownColumn on editing

The proper event you need to hook in order to attain this effect is ItemDataBound. You should check if the currently bound item (e.Item) is in edit mode (e.Item.IsInEditMode = true). Then you can find the cell with the dropdown that is currently editable and change the options in the dropdown as per your needs. Here is an example code:

C# Copy Code
private void RadGrid1_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e)
{
   if (e.Item is GridEditableItem && (e.Item as GridEditableItem).IsInEditMode )
   {
        GridEditableItem editedItem = e.Item as GridEditableItem;
        GridEditManager editMan = editedItem.EditManager;

        GridDropDownColumnEditor editor =
      editMan.GetColumnEditor( "DropDownColumnUniqueName" ) as GridDropDownColumnEditor;
               //Then you can modify the list control as per your custom conventions
        editor.DataSource = new object[]{ 1, 2, 3 };
        editor.DataBind();

        editor.DropDownListControl.SelectedValue = "2";
              //And so on
   }
}
VB.NET Copy Code
Private Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.WebControls.GridItemEventArgs) Handles RadGrid1.ItemDataBound
    If (TypeOf e.Item is GridEditableItem AndAlso CType
    (e.Item,GridEditableItem).IsInEditMode)) Then
             Dim editedItem As GridEditableItem = CType(e.Item,GridEditableItem)
             Dim editMan As GridEditManager = editedItem.EditManager

             Dim editor As GridDropDownColumnEditor =
      CType(editMan.GetColumnEditor( "DropDownColumnUniqueName"),GridDropDownColumnEditor)

             'Then you can modify the list control as per your custom conventions
            editor.DataSource = New Object() {1, 2, 3}
            editor.DataBind()

            editor.DropDownListControl.SelectedValue = "2"
             'And so on
         End If
End Sub

The code is generalized to work in both InPlace and EditForms editing mode and with any editor similar to GridDropDownListColumnEditor (the default). Note that in order for this to work you should have already set the DropDownColumn properties:

  • ListTextField
  • ListValueField

which correspond to the properties DataTextField, DataValueField of the dropdown control.