选择剑道多重选择中的所有选项

Question

我的应用程序中有一个 Kendo Multiselect 组件，我可以在其中选择可用选项。

我的观点是这样的：

div class="editor-field  col-width45">
<div>
    @(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
                    .DataTextField("Name")
                    .HtmlAttributes(new { @class = "size100Percent", Id = "FeaturesSelect" })
                    .DataValueField("Id")
                    .Placeholder("Selecione...")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetFeatures", "Role");
                        })
                        .ServerFiltering(false);
                    }))
</div>

</div>

我想一次选择所有选项，而不是一一选择。

我寻找一种方法来做到这一点，所有的解决方案都给我带来了这个结果：

1. 我在视图中添加了一个按钮。
2. 我创建了一个 Js 函数来选择所有：

我的代码保持这样：

div class="editor-field  col-width45">
<div>
    @(Html.Kendo().MultiSelectFor(model => model.FeaturesValues)
                    .DataTextField("Name")
                    .HtmlAttributes(new { @class = "size100Percent", Id = "FeaturesSelect" })
                    .DataValueField("Id")
                    .Placeholder("Selecione...")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetFeatures", "Role");
                        })
                        .ServerFiltering(false);
                    }))
</div>
</br>
<div>
    @(Html.Kendo().Button()
                .Name("SelectAll")
                .HtmlAttributes(new { type = "button" })
                .Content("Selecionar todos")
                .Events(ev => ev.Click("selectAll")))
</div>

JavaScript：

function selectAll() {
    var multiSelect = $("#FeaturesSelect").data("kendoMultiSelect");
    var selectedValues = [];

    for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
        var item = multiSelect.dataSource.data()[i];
        selectedValues.push(item.Id);
    }
    multiSelect.value(selectedValues);
    multiSelect.trigger("change");
}

我的结果是这样的： 使用按钮添加全部进行多选

一切都很完美！

我的问题是：

是否可以在剑道多选中创建一个复选框，用作全选，而没有此按钮？

我想要的是这样的：

[无按钮多选][2]

在此输入图像描述

Answer 1

您可以将复选框添加到标题模板，该复选框可用于选择 - 取消选择所有元素。

检查这个演示道场

虽然此处的示例是使用 Kendo UI JS 显示的，但您也可以使用 Kendo ASP.NET 来完成它。

@(Html.Kendo().MultiSelect()
....
 .HeaderTemplate("<label><input type='checkbox' id='selectAll'> Select All</label>")