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

DropDownList in RadGird

ProductNameCategoryEdit
Test1 Beverages
123 Beverages
222 Beverages
3 Beverages
1 Condiments

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

  • DefaultVB.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