How can we implement select All option in Kendo MultiselectFor

Question

How can we implement select all option in Kendo Multiselect For?

        @(Html.Kendo().MultiSelectFor(model => model.TestData)
                    .DataTextField("DataText")                        
                    .DataValueField("DataValue")
                    .Placeholder("Select..")
                    .Events(e => e.DataBound("CheckIfEmpty"))                        
                    .AutoBind(false)                        
                    .Enable(false)                                                
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("Action", "Controller").Data("filterData");
                        })                            
                        .ServerFiltering(false);
                    })
                    )

Could you please provide some more detail or code? – Jayesh Goyani Jan 29 '15 at 06:04 — Jayesh Goyani, Jan 29 '15 at 06:04

Jayesh Goyani · Accepted Answer · 2015-01-30T06:50:03.440

Please check below code snippet.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

</head>
<body>
    <div class="demo-section k-header">
        <select id="TestData" data-placeholder="Select movie..."></select>
    </div>
    <div>
        <button type="button" onclick="SelectAllClick();">Select All</button>
    </div>
    <script>
        $(document).ready(function () {
            var data = [
            { text: "12 Angry Men", value: "1" },
            { text: "Il buono, il brutto, il cattivo.", value: "2" },
            { text: "Inception", value: "3" },
            { text: "One Flew Over the Cuckoo's Nest", value: "4" },
            { text: "Pulp Fiction", value: "5" },
            { text: "Schindler's List", value: "6" },
            { text: "The Dark Knight", value: "7" },
            { text: "The Godfather", value: "8" },
            { text: "The Godfather: Part II", value: "9" },
            { text: "The Shawshank Redemption", value: "10" },
            { text: "The Shawshank Redemption 2", value: "11" }
            ];

            $("#TestData").kendoMultiSelect({
                dataTextField: "text",
                dataValueField: "value",
                dataSource: data
            });

        });
        function SelectAllClick() {
            var multiSelect = $("#TestData").data("kendoMultiSelect");
            var selectedValues = "";
            var strComma = "";
            for (var i = 0; i < multiSelect.dataSource.data().length; i++) {
                var item = multiSelect.dataSource.data()[i];
                selectedValues += strComma + item.value;
                strComma = ",";
            }
            multiSelect.value(selectedValues.split(","));
        }

    </script>
</body>
</html>

Let me know if any concern.

Seems its good Jayaesh, but how can implement dynamic datasource. i.e. .DataSource(source => { source.Read(read => { read.Action("Action", "Controller").Data("filterData"); }) .ServerFiltering(false); }) — Jagadeeswararo, Jan 30 '15 at 06:24
Above code is worked for all datasource. You need to add function "SelectAllClick()" and "select all" button code in your page. In function I have not used my static datasource "data" anywhere inside the function so it will works for all type of datasource, Inaddition it doesn't matter this control is created by MVC or PHP or JSP. — Jayesh Goyani, Jan 30 '15 at 06:54
Hi Jayesh, having issue with this statement selectedValues += strComma + item.value; here item.value is displaying as undefined. — Jagadeeswararo, Jan 30 '15 at 09:51
hi jayesh... finally got by following yours code... Thanks. but i'm using MultiSelectFor (without "select") and ur javascript function SelectAllClick(). Thanks Jayesh... — Jagadeeswararo, Jan 30 '15 at 10:11
Does it work with a BindTo? I tried with a BindTo and it will add the values as selected, but does not remove them from the available list of values. Allowing folks to select the same value more than once. — George D., Oct 27 '16 at 16:23

score 1 · Answer 2 · answered Jan 29 '15 at 15:58

Something like this should work:

<script>
    $('#selectAll').click(function(){
        var ctl = $('#TestData').data('kendoMultiSelect');
        var opts = ctl.dataSource.data();
        var selected = [];
        for (var idx = 0; idx < opts.length; idx++) {
          selected.push(opts[idx].value);
        }
        ctl.value(selected);
      });
</script>

If you're using something like underscore, I can make it even easier for you by doing something like this:

<script>
    $('#selectAll').click(function(){
        var ctl = $('#TestData').data('kendoMultiSelect');
        var opts = ctl.dataSource.data();
        var selected = _.pluck(opts, 'value');

        ctl.value(selected);
      });
</script>

Humble suggestion, you can use Array.map as well, like opts.map(p=> p.value) but I am not sure if it is supported in all browsers versions. Btw this answer help me! thanks!! — hmota, Oct 06 '20 at 18:10

How can we implement select All option in Kendo MultiselectFor

2 Answers2

Linked