Kendo UI DropDownList как множественный выбор с флажком

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

Я обнаружил, что этот 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");
                  });
              }))

kendo-ui kendo-dropdown
person Amir    schedule 03.05.2014    source источник
comment
я хочу выпадающий список кендо с помощью флажка для множественного выбора   -  person Amir    schedule 03.05.2014
comment
Вы решили свою проблему? Я советую вам использовать Kendo Multiselect вместо DropDownList.   -  person Iman Mahmoudinasab    schedule 26.05.2014

Ответы (1)


arrow_upward
2
arrow_downward

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

Просмотреть

@(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, потому что он не подходит для этого стиля. Но я нашел альтернативу, как вы увидите ниже

Скрипт

//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, так что простите мою терминологию, если она неверна. Первый большой двоичный объект, в котором у вас есть новая функция области, позволяет вам наследовать пространство имен kendo.ui, чтобы вы могли изменять материал базового уровня. Например, функции автоматического закрытия и выделения.

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

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

person thestephenstanton    schedule 27.03.2015
comment
Спасибо, первая часть, которая предотвращает выделение и закрытие, относится ко всем раскрывающимся спискам кендо на странице, можно ли как-то сделать это для конкретного экземпляра раскрывающегося списка кендо? - person LP13; 09.05.2016
comment
Часть, где вы удаляете события выбора и размытия во ВСЕХ раскрывающихся списках кендо, возможно ли настроить таргетинг только на определенные раскрывающиеся списки? - person Hassan Gulzar; 11.03.2018