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

Cascading

RadMultiColumnComboBox can cascade from another RadMultiColumnComboBox instance. It takes the value from the DataValueField of the parent instance set in its CascadeFrom property, and uses it to filter its data source.

If a combo box is cascading, it will be disabled until its parent has a value.

You can control the field that is filtered in the current data source through the CascadeFromField property, and the field from the parent data source that is used as a filter value through the CascadeFromParentField property.

  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ 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>
    <link href="styles.css" rel="stylesheet" />
    <script src="scripts.js"></script>
</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 size-thin" runat="server">

        <div class="demo-row">
            <label>
                categories
                <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox1"
                    DataTextField="CategoryName" DataValueField="CategoryID"
                    DropDownWidth="300px" Height="400px" Width="300px"
                    MinLength="3" Filter="Contains" Placeholder="Select Category">
                    <WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
                        Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"></WebServiceSettings>
                    <ColumnsCollection>
                        <telerik:MultiColumnComboBoxColumn Field="CategoryName" Title="Name" />
                        <telerik:MultiColumnComboBoxColumn Field="CategoryID" Title="ID" />
                    </ColumnsCollection>
                </telerik:RadMultiColumnComboBox>
            </label>
        </div>

        <div class="demo-row">
            <label>
                products
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox2"
                DataTextField="ProductName" DataValueField="ProductID"
                DropDownWidth="300px" Height="400px" Width="300px" CascadeFrom="RadMultiColumnComboBox1"
                MinLength="3" Filter="Contains" Placeholder="Select Product">
                <WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
                    Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"></WebServiceSettings>
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="ProductName" Title="Name" />
                    <telerik:MultiColumnComboBoxColumn Field="UnitPrice" Title="Price" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            </label>
        </div>

        <div class="demo-row">
            <label>
                orders
            <telerik:RadMultiColumnComboBox runat="server" ID="RadMultiColumnComboBox3" CascadeFrom="RadMultiColumnComboBox2"
                DataTextField="Order.ShipCity" DataValueField="OrderID"
                DropDownWidth="300px" Height="400px" Width="300px"
                MinLength="3" Filter="Contains" Placeholder="Select Order">
                <WebServiceSettings ServiceType="OData" Select-ContentType="JSON"
                    Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Order_Details?$expand=Order" ></WebServiceSettings>
                <ColumnsCollection>
                    <telerik:MultiColumnComboBoxColumn Field="OrderID" Title="ID" />
                    <telerik:MultiColumnComboBoxColumn Field="Order.ShipCity" Title="Ship To" />
                </ColumnsCollection>
            </telerik:RadMultiColumnComboBox>
            </label>
        </div>

        <telerik:RadPushButton runat="server" ID="RadPushButton1" Primary="true"
            Text="View Order" AutoPostBack="false" OnClientClicked="viewOrder">
        </telerik:RadPushButton>

        <script>
            var comboIds = {
                categories: "<%=RadMultiColumnComboBox1.ClientID%>",
                products: "<%=RadMultiColumnComboBox2.ClientID%>",
                orders: "<%=RadMultiColumnComboBox3.ClientID%>",
            }
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance