选择 kendo 多选中的所有选项

Question

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

我的视图是这样的：

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>

我想一次 select 所有选项，而不是一个一个地 select。

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

我在视图中添加了一个按钮。
我创建了一个Js函数来select全部：

我的代码是这样的：

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

一切正常！！！

我的问题是：

是否可以在 kendo Multiselect 中创建一个复选框，用作 select 所有，并且没有此按钮？

我想要的是这样的：

[多select 无按钮][2]

enter image description here

Answer 1

这里给大家准备了一个快速道场。 https://dojo.telerik.com/UpAFIdEx

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

任何 issues/questions 告诉我。

Answer 2

您可以将复选框添加到页眉模板，它可用于 select - de select 所有元素。

检查这个演示 dojo

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

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

选择 kendo 多选中的所有选项

Selecting all options in kendo multiselect

asp.net-mvc

kendo-ui

kendo-multiselect