使用CheckBox将Kendo UI DropDownList作为多选

Question

我正在使用Kendo UI MVC包装器。我需要一个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，因为这种风格效果不佳。但我找到了另一种选择，你将在下面看到

<强>脚本

//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命名空间继承，以便您能够更改基本级别的内容。例如自动关闭和突出显示功能

下一个blob只是我替代你的'OptionLabel'（你可以随心所欲地做到）

最后一部分是选择，正如您所看到的那样只是创建一个逗号值，然后通过'ddl.text（）'方法将其推送到下拉列表中的显示中。你可以随心所欲地做到这一点。希望这有帮助！