在Kendo MultiSelect (MVC)中的“选择所有”
在Kendo MultiSelect (MVC)中的“选择所有”
提问于 2017-08-31 08:43:39
我有一个带有一些自定义编辑器的Kendo，一个是多选择。我为编辑器提供了一个cshtml文件，如下所示：
@model IEnumerable<ManageSitesInTemplateViewModel>
@(Html.Kendo().MultiSelectFor(m => m)
.AutoClose(false)
.DataTextField("SiteName")
.DataValueField("SiteId")
.BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])
)它使用BindTo，它是在请求页面时从ViewData中获取的数据。一切都很好，一切正常，没有问题。
问题是，我一直试图使用各种实现来实现“select/取消选择所有”按钮，但没有效果。我怀疑这是因为我使用了BindTo。
以下是我尝试过的一些例子：
如何在Kendo MultiselectFor中实现选择所有选项
我可以得到按钮来正确地选择所有的东西，但是当所有的东西都被选中并且我试图保存在网格上的条目时，这个操作不会被触发。什么都没有发生，选择重置。如果我手动选择仍然有效。
怎么一回事？自定义编辑器的完整代码：
@model IEnumerable<ManageSitesInTemplateViewModel>
@(Html.Kendo().MultiSelectFor(m => m)
.AutoClose(false)
.DataTextField("SiteName")
.DataValueField("SiteId")
.BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])
)
<button class="k-button" id="selectall123">Select All</button>
<script type="text/javascript">
$(document).ready(function () {
$("#selectall123").on('click', function (e) {
e.preventDefault();
var multiselect = $('#Sites').data("kendoMultiSelect");
var all = $.map(multiselect.dataSource.data(), function (dataItem) {
return dataItem.SiteId;
});
multiselect.value(all);
});
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-09-07 08:59:42
在得到Telerik自己的论坛的帮助后，他们为我提供了一个可行的解决方案。我直接引用他们的话：
当使用
MultiSelect的value()方法时，绑定到小部件的模型将不会被更新，因为此方法不会触发更改事件。您可以通过在选择项目后手动触发更改来绕过这一点：
有答案的代码：
<script type="text/javascript">
$(document).ready(function () {
$("#selectall123").on('click', function (e) {
// ...
multiselect.value(all);
multiselect.trigger("change");
});
});
</script>Stack Overflow用户
发布于 2018-03-08 17:54:57
我也有过同样的问题。这是一个对我有用的例子。
@(Html.Kendo().MultiSelect().Name("Config_MetricType")
.BindTo(Model.Config_MetricTypes)
.DataValueField("MetricTypeId")
.DataTextField("MetricDisplayName")
.Events(e => e.DataBound("selectAllMetrics"))
.HtmlAttributes(new { style = "width: 50%", @class = "pull-left" }))JavaScript函数：
function selectAllMetrics() {
var Config_MetricType = $("#Config_MetricType").data("kendoMultiSelect");
var all = $.map(Config_MetricType.dataSource.data(), function (dataItem) {
return dataItem.MetricTypeId; //DataValueField
});
Config_MetricType.value(all);
Config_MetricType.trigger("change");
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45977080
复制相关文章
相似问题
腾讯云开发者
