Kendo UI DropDownList as Multi Select with CheckBox

Question

Я использую обертку MVC Kendo UI. Мне нужен DropDownList с флажком для каждого элемента, чтобы я мог выбрать несколько элементов.

Я нашел this jsfiddle, выполняя то, чего хочу достичь, но это не с оболочкой MVC. Не могли бы вы показать, как я могу реализовать одно и то же с оболочкой MVC?

@(Html.Kendo().DropDownList() 
       .Name("StructureCompany") 
       .HtmlAttributes(new { style = "width:180px" }) 
       .OptionLabel("-- Select --") 
       .DataTextField("Title") 
       .DataValueField("Id") 
       .DataSource(source => 
       { 
        source.Read(read => 
        { 
         read.Action("GetCascadeCompany", "Company"); 
        }); 
       })) 

Answer 1

Вот как вы можете это сделать:

Посмотреть

@(Html.Kendo().DropDownList() 
    .Name("StructureCompany") 
    .HtmlAttributes(new { style = "width:180px" }) 
    .DataTextField("Title") 
    .DataValueField("Id") 
    .Template("<input type='checkbox' name='cb' value='#:data.Title#' /> #:data.Title#") 
    .Events(e => e.Select("onSelect")) 
    .DataSource(source => 
    { 
     source.Read(read => 
     { 
      read.Action("GetCascadeCompany", "Company"); 
     }); 
    })) 

Я удалил ваш OptionLabel, потому что он хорошо не течет с этим стилем. Но я нашел альтернативу, как вы увидите ниже

Script

//This extendes the base Widget class 
(function ($) { 
    var MultiSelectBox = window.kendo.ui.DropDownList.extend({ 
     _select: function (li) { },//Prevents highlighting 
     _blur: function() { },//Prevents auto close 
    }); 

    window.kendo.ui.plugin(MultiSelectBox); 
})(jQuery); 

//Sets up your optional label 
$(document).ready(function() { 
    $("#StructureCompany").data("kendoDropDownList").text("-- Select --"); 
}) 

//Does all the functionality 
function onSelect(e) { 
    var dataItem = this.dataItem(e.item); 
    var ddl = $("#StructureCompany").data("kendoDropDownList"); 
    var cbs = document.getElementsByName("cb"); 
    var display; 

    var list = []; 
    for (var i = 0; i < cbs.length; i++) { 
     if (cbs[i].checked) { 
      list.push(cbs[i].value); 
     } 
    } 

    if (list.length == 0) { 
     display = "-- Select --"; 
    } 
    else { 
     display = list.join(", "); 
    } 

    ddl.text(display); 
} 

Вот хитрая часть, я не ценитель, когда дело доходит до JavaScript, так простите мою терминологию, если это не так , Первый blob, в котором у вас есть новая функция области видимости, позволяет наследовать от пространства имен kendo.ui, чтобы вы могли изменить материал базового уровня. Такие, как закрывать автоматически и выделение функциональных

Это следующая капля просто моя альтернатива иметь свой «OptionLabel» (вы можете сделать это, как вы)

Последняя часть является выбор, который, как вы можете увидеть, создает значение запятой, а затем выталкивает его в виде дисплея в раскрывающемся списке с помощью метода «ddl.text()». Вы можете сделать это, как хотите. Надеюсь это поможет!