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

Appetizing

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

Rafaelita

Thank you, that's exactly what I wanted, it saved my day! =) – Appetizing

@Appetizing You are welcome. Also, Please select it as an answer if you think it helped you.stackoverflow.com/help/someone-answers – Rafaelita

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.

Hanahanae

Thanks for your answer. That's almost it, but the checkbox would be in the header of my list, I changed my image to see better: ** Note: ** I do not know if it would be possible to do this, it's just a question. If it is not possible the solution you provided me, it caters very well. thank you – Appetizing

where you place the checkbox is entirely up to you. After all you are positioning the multiselect in the place you want it. So just position the checkbox by the muliselect and style appropriately. then just wire up the change event to perform whatever actions you want. – Hanahanae