Web20 skin

MultiColumnComboBox - Cascading

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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="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="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="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

Help Us Improve

Was this example helpful?