Filter datatable by checkbox

Webix JS
#1

I’m trying to have a checkbox header as a filter to select 3 states:
[all records with checkbox active],
[all records with checkbox disable],
[all records (active and disable)],
I have not found something like this in examples and I am lost how to get it.

And example what I am talking about
https://webix.com/snippet/b69140ac
(in this example, the chechbox header acts putting all records active or disable, not filtering data)

Thanks!

#2

Please check: https://snippet.webix.com/qgbae3ev

masterCheckbox has its own complex logic and it’s not possible to customize it as you need.

Any html content (checkbox as well) can be defined in datafilter object as mentioned in this article.

However, it’s just a rendering. To make a full-featured filter, you need to do the following:

  • callmasterGrid.filterByAll() in filter’s onChange;

  • specify the value which will be handled as a filtering parameter ingetValue

  • set your owncompare method in the related column (custom filtering pattern)

In such checkbox, 3rd state does not affect the real “checked” parameter, so the returned value has to be a combination ofchecked andindeterminate attributes.

“Initial” state (that is set during the 1st rendering) won’t be applied untillfilterByAll, which can be called in any other filter on typing/selection. So the initial value of the checkbox isindeterminate in order to not affect filtering unless the value will be set by user.

#3

Again, Great!

#4

UPD: starting from Webix 8.0, the structure of datatable headers was changed (release notes), so the master checkbox in the example above should have a different getInpitNode implementation:

https://snippet.webix.com/9o2vq9ls

Line 9:

    return node.firstChild ? node.firstChild.firstChild : {

changed to

    return node.firstChild ? node.firstChild: {
#5

Hello,

maybe this implementation below is a little bit better. I also use this at 2 places and in case 2nd the original was not worked perfectly (rows, where checkbox cell value is unchecked, were not appeared).

function threeStateCompare(value, filter){

    if (filter == "thirdState") return true;  

    if (!filter && (value == 0 || !value)) return true;

    return value == filter;    

  };