Kendo UI DropDownList 作为带有 CheckBox 的多选

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()”方法将其作为下拉列表中的显示推入。你可以随心所欲地做到这一点。希望这会有所帮助！