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
Page size:
 67 items in 7 pages
11Queso Cabrales1 kg pkg.21.0022
12Queso Manchego La Pastora10 - 500 g pkgs.38.0086
13Konbu2 kg box6.0024
14Tofu40 - 100 g pkgs.23.2535
15Genen Shouyu24 - 250 ml bottles15.5039
16Pavlova32 - 500 g boxes17.4529
17Alice Mutton20 - 1 kg tins39.000
18Carnarvon Tigers16 kg pkg.62.5042
19Teatime Chocolate Biscuits10 boxes x 12 pieces9.2025
20Sir Rodney's Marmalade30 gift boxes81.0040

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.

  • DefaultCS.aspx
<%@ Page 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>
</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