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
71Flotemysost10 - 500 g pkgs.21.5026
72Mozzarella di Giovanni24 - 200 g pkgs.34.8014
73Röd Kaviar24 - 150 g jars15.00101
74Longlife Tofu5 kg pkg.10.004
75Rhönbräu Klosterbier24 - 0.5 l bottles7.75125
76Lakkalikööri500 ml18.0057
77Original Frankfurter grüne Soße12 boxes13.0032

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