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

Question

[UPDATE]

After I did as in: http://dojo.telerik.com/aqIXa when I click for example ProductName filter, and then select and deselect all items, go to other fields example Unit Price,click select and deselect all I turnback to Product Name field, and in filter is now:

You can see that Select All combobox is created once more and it will continue to create after I repeat the steps. Does anyone has the Idea why is it happend?

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

http://dojo.telerik.com/iwAWU

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) {
        debugger;
        if (e.field == "ProductName" || "UnitPrice" || "UnitInStock") {
          initCheckboxFilter.call(this, e);

        }
      }

This looks like:

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? Thanks!

R.K.Saini R.K.Saini · Accepted Answer · 2016-09-15T12:31:43

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 http://dojo.telerik.com/aqIXa

Edit :

the way you are using to add Select all checkbox should be like this

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

insted of this

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

otherwise it will add multiple Select All check box for previously initialized filter-dropdowns.

Here is updated demo :http://dojo.telerik.com/aqIXa/4

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

1 Answers