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
1Chai10 boxes x 20 bags18.0039
2Chang24 - 12 oz bottles19.0017
3Aniseed Syrup12 - 550 ml bottles10.0013
4Chef Anton's Cajun Seasoning48 - 6 oz jars22.0053
5Chef Anton's Gumbo Mix36 boxes21.350
6Grandma's Boysenberry Spread12 - 8 oz jars25.00120
7Uncle Bob's Organic Dried Pears12 - 1 lb pkgs.30.0015
8Northwoods Cranberry Sauce12 - 12 oz jars40.006
9Mishi Kobe Niku18 - 500 g pkgs.97.0029
10Ikura12 - 200 ml jars31.0031

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