I am currently working with kendo UI and have implemented a dropdown list of checkboxes. The onchange event is triggering when the user clicks on the checkbox, but it is not firing when the user clicks on the text.
Thank you in advance for your assistance! -Sai.
<script type="text/x-kendo-template" id="CheckboxTemplate">
<li unselectable="on" class="k-item nowrap check-item">
<input type="checkbox" name="#= text #" value="#= value #" class="check-input showcolname" checked />
<span>#= text #</span>
</li>
</script>
function populateDropdown() {
dropdown = $("#dropDownList").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
template: $("#CheckboxTemplate").html(),
dataSource: displayColumns,
placeholder: "Select...",
select: function(e) {
e.preventDefault();
}
}).data("kendoDropDownList");
dropdown.list.width(250);
dropdown.list.find(".check-input,.check-item").bind("click", function(e) {
var $item = $(this);
var $input;
if($item.hasClass("check-item")) {
// Text was clicked
$input = $item.children(".check-input");
$input.prop("checked", !$input.is(':checked'));
} else {
// Checkbox was clicked
$input = $item;
}
// Check all clicked?
if($input.val() == "") dropdown.list.find(".check-input").prop("checked", $input.is(':checked'));
syncColumns();
e.stopImmediatePropagation();
});
}
function syncColumns(){
$('.showcolname').each(function() {
$(this).change(function(event) {
event.preventDefault();
var val = $(this).val();
var url = "${rootContext}${MyUrl}/"+val+"/"+this.checked;
var beforeSendCallBack = function() {};
var successCallback = function(data) {};
submitPost(url, beforeSendCallBack, successCallback, '','');
});
});
}