asp.net-mvckendo-uikendo-multiselect

Selecting all options in kendo multiselect


I have in my application a Kendo Multiselect component where I select my available options.

my View is like this:

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>

I want to select all the options at once, and not be selecting one by one.

I looked for a way to do this and all the solutions brought me to this result:

  1. I added a button in my View.
  2. I created a Js function to select all:

my code stayed like this:

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

my result is this: multiselect with button add all

Everything is working perfectly !!!

My question is:

Is it possible to create a checkbox inside the kendo Multiselect, to be used as select all, and not have this button?

What I want is something like this:

[multiselect without button][2]

enter image description here


Solution

  • You can add checkbox to header template which can be used to select - de select all elements.

    Check this demo dojo

    Though example here is shown using a Kendo UI JS, you can accomplish it using Kendo ASP.NET as well.

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