Kendo MultiSelect cascading

Я пытаюсь использовать несколько элементов управления MultiSelect Kendo [MVC] на странице, и я хотел бы, чтобы некоторые из них зависели друг от друга.Kendo MultiSelect cascading

Пример

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"}))

Я хотел бы иметь отображаемые в MultiSelect 2 варианта, зависящие от 1. I» m не против использования связывания AJAX для второго, если потребуется.

Любые указания или примеры были бы высоко оценены!

источник

2013-05-15 Matt Millican

Я знаю, что это старый - но я недавно опубликовал ответ на это здесь: http://stackoverflow.com/questions/28937342/post-additional-data -as-list-kendo-multiselect-read/31254354 # 31254354 –

Что-то, как это должно работать:

@(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 
    };

источник

2013-05-15 17:28:53 Nick

это, по сути, то, что я пытался сделать, но не смог получить код в функции 'onChangeRateCodeGroup()'. Какие-нибудь советы? –

Не удалось ли изменить источник данных второго мультиселектора? – Nick

Действительно, насколько я мог судить –

команды Кендо UI предоставляется пример кода для выполнения каскадной несколько виджетов Кендо UI MULTISELECT. В приведенном ниже примере показано, как это сделать ...

 <!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>

источник

2016-08-31 08:58:15

Kendo MultiSelect cascading

ответ

Смежные вопросы