Add DropDown to RadGrid

9 posts, 0 answers
  1. Todd
    Todd avatar
    8 posts
    Member since:
    May 2008

    Posted 11 Jun 2008 Link to this post

    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.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Jun 2008 Link to this post

    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.
  3. Todd
    Todd avatar
    8 posts
    Member since:
    May 2008

    Posted 12 Jun 2008 Link to this post

    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?
  4. Vlad
    Admin
    Vlad avatar
    11100 posts

    Posted 13 Jun 2008 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 13 Jun 2008 Link to this post

    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.
  6. Todd
    Todd avatar
    8 posts
    Member since:
    May 2008

    Posted 13 Jun 2008 Link to this post

    That's exactly what I was looking for, thanks!
  7. lenard
    lenard avatar
    3 posts
    Member since:
    Jan 2020

    Posted 16 Jan 2020 in reply to Shinu Link to this post

    how  can i bind a data inside the rad grid dropdown column ?
  8. Attila Antal
    Admin
    Attila Antal avatar
    590 posts

    Posted 21 Jan 2020 Link to this post

    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.
  9. lenard
    lenard avatar
    3 posts
    Member since:
    Jan 2020

    Posted 21 Jan 2020 in reply to Attila Antal Link to this post

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