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

Combo in Grid

Next database reset in 0 hours, 9 minutes, 22 seconds
ProductNameSupplierCategoryEdit
 
asassdsdsdsds New Orleans Cajun Delights Meat/Poultry
Edic Exotic Liquids Beverages
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