2

I'm Using Kendo UI MVC wrapper. I need a DropDownList with checkbox for each item to allow me select multiple of items.

I found this jsfiddle doing what I want to achieve, but it is not with MVC wrapper.Would you please show how I can implement the same thing with MVC wrapper?

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

1 回答 1

2

这是您可以做到的一种方法：

看法

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

于 2015-03-27T17:55:30.090 回答