How can we implement select All option in Kendo MultiselectFor

问题

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

回答1:

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.

回答2:

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>

来源：https://stackoverflow.com/questions/28207667/how-can-we-implement-select-all-option-in-kendo-multiselectfor

标签

asp.net-mvc

kendo-ui

telerik

kendo-asp.net-mvc