Add DropDown to RadGrid

[Todd]

I've successfully bound my RadGrid to an ArrayList and the data is displaying correctly. I need to add a checkbox and a dropdown list to the front of each row. I've added the checkbox, but am not sure how to add the drop down list. The data for the drop down list is independent of the data used to populate the grid. How can I add a column which contains the drop down?

Thanks.

[Princy]

Hi Todd,

Try adding a GridDropDownColumn for achieving the desired scenario. You can also go through the following help document which discuss the ColumnTypes supported by RadGrid.
Column types

Thanks
Princy.

[Todd]

Thanks for the reply. It looks like if I use the GridDropDownColumn it only shows the drop down list if the row is in "edit" mode. Also, in my case the value in the drop down list does not belong to the object type used to populate the grid. My users aren't editing the values in the row, they are simply selecting the row, then picking an item in the drop down list that indicates what action I need to take on that row. I want the drop down list to always be visible.

My current UI uses a standard ASP.NET repeater, and in the ItemDataBound event I find the asp:dropdownlist control and add the appropriate values to the list. Is there a way to do this using the grid?

[Vlad]

Hi Todd,

You can use GridTemplateColumn to achieve the same with the grid.

Best wishes,
Vlad
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Shinu]

Hi Todd,

Yes as Vlad said you can use a GridTemplateColumn to achieve the desired scenario as shown below.

ASPX:

<telerik:GridTemplateColumn UniqueName="DropDownCol" HeaderText="DropDownCol">
        <ItemTemplate>
            <asp:DropDownList ID="DropDownList1" runat="server">
            </asp:DropDownList>
        </ItemTemplate>
       </telerik:GridTemplateColumn>

Thanks
Shinu.

[Todd]

That's exactly what I was looking for, thanks!

[lenard]

how  can i bind a data inside the rad grid dropdown column ?

[Attila Antal]

Hi Lenard,

In general there are three ways to bind data to RadGrid or its controls. One of those is binding using Declarative DataSource, binding on the code behind programmatically or binding on client using JavaScript objects or WebServices, see Telerik RadGrid Data Binding Basics

Here are few examples to have DropDown in RadGrid and bind data to it

1. Using GridDropDownColumn with Declarative DataSource 

<telerik:GridDropDownColumn
    DataSourceID="SqlDataSource1"
    UniqueName="DropDownColumn1"
    HeaderText="Country"
    DataField="ShipCountry"
    ListDataMember="ShipCountry"
    ListValueField="ShipCountry"
    ListTextField="ShipCountry">
</telerik:GridDropDownColumn>

The DataSource control

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT DISTINCT [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>

 

2. Using GridDropDownColumn with prgrammatic Data Binding:

<telerik:GridDropDownColumn
    UniqueName="DropDownColumn2"
    HeaderText="Country"
    DataField="CountryID"
    ListDataMember="CountryID"
    ListValueField="CountryID"
    ListTextField="ShipCountry">
</telerik:GridDropDownColumn>

 

In the ItemDataBound event of RadGrid access the Combo and assign it a DataSource:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item.IsInEditMode)
    {
        GridEditableItem editedItem = e.Item as GridEditableItem;
        RadComboBox combo = editedItem["DropDownColumn2"].Controls[0] as RadComboBox;
        combo.DataSource = ComboDataSource();
        combo.DataTextField = "ItemText";
        combo.DataValueField = "ItemId";
        combo.DataBind();

        var CountryID = editedItem.GetDataKeyValue("CountryID");

        var selectedItem = combo.FindItemByValue(CountryID.ToString());
        if (selectedItem != null)
        {
            selectedItem.Selected = true;
        }
    }
}

 

3. Using GridTemplateColumn with Declarative DataSource Control

<telerik:GridTemplateColumn UniqueName="TemplateColumn1">
    <ItemTemplate>
        <%# Eval("ShipCountry") %>
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadDropDownList ID="RadDropDownList1" runat="server"  
            DataSourceID="SqlDataSource1"
            DataTextField="ShipCountry"
            DataValueField="ShipCountry"
            SelectedValue='<%# Bind("ShipCountry") %>'>
        </telerik:RadDropDownList>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

 

DataSource Control

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
    SelectCommand="SELECT DISTINCT [ShipCountry] FROM [Orders]">
</asp:SqlDataSource>

 

4. Using GridTemplateColumn with Programmatic Data Binding

<telerik:GridTemplateColumn UniqueName="TemplateColumn2">
    <ItemTemplate>
        <%# Eval("ShipCountry") %>
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadDropDownList ID="RadDropDownList1" runat="server" 
            OnDataBinding="RadDropDownList1_DataBinding"
            SelectedValue='<%# Bind("ShipCountry") %>'></telerik:RadDropDownList>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

DataBinding event of the DropDownList

protected void RadDropDownList1_DataBinding(object sender, EventArgs e)
{
    var ddl = (RadDropDownList)sender;

    ddl.DataSource = ComboDataSource();
    ddl.DataTextField = "ItemText";
    ddl.DataValueField = "ItemId";
}

 

Kind regards,
Attila Antal
Progress Telerik

[lenard]

thanks for response, i will try this ways thank you admin .