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

DropDownList in RadGird

ProductNameCategoryEdit
Page size:
 77 items in 8 pages
Sirop d'érable Condiments
Tarte au sucre Confections
Vegie-spread Condiments
Wimmers gute Semmelknödel Grains/Cereals
Louisiana Fiery Hot Pepper Sauce Condiments
Louisiana Hot Spiced Okra Condiments
Laughing Lumberjack Lager Beverages
Scottish Longbreads Confections
Gudbrandsdalsost Dairy Products
Outback Lager Beverages

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