Kendo MultiSelect（mvc）中的“全选”答案

【问题标题】："Select all" in Kendo MultiSelect (mvc)Kendo MultiSelect（mvc）中的“全选”
【发布时间】：2018-02-09 03:38:36
【问题描述】：

我有一个带有一些自定义编辑器的剑道网格，一个是多选（这个http://demos.telerik.com/aspnet-mvc/multiselect）。我有一个用于编辑器的 cshtml 文件，如下所示：

@model IEnumerable<ManageSitesInTemplateViewModel>
@(Html.Kendo().MultiSelectFor(m => m)
    .AutoClose(false)
    .DataTextField("SiteName")
    .DataValueField("SiteId")
    .BindTo((IEnumerable<ManageSitesInTemplateViewModel>)ViewData["sites"])
)

它使用“bindto”，这是从请求页面时创建的 ViewData 获取的数据。一切正常，应该没有问题。问题是我一直在尝试使用各种实现来实现“全选/取消全选”按钮，但无济于事。我怀疑这是因为我使用了“bindto”。这是我尝试过的一些示例：

How can we implement select All option in Kendo MultiselectFor

http://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/selection/select-deselect-all-items

http://www.telerik.com/forums/select-all-items-after-data-is-read

我可以得到按钮正确选择一切，但是选择一切并尝试在网格上保存条目时，不会触发操作。没有任何反应，选择重置。如果我手动选择仍然有效。

发生了什么事？自定义编辑器的完整代码：

    @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>

【问题讨论】：

标签： asp.net-mvc kendo-ui telerik kendo-asp.net-mvc

【解决方案1】：

我遇到了同样的人，这是一个对我有用的例子。

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

【讨论】：

【解决方案2】：

我将发布我最终得到的解决方案，以防其他人找到解决这个问题的方法。从 Telerik 自己的论坛获得帮助后，他们为我提供了这个可行的解决方案。我只是直接引用他们的话：

当使用MultiSelect的value()方法时，绑定到widget的模型不会被更新，因为这个方法不会触发change事件。您可以通过在选择项目后手动触发更改来绕过此：

有答案的代码：

<script type="text/javascript">
$(document).ready(function () {
$("#selectall123").on('click', function (e) {
...

multiselect.value(all);
multiselect.trigger("change");
});
});
</script>

【讨论】：