How to do exactly as in the snippet below, excepting using the treecheckbox?
Note the format of the template for the column to be filtered on:
template: function (obj, common) {
return common.space(obj, common) + common.icon(obj, common) +
common.treecheckbox(obj, common) + “ ” + obj.Value;
}
},
Finally managed to work this out. See code below:
// #region FILTER CHECKBOXES
webix.ui.datafilter.filterCheckBoxes = webix.extend({
getInputNode: function (node) {
return node.firstChild ? node.firstChild.firstChild : {
indeterminate: true
};
},
getValue: function (node) {
var value = this.getInputNode(node).checked;
var three = this.getInputNode(node).indeterminate;
return three ? "thirdState" : value;
},
_stateSetter: function (e) {
if (this.readOnly)
this.checked = this.readOnly = false;
else if (!this.checked)
this.readOnly = this.indeterminate = true;
},
refresh: function (master, node, column) {
master.registerFilter(node, column, this);
node.querySelector("input").onclick = this._stateSetter;
node.querySelector("input").indeterminate = true;
node.querySelector("input").onchange = function () {
master.filterByAll();
};
},
render: function (master, column) {
var html = "<input type='checkbox' id='cb1'>" + "Hide/Show rows";
return html;
}
}, webix.ui.datafilter.numberFilter);
// #endregion FILTER CHECKBOXES
function threeStateCompare(value, filter, obj) {
if (filter === “thirdState”) return true; // Return all rows.
if (filter && obj.checked) // 3-state checked and rows checked.
return true;
else if (filter === "" && !obj.checked) // 3-state unchecked and row unchecked. This should be the default setting.
return true;
else
return false; // 3-state unchecked and row checked.
}