Selecting all options in kendo multiselect - asp.net-mvc

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:
I added a button in my View.
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.