DropDownList for filter operator does not trigger change event

[Dima]

Hello,

we configured our grid to be filterable by a filter row. Filter row support autocomplete, however the autocomplete's default filter operator is 'startswith'. Our requirement is, that the autocomplete's filter operator corresponds to the operator selected in the operator-dropdownlist (next to the input-field). I am trying to fullfill that requirement by adding a change-listener to the operator-dropdownlist, which does not work, because the change-event is not being triggered.

Here is my javascript-code for that purpose:

$('#mygrid .k-filter-row th').each(function () {
    var filterDropdown = $($(this).find('.k-dropdown-operator input')[0]).data("kendoDropDownList");
    filterDropdown.bind('change', function () {
        // this listener is not being triggered after selecting a new value
    });
});

 

Any ideas why?

Thanks in advance & best regards,

Dima.

[Marin Bratanov]

Hello Dima,

The grid filtering is designed to work the other way around - the data from the autocomlete is to be entered by the user and the autocomplete is just an assistant for the input, then the user should choose a filter operator from the dropdown and this filters the grid with the selected text and operator.

If you want this to happen the other way around, it is important to note that choosing an operator will filter the grid data before the user can see the effect of the operator change on the autocomplete and so there will be an increase in the action calls for data. Also, the autocomplete supports only three operators, so you may need to create some sort of a map. 

With this in mind, I am not sure this will provide you with the desired user experience, yet you can find an example based on this demo below. What I can suggest you look into is creating a custom UI template for the filter cell so you can have more freedom in defining the way the user will input data: https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.filterable.cell#columns.filterable.cell.template.

As promised, here is a sample script that can change the autocopmlete filter method. You can find attached below a short video of the expected behavior.

<script>
    $(document).ready(function () {
        $('#grid .k-filter-row th').each(function (index, elem) {
            var filterDropdown = $(elem).find('input.k-dropdown-operator').first().data("kendoDropDownList");
            if (filterDropdown) {
                filterDropdown.bind('select', function (e) {
                    var th = e.sender.wrapper.parents("th").first();
                    var autoComplete = th.find('input[data-role="autocomplete"]').data("kendoAutoComplete");
                    if (autoComplete) {
                        //supported values are startswith, endswith and contains
                        //https://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete/configuration/filter
                        //so this is a sample map to get similar behavior form the grid operators
                        var operatorMap = {
                            "eq": "startswith",
                            "neq": "endswith",
                            "startswith": "startswith",
                            "contains": "contains",
                            "doesnotcontain": "endswith",
                            "endswith": "endswith",
                            "isnull": "endswith",
                            "isnotnull": "contains",
                            "isempty": "endswith",
                            "isnotempty": "contains",
                            "isnullorempty": "endswith",
                            "isnotnullorempty": "contains"
                        };
                        var opts = autoComplete.options;
                        opts.filter = operatorMap[e.dataItem.value];
                        autoComplete.setOptions(opts);
                        autoComplete.search(autoComplete.value());
                    }
                });
            }
        });
    });
</script>

Regards,
Marin Bratanov
Progress Telerik

[Dima]

Hello Marin,

thank you very much for your detailed explanation and implementation. That was very helpful.

Best regards,

Dima.