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

DropDownList in RadGird

ProductNameCategoryEdit
June Condiments
test Confections
juan Condiments
test11 Confections
test Condiments
44e Beverages
Laptop Condiments

This demo demonstrates how to integrate the DropDownList control inside the Insert/Edit form of a RadGrid control.

  • DefaultCS.aspx
<%@ Page  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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>

    <div class="demo-container">
        <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1"  GridLines="None" AutoGenerateColumns="false" PageSize="10"
            AllowPaging="true" AllowSorting="true" runat="server"
            DataSourceID="ProductsDataSource" AllowAutomaticUpdates="true" AllowAutomaticInserts="True"
            ShowStatusBar="true">
            <MasterTableView ShowFooter="false" DataKeyNames="ProductID" EditMode="InPlace" CommandItemDisplay="TopAndBottom">
                <Columns>
                    <telerik:GridBoundColumn DataField="ProductName" HeaderText="ProductName"
                        HeaderStyle-Width="300px" ItemStyle-Width="300px" />
                    <telerik:GridTemplateColumn HeaderText="Category" ItemStyle-Width="240px">
                        <ItemTemplate>
                            <%#DataBinder.Eval(Container.DataItem, "CategoryName")%>
                        </ItemTemplate>
                        <EditItemTemplate>
                            <telerik:RadDropDownList RenderMode="Lightweight" runat="server" ID="RadDropDownList1"  DataTextField="CategoryName"
                                DataValueField="CategoryID" DataSourceID="CategoriesDataSource" SelectedValue='<%#Bind("CategoryID") %>'>
                            </telerik:RadDropDownList>
                        </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.[CategoryID],
                             categories.[CategoryName]
                             FROM [Products] AS products
                             JOIN [Categories] AS categories
                             ON products.CategoryID = categories.CategoryID"
        InsertCommand="INSERT INTO [Products] ([ProductName], [CategoryID]) VALUES (@ProductName, @CategoryID)"
        UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [CategoryID] = @CategoryID WHERE [ProductID] = @ProductID">
        <InsertParameters>
            <asp:Parameter Name="ProductName" Type="String" />
            <asp:Parameter Name="CategoryID" Type="Int32" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ProductID" Type="Int32" />
            <asp:Parameter Name="ProductName" Type="String" />
            <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