Выбор всех параметров в кендо мультиселект

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, чтобы использовать его как select all, и не иметь этой кнопки?

Я хочу что-то вроде этого:

[множественный выбор без кнопки] [2]

введите описание изображения здесь

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

Надеюсь, это должно быть то, что вы ищете. Я только что применил несколько простых стилей, чтобы вещи выглядели немного как ваше второе изображение. но если вы используете bootstrap или имеете css, который обрабатывает позиционирование элементов, это должно работать для вас.

Любые вопросы / вопросы, дайте мне знать.