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

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

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

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

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

Источник

2 ответа

Решение

Вы можете добавить флажок в шаблон заголовка, который может быть использован для выбора - де выбрать все элементы.

Проверьте это демо додзе

Хотя пример здесь показан с использованием Kendo UI JS, вы также можете выполнить это с помощью Kendo ASP.NET.

@(Html.Kendo().MultiSelect()
....
 .HeaderTemplate("<label><input type='checkbox' id='selectAll'> Select All</label>")
Источник

Я приготовил для тебя быстрое додзё. https://dojo.telerik.com/UpAFIdEx

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

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

Источник
Другие вопросы по тегам