Kendo UI DropDownList作为多选择与复选框

我使用Kendo UI MVC包装。我需要一个带有复选框的DropDownList来允许我选择多个项目。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"); 
        }); 
       }))

来源

2014-05-03 Amir Bakhtiary

我想通过复选框选择多选的kendo下拉列表 –

你解决了你的问题吗？我建议你使用_Kendo Multiselect_而不是使用_DropDownList_。 –

这里有一种方法可以做到这一点：

查看

@(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-27 17:55:30

谢谢，防止突出显示和关闭的第一部分适用于所有kendo在页面上的下拉菜单，无论如何它会让kendo的特定实例下降吗？ – LP13

您正在删除的部分在所有kendo下拉列表中选择并模糊事件，是否可以只针对特定的下拉菜单？ – DoomerDGR8

Kendo UI DropDownList作为多选择与复选框

回答

相关问题