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>

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

我正在寻找一种实现此目标的方法，所有解决方案都使我达到了这一结果：

我在视图中添加了一个按钮。
我创建了一个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

一切正常！

我的问题是：

是否可以在Kendo Multiselect内创建一个复选框以用作全选，而没有此按钮？

我想要的是这样的

[没有按钮的多重选择] [2]

enter image description here

Answer 1

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

这应该是您所追求的。我刚刚应用了一些简单的样式，只是为了使外观看起来像您的第二张图片。但是，如果您使用的是引导程序或具有处理元素定位的CSS的方法，那么这应该对您有用。

任何问题/疑问都会让我知道。

Answer 2

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

查看此演示dojo

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

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

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

2 个答案: