New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Combo in Grid

Next database reset in 0 hours, 59 minutes, 50 seconds
ProductNameSupplierCategoryEdit
12345678
Page size:
 77 items in 8 pages
 
Chang Exotic Liquids Beverages
Aniseed Syrup Exotic Liquids Condiments
Chef Anton's Cajun Seasoning New Orleans Cajun Delights Condiments
Chef Anton's Gumbo Mix New Orleans Cajun Delights Condiments
Grandma's Boysenberry Spread Grandma Kelly's Homestead Condiments
Uncle Bob's Organic Dried Pears Grandma Kelly's Homestead Produce
Northwoods Cranberry Sauce Grandma Kelly's Homestead Condiments
Mishi Kobe Niku Tokyo Traders Meat/Poultry
Ikura Tokyo Traders Seafood
You can use numerous different instances of RadComboBox inside RadGrid. Furthermore, you can load the ComboBox Items on demand.
There are two options to pre-select a value in a RadComboBox when it is nested in a RadGrid EditTemplate:
  • If you populate RadComboBox with data using ASP.NET 2.0 or 3.5 DataSource types, you can simply set the SelectedValue :
    SelectedValue='<%#Bind("CompanyName") %>'
  • When you use Load On Demand or Automatic Load On Demand - you can add the previously selected Item by in the RadGrid.OnItemDatabound event when in 'Edit' Mode.
    protected void OnItemDataBoundHandler(object sender, GridItemEventArgs e)
                   {
                       if (e.Item.IsInEditMode)
                       {
                           GridEditableItem item = (GridEditableItem)e.Item;
     
                           if (!(e.Item is IGridInsertItem))
                           {
                               RadComboBox combo = (RadComboBox)item.FindControl("RadComboBox1");
     
                               RadComboBoxItem selectedItem = new RadComboBoxItem();
                               selectedItem.Text = ((DataRowView)e.Item.DataItem)["CompanyName"].ToString();
                               selectedItem.Value = ((DataRowView)e.Item.DataItem)["SupplierID"].ToString();
                               selectedItem.Attributes.Add("ContactName", ((DataRowView)e.Item.DataItem)["ContactName"].ToString());
     
                               combo.Items.Add(selectedItem);
     
                               selectedItem.DataBind();
     
                               Session["SupplierID"] = selectedItem.Value;
                           }
                       }
                   }
    When you delete the text initially displayed in the RadComboBox - Load-On-Demand will fire and will populate the control with Items.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.ComboInGrid.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="demo" DecoratedControls="All" EnableRoundedCorners="false" />
    <div id="demo" class="demo-container no-bg">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" AutoGenerateColumns="false" PageSize="10"
            AllowPaging="true" AllowSorting="true" runat="server" OnItemDataBound="OnItemDataBoundHandler" OnPreRender="RadGrid1_PreRender"
            DataSourceID="ProductsDataSource" AllowAutomaticUpdates="true" AllowAutomaticInserts="True" 
            ShowStatusBar="true" OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated">
            <MasterTableView ShowFooter="false" DataKeyNames="ProductID" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName"
                        HeaderStyle-Width="300px" ItemStyle-Width="300px" />
                    <telerik:GridTemplateColumn UniqueName="Supplier" HeaderText="Supplier"
                        SortExpression="CompanyName" ItemStyle-Width="400px">
                        <FooterTemplate>Template footer</FooterTemplate>
                        <FooterStyle VerticalAlign="Middle" HorizontalAlign="Center" />
                        <ItemTemplate>
                            <%#DataBinder.Eval(Container.DataItem, "CompanyName")%>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox1" EnableLoadOnDemand="True" DataTextField="CompanyName"
                                OnItemsRequested="RadComboBox1_ItemsRequested" DataValueField="SupplierID" AutoPostBack="true"
                                HighlightTemplatedItems="true" Height="140px" Width="220px" DropDownWidth="420px" 
                                OnSelectedIndexChanged="OnSelectedIndexChangedHandler">
                                <HeaderTemplate>
                                    <ul>
                                        <li class="col1">Company</li>
                                        <li class="col2">ContactName</li>
                                    </ul>
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <ul>
                                        <li class="col1">
                                            <%# DataBinder.Eval(Container, "Text")%>
                                        </li>
                                        <li class="col2">
                                            <%# DataBinder.Eval(Container, "Attributes['ContactName']")%></li>
                                    </ul>
                                </ItemTemplate>
                            </telerik:RadComboBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn HeaderText="Category" ItemStyle-Width="240px">
                        <ItemTemplate>
                            <%#DataBinder.Eval(Container.DataItem, "CategoryName")%>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadComboBox RenderMode="Lightweight" runat="server" ID="RadComboBox2" DataTextField="CategoryName" 
                                DataValueField="CategoryID" DataSourceID="CategoriesDataSource" SelectedValue='<%#Bind("CategoryID") %>'>
                            </telerik:RadComboBox>
                        </EditItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridEditCommandColumn FooterText="EditCommand footer" UniqueName="EditCommandColumn"
                        HeaderText="Edit" HeaderStyle-Width="100px" UpdateText="Update">
                    </telerik:GridEditCommandColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>

    <asp:SqlDataSource ID="ProductsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT products.[ProductID], products.[ProductName], products.[SupplierID], products.[CategoryID],
                              suppliers.[CompanyName], suppliers.[ContactName], 
                              categories.[CategoryName]
                              FROM [Products] AS products
                              INNER JOIN Suppliers AS suppliers
                              ON products.SupplierID = suppliers.SupplierID
                              INNER JOIN Categories AS categories
                              ON products.CategoryID = categories.CategoryID"
        InsertCommand="INSERT INTO [Products] ([ProductName], [SupplierID], [CategoryID]) VALUES (@ProductName, @SupplierID, @CategoryID)"
        UpdateCommand="UPDATE [Products] SET  [ProductName] = @ProductName, [SupplierID] = @SupplierID, [CategoryID] = @CategoryID WHERE [ProductID] = @ProductID">
        <InsertParameters>
            <asp:Parameter Name="ProductName" Type="String" />
            <asp:SessionParameter SessionField="SupplierID" Name="SupplierID" Type="Int32" />
            <asp:Parameter Name="CategoryID" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ProductID" Type="Int32" />
            <asp:Parameter Name="ProductName" Type="String" />
            <asp:SessionParameter SessionField="SupplierID" Name="SupplierID" Type="Int32" />
            <asp:Parameter Name="CategoryID" Type="Int32" />
        </UpdateParameters>
    </asp:SqlDataSource>

    <asp:SqlDataSource ID="CategoriesDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString35 %>"
        SelectCommand="SELECT [CategoryID], [CategoryName] FROM [Categories]"></asp:SqlDataSource>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance