Sunday, 15 August 2010

jquery - kendo dropdownlist with checkbox -



jquery - kendo dropdownlist with checkbox -

good day,

i have kendo dropdownlist has checkboxes. info dropdown coming table in sql database. problem when select info in dropdown doesn't display in dropdownlist (i want show multiselect function). im not sure if im getting value of selected item when select it.

heres code:

html:

<input id="dropdownlist" runat="server" /> <script type="text/x-kendo-template" id="checkboxtemplate"> <li unselectable="on" class="k-item nowrap check-item"> <input type="checkbox" name="#= day #" value="#= id #" class="check-input" #= "" ? "checked" : "" # /> <span>#= day #</span> <br/> <span>#= starttime #-#= endtime #</span> </li> </script>

scripts:

<script type="text/javascript"> $(document).ready(function () { var clientcusid = $("#clientcusid").val(); var clientid = $("#clientid").val(); var clientcusposid = $("#clientcusposid").val(); var info = new kendo.data.datasource({ transport: { read: { url: '/customer/loadcustomerpositionshiftlist?clientcusid=' + clientcusid + '&clientid=' + clientid + '&clientcusposid=' + clientcusposid, datatype: "json", type: "post" } } }); dropdown = $("#dropdownlist").kendodropdownlist({ datatextfield: "day", datavaluefield: "id", optionlabel: { day: "--select all--", starttime: "", endtime:"", id: "" }, template: $("#checkboxtemplate").html(), datasource: data, select: function (e) { e.preventdefault(); } }).data("kendodropdownlist"); //it doesn't go here dropdown.list.find(".check-input,.check-item").bind("click", function (e) { var $item = $(this); var $input; if ($item.hasclass("check-item")) { // text clicked $input = $item.children(".check-input"); $input.prop("checked", !$input.is(':checked')); } else // checkbox clicked $input = $item; var val = $input.val(); //check clicked? if (val == "") dropdown.list.find(".check-input").prop("checked", $input.is(':checked')); var ddl = $('#dropdownlist').data().kendodropdownlist; var model = ddl.dataitem($input.closest('.k-item').index()); alert(model.text); updatedropdown() e.stopimmediatepropagation(); }); updatedropdown() }); function updatedropdown() { var items = []; dropdown.list.find(".check-input").each(function () { var $input = $(this); if ($input.val() != "" && $input.is(':checked')) items.push($input.next().text()); }); // check check if items checked $(dropdown.list.find(".check-input")[0]).prop("checked", items.length == dropdown.list.find(".check-input").length - 1); dropdown.text(items.tostring()); } </script>

hope help me this.

this reference: http://jsfiddle.net/gregmarkv/jnnd5/

http://jsfiddle.net/mg89g/331/

jquery asp.net-mvc-3 checkbox kendo-dropdown

No comments:

Post a Comment