Selecting all options in kendo multiselect

Question

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

Answer 1

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

Answer 2

I have prepared a quick dojo for you here. https://dojo.telerik.com/UpAFIdEx

This should hopefully be what you are after. I have just applied some simple styling just to get things looking a bit like your second image. but if you are using bootstrap or have css that handles positioning of elements this should work for you.

Any issues/questions let me know.