Maja Meško Maja Meško - 1 year ago 222
jQuery Question

Kendo UI - custom grid filter: checkbox doesn't work on each click

I'm currently working in Kendo and try to make custom grid filter for each column.
I used this example:

inside initCheckboxFilter function I added, which created checkbox for select all.

var selectAllCheckbox= $("<div><input type='checkbox' id='checkAll' checked/> Select All</div>").insertBefore(".k-filter-help-text");

and outside that function I implemeted:

function clickMe(){
$("#checkAll").click(function () {
if ($("#checkAll").is(':checked')) {
$(".book").prop("checked", true);
} else {
$(".book").prop("checked", false);

(.book is class for template inside:

var element = $("<div class='checkbox-container'></div>").insertAfter(helpTextElement).kendoListView({
dataSource: checkboxesDataSource,
template: "<div><input type='checkbox' class='colDefFilter' value='#:" + field + "#' checked />#:" + field + "#</div>",


I also added UnitPrice and UnitInStock fields:

function onFilterMenuInit(e) {
if (e.field == "ProductName" || "UnitPrice" || "UnitInStock") {, e);


This looks like:

enter image description here

The first time I click Select All checkbox on some column filter, it check and uncheck all items and it works fine. When I try to do it on other column, the event is not trigger. Does anyone has idea what is wrong?

Answer Source

Your problem is that you are using id for check all checkbox that's why jquery always select check-box from first drop-down (Product)

you need to use checkAll as class not id then change your clickMe() function like this and it will work :

function clickMe(){
       $(".checkAll").click(function () {
        if ($(this).is(':checked')) {
           $(this).closest('.k-filter-menu').find(".book").prop("checked", true);
        } else {
            $(this).closest('.k-filter-menu').find(".book").prop("checked", false);

Here is working example