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作爲多選擇與複選框

回答

相關問題