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:
 77 items in 8 pages
31Gorgonzola Telino12 - 100 g pkgs12.500
32Mascarpone Fabioli24 - 200 g pkgs.32.009
33Geitost500 g2.50112
34Sasquatch Ale24 - 12 oz bottles14.00111
35Steeleye Stout24 - 12 oz bottles18.0020
36Inlagd Sill24 - 250 g jars19.00112
37Gravad lax12 - 500 g pkgs.26.0011
38Côte de Blaye12 - 75 cl bottles263.5017
39Chartreuse verte750 cc per bottle18.0069
40Boston Crab Meat24 - 4 oz tins18.40123

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