Accessing Filter Data in Custom Filter

1 Answer 162 Views
Filter Grid
Aleks
Top achievements
Rank 1
Veteran
Aleks asked on 18 Feb 2022, 04:45 AM

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.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 22 Feb 2022, 02:30 PM

Hi, Aleks,

Thank you for the provided feedback and details, I'll take a look at the example in the docs and update it.

As for your question, my suggestion would be to use the filterMenuInit event and update the status of the checkbox there:

  filterMenuInit: function(e) {
    let fieldName = e.field;
    
    // Check if this is the filter menu for "flags".
    if(fieldName == "num") {
      let container = e.container,
          input = e.container.find("#filterInput"),
          value = input.val(); // get the input value.
      // Find the checkbox with attribute "value=inputValue" and check it.
      container.find("[value='"+value+"']").prop("checked", true);
    }
  }

The alternative will be to use the grid reference in the filterUI function as you've mentioned.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Filter Grid
Asked by
Aleks
Top achievements
Rank 1
Veteran
Answers by
Georgi Denchev
Telerik team
Share this question
or