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

Grid Filtered by Combo


Product IDProduct NameQuantity Per UnitUnit PriceUnits In StockDiscontinued
12345678
Page size:
 77 items in 8 pages
51Manjimup Dried Apples50 - 300 g pkgs.53.0020
52Filo Mix16 - 2 kg boxes7.0038
53Perth Pasties48 pieces32.800
54Tourtière16 pies7.4521
55Pâté chinois24 boxes x 2 pies24.00115
56Gnocchi di nonna Alice24 - 250 g pkgs.38.0021
57Ravioli Angelo24 - 250 g pkgs.19.5036
58Escargots de Bourgogne24 pieces13.2562
59Raclette Courdavault5 kg pkg.55.0079
60Camembert Pierrot15 - 300 g rounds34.0019

This demo presents how to display dependant records in RadGrid on selection in RadComboBox via ajax request to the server.

The asynchronous call is made through RadAjaxManager instance on the page configured to refresh the grid and the combobox. Additionally, a loading panel will indicate that the ajax request is in progress (to refresh the grid data) when you change the selection in the combobox. This is achieved in a completely codeless manner through a select control parameter (holding the ControlID and the PropertyName of the dropdown list) of grid data source control and the ajax manager's settings.

  • DefaultVB.aspx
<%@ Page Language="vb"  %>

<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container" runat="server" id="demoContainer">
        <label for="NamesDDL">Select contact name to view its product orders:</label>
        <telerik:RadComboBox ID="NamesDDL" runat="server" AutoPostBack="True" DataSourceID="dllDataSource" Width="300px"
            DataTextField="ContactName" DataValueField="SupplierID" 
            AppendDataBoundItems="true">
            <Items>
                <telerik:RadComboBoxItem Text="All" Value="0" Selected="true"></telerik:RadComboBoxItem>
            </Items>
        </telerik:RadComboBox>
        <br />
        <telerik:RadGrid RenderMode="Lightweight" ID="OrdersGrid" AllowPaging="true" DataSourceID="gridSource" runat="server" 
            GridLines="None" AllowSorting="true">
        </telerik:RadGrid>
    </div>
    <asp:SqlDataSource ID="dllDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT TOP 20 [ContactName], [SupplierID] FROM [Suppliers]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="gridSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT ProductID, ProductName, QuantityPerUnit, UnitPrice, UnitsInStock, Discontinued FROM Products WHERE ((SupplierID = @SupplierID and @SupplierID <> 0) or (SupplierID = SupplierID and @SupplierID = 0))">
        <SelectParameters>
            <asp:ControlParameter Name="SupplierID" PropertyName="SelectedValue" ControlID="NamesDDL"></asp:ControlParameter>
        </SelectParameters>
    </asp:SqlDataSource>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableAJAX="true" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="NamesDDL">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="OrdersGrid" LoadingPanelID="AjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="NamesDDL"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance