This is a migrated thread and some comments may be shown as answers.

Add DropDown to RadGrid

8 Answers 716 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Todd
Top achievements
Rank 1
Todd asked on 11 Jun 2008, 11:13 PM
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.

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Jun 2008, 06:05 AM
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.
0
Todd
Top achievements
Rank 1
answered on 12 Jun 2008, 04:06 PM
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?
0
Vlad
Telerik team
answered on 13 Jun 2008, 06:27 AM
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
0
Shinu
Top achievements
Rank 2
answered on 13 Jun 2008, 07:07 AM
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.
0
Todd
Top achievements
Rank 1
answered on 13 Jun 2008, 09:31 PM
That's exactly what I was looking for, thanks!
0
lenard
Top achievements
Rank 1
answered on 16 Jan 2020, 11:57 AM
how  can i bind a data inside the rad grid dropdown column ?
0
Attila Antal
Telerik team
answered on 21 Jan 2020, 08:07 AM

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

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
0
lenard
Top achievements
Rank 1
answered on 21 Jan 2020, 10:18 AM
thanks for response, i will try this ways thank you admin .
Tags
Grid
Asked by
Todd
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Todd
Top achievements
Rank 1
Vlad
Telerik team
Shinu
Top achievements
Rank 2
lenard
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or