CODEWITHSUNDEEP
javascriptjquerykendo-uimulti-select
Nitheesh
Nitheesh

Reputation: 19986

Kendo UI multi select drop down with filter and select all options

I need a kendo ui dropdown list with the following features.

  1. Multi select dropdown with a select check box to check multiple options at at time.
  2. Select all checkbox as a header template, on which when I click on it, all the filtered search results of the option is selected.

Required Solution

I have gone through many references and find a close solution from telrik. In which my first requirement is satisfied. I have attached the code snippet here with.

<!DOCTYPE html>
<html>

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="example" role="application">
        <div class="demo-section k-header">
            <h2>Invite Attendees</h2>
            <label for="required">Required</label>
            <select id="required" multiple="multiple" data-placeholder="Select attendees...">
                <option selected>Steven White</option>
                <option>Nancy King</option>
                <option>Nancy Davolio</option>
                <option>Robert Davolio</option>
                <option>Michael Leverling</option>
                <option>Andrew Callahan</option>
                <option>Michael Suyama</option>
                <option selected>Anne King</option>
                <option>Laura Peacock</option>
                <option>Robert Fuller</option>
                <option>Janet White</option>
                <option>Nancy Leverling</option>
                <option>Robert Buchanan</option>
                <option>Margaret Buchanan</option>
                <option selected>Andrew Fuller</option>
                <option>Anne Davolio</option>
                <option>Andrew Suyama</option>
                <option>Nige Buchanan</option>
                <option>Laura Fuller</option>
            </select>
        </div>
        <style>
            .k-list .k-item {}

            .k-item input {}
        </style>
        <script>
            $(document).ready(function () {
                var checkInputs = function (elements) {
                    elements.each(function () {
                        var element = $(this);
                        var input = element.children("input");

                        input.prop("checked", element.hasClass("k-state-selected"));
                    });
                };
                // create MultiSelect from select HTML element
                var required = $("#required").kendoMultiSelect({
                    itemTemplate: "<input type='checkbox'/> #:data.text#",
                    autoClose: false,
                    dataBound: function () {
                        var items = this.ul.find("li");
                        setTimeout(function () {
                            checkInputs(items);
                        });
                    },
                    change: function () {
                        var items = this.ul.find("li");
                        checkInputs(items);
                    }
                }).data("kendoMultiSelect");
            });
        </script>
    </div>
</body>

</html>

How can I achieve my second requirement, select all option that selects my filtered search result. I'm looking foe the kend ui Multi Select option itself. I'm not interested in jQuery multi select drop downs. Looking forward for help. Thanks in advance.

Upvotes: 1

Views: 12978

Answers (2)

Nitheesh
Nitheesh

Reputation: 19986

Thanks for the solution Vispan good work. I have developed the solution from the code that you have posted. I'm here sharing this code since this might be very helpful for some of you.

<!DOCTYPE html>
<html>

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
    <script>
        $(document).ready(function () {



            var data = [{"name":"Afghanistan"},{"name":"Åland Islands"},{"name":"Albania"},{"name":"Algeria"},{"name":"American Samoa"},{"name":"Andorra"},{"name":"Angola"},{"name":"Anguilla"},{"name":"Antarctica"},{"name":"Antigua and Barbuda"},{"name":"Argentina"},{"name":"Armenia"},{"name":"Aruba"},{"name":"Australia"},{"name":"Austria"},{"name":"Azerbaijan"},{"name":"Bahamas"},{"name":"Bahrain"},{"name":"Bangladesh"},{"name":"Barbados"},{"name":"Belarus"},{"name":"Belgium"},{"name":"Belize"},{"name":"Benin"},{"name":"Bermuda"},{"name":"Bhutan"},{"name":"Bolivia"},{"name":"Bonaire"},{"name":"Bosnia and Herzegovina"},{"name":"Botswana"},{"name":"Bouvet Island"},{"name":"Brazil"},{"name":"British Indian Ocean Territory"},{"name":"British Virgin Islands"},{"name":"Brunei"},{"name":"Bulgaria"},{"name":"Burkina Faso"},{"name":"Burundi"},{"name":"Cambodia"},{"name":"Cameroon"},{"name":"Canada"},{"name":"Cape Verde"},{"name":"Cayman Islands"},{"name":"Central African Republic"},{"name":"Chad"},{"name":"Chile"},{"name":"China"},{"name":"Christmas Island"},{"name":"Cocos (Keeling) Islands"},{"name":"Colombia"},{"name":"Comoros"},{"name":"Republic of the Congo"},{"name":"Democratic Republic of the Congo"},{"name":"Cook Islands"},{"name":"Costa Rica"},{"name":"Côte d'Ivoire"},{"name":"Croatia"},{"name":"Cuba"},{"name":"Curaçao"},{"name":"Cyprus"},{"name":"Czech Republic"},{"name":"Denmark"},{"name":"Djibouti"},{"name":"Dominica"},{"name":"Dominican Republic"},{"name":"Ecuador"},{"name":"Egypt"},{"name":"El Salvador"},{"name":"Equatorial Guinea"},{"name":"Eritrea"},{"name":"Estonia"},{"name":"Ethiopia"},{"name":"Falkland Islands"},{"name":"Faroe Islands"},{"name":"Fiji"},{"name":"Finland"},{"name":"France"},{"name":"French Guiana"},{"name":"French Polynesia"},{"name":"French Southern and Antarctic Lands"},{"name":"Gabon"},{"name":"Gambia"},{"name":"Georgia"},{"name":"Germany"},{"name":"Mali"},{"name":"Malta"},{"name":"Marshall Islands"},{"name":"Martinique"},{"name":"Mauritania"},{"name":"Mauritius"},{"name":"Mayotte"},{"name":"Mexico"},{"name":"Micronesia"},{"name":"Moldova"},{"name":"Monaco"},{"name":"Mongolia"},{"name":"Montenegro"},{"name":"Montserrat"},{"name":"Morocco"},{"name":"Mozambique"},{"name":"Myanmar"},{"name":"Namibia"},{"name":"Nauru"},{"name":"Nepal"},{"name":"Netherlands"},{"name":"New Caledonia"},{"name":"New Zealand"},{"name":"Nicaragua"},{"name":"Niger"},{"name":"Nigeria"},{"name":"Niue"},{"name":"Norfolk Island"},{"name":"North Korea"},{"name":"Northern Mariana Islands"},{"name":"Norway"},{"name":"Oman"},{"name":"Pakistan"},{"name":"Palau"},{"name":"Palestine"},{"name":"Panama"},{"name":"Papua New Guinea"},{"name":"Paraguay"},{"name":"Peru"},{"name":"Philippines"},{"name":"Pitcairn Islands"},{"name":"Poland"},{"name":"Portugal"},{"name":"Turks and Caicos Islands"},{"name":"Tuvalu"},{"name":"Uganda"},{"name":"Ukraine"},{"name":"United Arab Emirates"},{"name":"United Kingdom"},{"name":"United States"},{"name":"United States Minor Outlying Islands"},{"name":"United States Virgin Islands"},{"name":"Uruguay"},{"name":"Uzbekistan"},{"name":"Vanuatu"},{"name":"Venezuela"},{"name":"Vietnam"},{"name":"Wallis and Futuna"},{"name":"Western Sahara"},{"name":"Yemen"},{"name":"Zambia"},{"name":"Zimbabwe"}];

            var ds = new kendo.data.DataSource({
                data: data
            });

            var checkInputs = function (elements) {
                elements.each(function () {
                    var element = $(this);
                    var input = element.children("input");

                    input.prop("checked", element.hasClass("k-state-selected"));
                });
            };

            $("#items").kendoMultiSelect({
                dataValueField: "name",
                dataTextField: "name",
                dataSource: ds,
                dataBound: function () {
                    var items = this.ul.find("li");
                    setTimeout(function () {
                        checkInputs(items);
                    });
                },
                itemTemplate: "<input type='checkbox'/> #:data.name#",
                headerTemplate: "<div><input type='checkbox' id='Header'><label> Select All</label></div>",
                autoClose: false,
                change: function () {
                    var items = this.ul.find("li");
                    checkInputs(items);
                }
            });

            $('#Header').click(function () {
                if ($(this).is(':checked')) {
                    $('#items_listbox').find("li").each(function () {
                        $(this).trigger("click");
                        //$(this).find("input").prop("checked",true);
                    });
                } else {
                    $('#items_listbox').find("li").each(function () {
                        $(this).trigger("click");
                        //$(this).find("input").prop("checked", false);
                    });
                }
            });

            $('#containerDiv').keydown(function (e) {
                $("#Header").attr("checked", false);
            });

        });
    </script>
</head>

<body>

    <div id="example" role="application">
        Type a country name:
        <div id="containerDiv"><div id="items"></div></div>
    </div>
</body>

</html>

Upvotes: 5

RonyLoud
RonyLoud

Reputation: 2426

As per understanding from the question it seems that you want a separate header which performs selection on the filtered list. Use this Code:

<!DOCTYPE html>
<html>

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

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>

<body>

    <div id="example" role="application">
        <div class="demo-section k-header">
            <h2>Invite Attendees</h2>
            <label for="required">Required</label>
            <input type="checkbox" id="Header" value="Header"  />
            <select id="required" multiple="multiple" data-placeholder="Select attendees...">
                <option >Steven White</option>
                <option>Nancy King</option>
                <option>Nancy Davolio</option>
                <option>Robert Davolio</option>
                <option>Michael Leverling</option>
                <option>Andrew Callahan</option>
                <option>Michael Suyama</option>
                <option >Anne King</option>
                <option>Laura Peacock</option>
                <option>Robert Fuller</option>
                <option>Janet White</option>
                <option>Nancy Leverling</option>
                <option>Robert Buchanan</option>
                <option>Margaret Buchanan</option>
                <option>Andrew Fuller</option>
                <option>Anne Davolio</option>
                <option>Andrew Suyama</option>
                <option>Nige Buchanan</option>
                <option>Laura Fuller</option>
            </select>
        </div>
        <style>
            .k-list .k-item {
            }

            .k-item input {
            }
        </style>
        <script>
            $(document).ready(function () {
                var checkInputs = function (elements) {
                    elements.each(function () {
                        var element = $(this);
                        var input = element.children("input");

                        input.prop("checked", element.hasClass("k-state-selected"));
                    });
                };
                // create MultiSelect from select HTML element
                var required = $("#required").kendoMultiSelect({
                    itemTemplate: "<input type='checkbox'/> #:data.text#",
                    autoClose: false,
                    dataBound: function () {
                        var items = this.ul.find("li");
                        setTimeout(function () {
                            checkInputs(items);
                        });
                    },
                    change: function () {
                        var items = this.ul.find("li");
                        checkInputs(items);
                    }
                }).data("kendoMultiSelect");


                $('#Header').click(function () {
                    if ($(this).is(':checked')) {
                        $('#required_listbox').find("li").each(function () {
                            $(this).trigger("click");
                            //$(this).find("input").prop("checked",true);
                        });
                    }
                    else {
                        $('#required_listbox').find("li").each(function () {
                            $(this).trigger("click");
                            //$(this).find("input").prop("checked", false);
                        });
                    }
                });
            });
        </script>
    </div>
</body>

</html>

Upvotes: 0

Related Questions