CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
Matt Millican
Matt Millican

Reputation: 4054

Kendo MultiSelect cascading

I am trying to use several Kendo [MVC] MultiSelect controls on a page and I would like some of them to be dependent on one another.

Example

MultiSelect 1

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodeGroups)
    .Name("param_Rate_Code_Groups")
    .BindTo(Model.AvailableRateCodeGroups)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Code Groups")
    .Value(new[] {"-1"})
    .Events(evt => evt.Select("onSelectRateCodeGroup")))

MultiSelect 2

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodes)
    .Name("param_Rate_Details")
    .BindTo(Model.AvailableRateCodes)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Codes")
    .Value(new[] {"-1"}))

I would like to have the options displayed in MultiSelect 2 dependent on 1. I'm not opposed to using an AJAX binding for the 2nd one if need be.

Any guidance or examples would be much appreciated!

Upvotes: 2

Views: 5959

Answers (3)

Farshad Nasehi
Farshad Nasehi

Reputation: 181

it is clear that kendo have not presented any component to do so. but what I have done is on click of the parent element, I fetch data via Ajax and then call setDataSource of the child with that:

    $(document).on('change', '#FilterRateCodeGroups', function () {
    $.get("/childFetchUrl",{FilterRateCodeGroupIds:$("#FilterRateCodeGroups").data("kendoMultiSelect").value()},function(newDataSet){
        var FilterRateCodes = $("#FilterRateCodes").data("kendoMultiSelect");
        FilterRateCodes.setDataSource(newDataSet);
    });

I have to mention that I implemented this scenario using MultiSelect but not MultiSelectFor.

Upvotes: 1

Krishna Mani
Krishna Mani

Reputation: 177

Kendo UI team is provided a sample code to perform cascade multiple Kendo UI MultiSelect widgets. The example below demonstrates how to do...

     <!DOCTYPE html>
     <html>
    <head>
        <meta charset="utf-8" />
        <title>Kendo UI Snippet</title>

        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css" />
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css" />

        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
    </head>
    <body>

        supplier: <select id="suppliers"></select>
        product: <select id="products"></select>
        <script>
            $(function () {
                var productsDataSource = new kendo.data.DataSource({
                    type: "odata",
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "http://demos.kendoui.com/service/Northwind.svc/Products",
                        },
                        parameterMap: function (data) {
                            return kendo.data.transports.odata.parameterMap.call(this, data);
                        }
                    }
                });

                $("#products").kendoMultiSelect({
                    autoBind: false,
                    dataTextField: "ProductName",
                    dataValueField: "ProductID",
                    dataSource: productsDataSource
                });

                $("#suppliers").kendoMultiSelect({
                    autoBind: false,
                    dataTextField: "CompanyName",
                    dataValueField: "SupplierID",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "http://demos.kendoui.com/service/Northwind.svc/Suppliers"
                            }
                        }
                    },
                    change: function () {
                        var filters = buildFilters(this.dataItems());
                        productsDataSource.filter(filters);
                    }
                });

                function buildFilters(dataItems) {
                    var filters = [],
                        length = dataItems.length,
                        idx = 0, dataItem;

                    for (; idx < length; idx++) {
                        dataItem = dataItems[idx];

                        filters.push({
                            field: "SupplierID",
                            operator: "eq",
                            value: parseInt(dataItem.SupplierID)
                        });
                    }

                    return {
                        logic: "or",
                        filters: filters
                    };
                }
            });
        </script>
    </body>
    </html>

Upvotes: 0

Nick
Nick

Reputation: 3337

Something like this should work:

@(Html.Kendo().MultiSelectFor(m => m.FilterRateCodeGroups)
    .Name("param_Rate_Code_Groups")
    .BindTo(Model.AvailableRateCodeGroups)
    .Filter(FilterType.Contains)
    .HighlightFirst(true)
    .Placeholder("Select Rate Code Groups")
    .Value(new[] {"-1"})
    .Events(evt => evt.Change("onChangeRateCodeGroup")))


function onChangeRateCodeGroup() {
        //modify data source of the other multi select
    };

Upvotes: 0

Related Questions