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

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

我的结果是这样的： multiselect with button add all

一切正常！！！

我的问题是：

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

我想要的是这样的：

[不带按钮的多选][2]

enter image description here

Answer 1

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

查看此演示dojo

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

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

Answer 2

我在这里为你准备了一个快速道场。 https://dojo.telerik.com/UpAFIdEx

这应该是你所追求的。我刚刚应用了一些简单的样式，只是为了让事情看起来有点像你的第二张图片。但是，如果您使用的是引导程序或拥有处理元素定位的 css，这应该适合您。

如有任何问题/疑问，请告诉我。