javascript - Kendo UI multi select drop down with filter and select all options -
i need kendo ui dropdown list following features.
- multi select dropdown select check box check multiple options @ at time.
- select checkbox header template, on when click on it, filtered search results of option selected.
i have gone through many references , find close solution telrik. in first requirement satisfied. have attached 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 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 achieve second requirement, select option selects filtered search result. i'm looking foe kend ui multi select option itself. i'm not interested in jquery multi select drop downs. looking forward help. in advance.
as per understanding question seems want separate header performs selection on filtered list. use 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 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>
Comments
Post a Comment