问在Kendo MultiSelect (MVC)中的“选择所有”
EN

Stack Overflow用户

提问于 2017-08-31 00:43:39

回答 2查看 4.5K关注 0票数 2

我有一个带有一些自定义编辑器的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中实现选择所有选项

Kendo选择/取消选择所有项目演示

Kendo论坛:读取数据后选择所有项目

我可以得到按钮来正确地选择所有的东西，但是当所有的东西都被选中并且我试图保存在网格上的条目时，这个操作不会被触发。什么都没有发生，选择重置。如果我手动选择仍然有效。

怎么一回事？自定义编辑器的完整代码：

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

kendo-ui

telerik

kendo-asp.net-mvc

kendo-multiselect

asp.net-mvc

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-09-07 00:59:42

在得到Telerik自己的论坛的帮助后，他们为我提供了一个可行的解决方案。我直接引用他们的话：

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

有答案的代码：

<script type="text/javascript">
    $(document).ready(function () {
        $("#selectall123").on('click', function (e) {
            // ...
             
            multiselect.value(all);
            multiselect.trigger("change");
        });
    });
</script>

票数 1

Stack Overflow用户

发布于 2018-03-08 09: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");
}