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

Cascading

The cascading MultiColumnComboBox is a series of two or more MultiColumnComboBoxes in which each MultiColumnComboBox is filtered according to the selected options that are based on the DataValueField in the previous MultiColumnComboBox.

Basic Configuration

The child MultiColumnComboBox cascades from the parent one if the CascadeFrom option is defined. The CascadeFrom option has to refer to the parent ID.

    @(Html.Kendo().MultiColumnComboBox()
        .Name("products")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .Columns(columns =>
        {
            columns.Add().Field("ProductName").Title("Name");
            columns.Add().Field("ProductID").Title("ID");
        })
        .HtmlAttributes(new { style = "width:100%;" })
        .Filter(FilterType.Contains)
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("ServerFiltering_GetProducts", "MultiColumnComboBox");
            });
        })
    )

Cascading on Custom Parent Input

To allow custom input in the MultiColumnComboBox, set the CascadeOnCustomValue of the parent MultiColumnComboBox in а cascading scenario to true. As a result, cascading will be triggered upon custom input in the parent component. When CascadeOnCustomValue is set to its default false configuration, the child will not cascade and will be disabled upon setting custom input in the parent MultiColumnComboBox. Cascading on custom values works only when CascadeFromParentField is not set for the child component or points to the DataValueField of the parent.

The following example shows how to implement the cascading functionality of the MultiColumnComboBox based on custom parent input.

    @(Html.Kendo().MultiColumnComboBox()
             .Name("categories")
             .HtmlAttributes(new { style = "width:100%;" })
             .Placeholder("Select category...")
             .DataTextField("CategoryName")
             .DataValueField("CategoryId")
             .CascadeOnCustomValue(true)
             .Columns(columns =>
             {
                   columns.Add().Field("CategoryName").Title("Name");
                   columns.Add().Field("CategoryId").Title("ID");
             })
             .Filter(FilterType.Contains)
             .DataSource(source =>
             {
                 source.Read(read =>
                 {
                     read.Action("GetCascadeCategories", "MultiColumnComboBox");
                 });
             })
       )

See Also

In this article