According to here: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.ui
You can (for example) replace a filter input with a textarea, however, the example as shown doesn't work because it's not bound to the filter value.
It will work if you add the data-bind attribute:
$(element).replaceWith("<textarea data-bind='value:filters[0].value'></textarea>");
Now the filter value actually gets passed to the server and populated when you call setOptions on the grid.
As there is no easy way to provide your own filter template, I'm trying to create a complex filter (a checkbox list for a flags enum) using replaceWith.
I have some checkboxes and use some JavaScript to set the value of an input that is bound using the data-bind attribute.
This all works fine and the filter value is passed to the backend as expected, and the input value is populated via setOptions when I reload.
For example:
$("#grid").kendoGrid({
columns: [ {
field: "flags",
filterable: {
ui: "testFilter"
}
} ],
filterable: true,
//...
});
function testFilter(e) {
$(e).replaceWith(`
<input type='checkbox' value='1' onclick='setFilterInput(this);' />
<input type='checkbox' value='2' onclick='setFilterInput(this);' />
<input type='checkbox' value='4' onclick='setFilterInput(this);' />
<input type='checkbox' value='8' onclick='setFilterInput(this);' />
<input id='filterInput' type='text' data-bind='value:filters[0].value' />
`);
}
function setFilterInput(e) {
var x = $(e).val();
var c = $(e).is(":checked");
var input = $("#filterInput");
var val = parseInt(input.val(), 10);
if (val === NaN) {
val = 0;
}
input.val(c ? val | x : val ^ x);
input.trigger("change");
}
The problem is that I need to know the current filter value when the testFilter function is called, so I can check the correct checkboxes when the grid is loaded. For example, this shows an empty value, even when the filter is already set:
function testFilter(e) {
console.log("the current filter value is", $(e).val());
}
I can't get the value of the filter input because it's bound after the testFilter function is called.
How can I access filters[0].value from inside the testFilter UI function?
Preferably without having to go top-down via $("#grid").data("kendoGrid") etc.