我们如何在Kendo MultiselectFor中实现全选选项 [英] How can we implement select All option in Kendo MultiselectFor
本文介绍了我们如何在Kendo MultiselectFor中实现全选选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们如何在Kendo Multiselect For中实现全选?
How can we implement select all option in Kendo Multiselect For?
@(Html.Kendo().MultiSelectFor(model => model.TestData)
.DataTextField("DataText")
.DataValueField("DataValue")
.Placeholder("Select..")
.Events(e => e.DataBound("CheckIfEmpty"))
.AutoBind(false)
.Enable(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Action", "Controller").Data("filterData");
})
.ServerFiltering(false);
})
)
推荐答案
请检查以下代码段.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-header">
<select id="TestData" data-placeholder="Select movie..."></select>
</div>
<div>
<button type="button" onclick="SelectAllClick();">Select All</button>
</div>
<script>
$(document).ready(function () {
var data = [
{ text: "12 Angry Men", value: "1" },
{ text: "Il buono, il brutto, il cattivo.", value: "2" },
{ text: "Inception", value: "3" },
{ text: "One Flew Over the Cuckoo's Nest", value: "4" },
{ text: "Pulp Fiction", value: "5" },
{ text: "Schindler's List", value: "6" },
{ text: "The Dark Knight", value: "7" },
{ text: "The Godfather", value: "8" },
{ text: "The Godfather: Part II", value: "9" },
{ text: "The Shawshank Redemption", value: "10" },
{ text: "The Shawshank Redemption 2", value: "11" }
];
$("#TestData").kendoMultiSelect({
dataTextField: "text",
dataValueField: "value",
dataSource: data
});
});
function SelectAllClick() {
var multiSelect = $("#TestData").data("kendoMultiSelect");
var selectedValues = "";
var strComma = "";
for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
var item = multiSelect.dataSource.data()[i];
selectedValues += strComma + item.value;
strComma = ",";
}
multiSelect.value(selectedValues.split(","));
}
</script>
</body>
</html>
让我知道是否有任何问题.
Let me know if any concern.
这篇关于我们如何在Kendo MultiselectFor中实现全选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
