Multi filter with null values - they are not visible

[Radoslaw]

Hi,

In my grid there are cells where we can accept having null values, e.g. property can exist without owner. I would like to filter owner column in multifilter by having null. Right now, empty (null) values are not visible in multi filter menu, only existing owners are displayed. We hacked the problem by switching from null values to empty strings "", and they are visible in menu. But I'm feeling extremely awful for doing such hacks in my code.

I checked that it's made like that because in FilterMultiCheck _init function you got such line:

FilterMultiCheck
            _init: function () {
               ...
                    this.checkSource.data(distinct(this.dataSource.data(), this.field));
               ...

And the distinct function looks like that:

function distinct(items, field) {
        ...
        if (text !== undefined && text !== null && !seen.hasOwnProperty(text)) {
            result.push(item);
            seen[text] = true;
        }
        ...

You see, that null and undefined values are omited and they are not the part of the results. Unfortunately, removing the null & undefined conditionals don't work - null is showed in menu but you cannot filter by it.

Will you be able to do something with it in the future? Right now i can workaround it, but it's really nasty to replace nulls with empty strings :)

[Rosen]

Hello Radoslaw,

Indeed, currently the multi check filter menu does not support filtering on nulls. This is due to the fact that with other filtering modes, a special (isnull/isnotnull) filter operators  are used. Where in the multicheck menu, the filter operator is always the same - equals, as the values are directly compared. Thus, this will require having a separate option in the multi-check menu, similar to the all option, which to show only the null/not null values.

However, we may consider adding support for filtering on null values for the multicheck menu in a future version of the widget.

Regards,
Rosen
Telerik

 

 

[Frédéric.R]

Hello there,

To make grid Multit filter work with null values... I modify the kendo library :

kendo.filtermenu.js/FilterMultiCheck widget : 

1. in options: itemTemplate function:

replace the return line :

return '<li class=\'k-item\'>' + '<label class=\'k-label\'>' + '<input type=\'checkbox\' class=\'' + (mobile ? 'k-check' : '') + '\' #=(' + field + '==null) ? \'operator=isnull\':\'\'# value=\'#:kendo.format(\'{0' + valueFormat + '}\',' + valueField + ')#\'/>' + '#:kendo.format(\'' + (format ? format : '{0}') + '\', ' + field + ')#' + '</label>' + '</li>';

this way we indicate for null values that operator to use must be isnull (in the checkbox attribute operator).

 

2. in _filter function :

when building the filter expression, indicate the correct filter operator for null values (default is still 'eq'):

                expression.filters = $.map(this.form.find(':checkbox:checked:not(.k-check-all)'), function (item) {
                    // multicheck null
                    var operator = $(item).attr('operator');
                    if (!operator)
                      operator='eq';

                    return {
                        value: $(item).val(),
                        operator: operator,
                        field: that.field
                    };
                });

3. for reverse check (filter expression => check the corresponding checkboxes)

For persistence...etc.

in function filterValuesForField, take in account that isnulll can be used in multi filter form:

return filter.field == field && (filter.operator == 'eq' || filter.operator == 'isnull');

 

It works fine for me.

If this solution is good enough, can you please integrate these changes in next release?

Thank you for reading.

- Frédéric

[Vasil]

Hello Frédéric,

Thank you for your contribution, I have added this as enhancement item in our public repository, so you can track it when it is done.
https://github.com/telerik/kendo-ui-core/issues/3284

Regards,
Vasil
Progress Telerik

[Scott]

Will this be part of the next Professional release?

[Vasil]

Hello,

It is still not scheduled, the issue in github will get the milestone updated when it is done.

Regards,
Vasil
Progress Telerik

[Alex Hajigeorgieva]

Hello,

Just a quick update that this functionality is available since 2018.R1.

To ensure that it works correctly, define the data source schema fields types:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/editing/editing#defining-fields-through-schema

If you wish to change the new checkbox from null to anything else, use the itemTemplate:

https://dojo.telerik.com/owApANuN

var commonCheckboxTemplate = function(e) {
  return "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data.all || (data.value ? data.value: 'No Value') # </span></label></div>"
};

If you wish to not show the null checkbox at all, you can use this itemTemplate:

https://dojo.telerik.com/@bubblemaster/UnIBIfuk

var commonCheckboxTemplate = function(e) {
  return "#if(data.all || data.value){#" +
    "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data.all || data.value # </span></label></div>" +
    "#}#"
};

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Frédéric.R]

But we speak about filtering null values,
when we want to see only null columns.

[Alex Hajigeorgieva]

Hi, Frédéric,

Can you please use this Dojo and elaborate what is the expected behaviour?

For example, if you open the Key column, you can select the null checkbox and that will give you only the null values for that column:

https://dojo.telerik.com/@bubblemaster/AfOlivaS

Is this not the behaviour you expected? What should happen instead?

Look forward to hearing back from you.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Frédéric.R]

Excellent !
Thank you !

[David]

@Alex To get this to work in Asp.Net Core use the fluent syntax:

.Filterable(ftb => ftb.ItemTemplate('commonCheckboxTemplage')

I had to modify your example slightly to the following.  Note how I reference the field value:

var commonCheckboxTemplate = function(e) {
  return "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data." + e.field + "# </span></label></div>"
};

However your second example did not work, it seems that the template code could not parse the conditional 'if(..)' syntax. I cannot figure out how to modify my code, or adopt your second example above to show '<empty>' (or any other custom text) if null.  

 

[David]

I think I figured it out.  I used the following code to show empty text when there is no data.  I also needed to accomplish a similar thing for dates, but it proved a bit more difficult:

var commonCheckboxTemplate = function(e) {
    return "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'><span>#= data." + e.field + "?data." + e.field + ": '' #</span></label></div>"
};

var commonCheckboxTemplateDate = function(e) {
    return "<div><label><input  type='checkbox' name='"+ e.field +"' value='#= data." + e.field + "#'>" +
    "<span>#= data." + e.field + "?data." + e.field + ".toLocaleDateString('en-US'): '' #</span></label></div>"
};

[Alex Hajigeorgieva]

Hello, David,

You may use the kendo.toString() method instead and pass the desired format as a parameter.

However, the grid filter multi check column menu is designed to use the format on the column, so that is the easiest option.

Here is a runnable Dojo for your reference:

https://dojo.telerik.com/@bubblemaster/uFIbOQEG

Let me know in case you need further assistance. 

Regards,
Alex Hajigeorgieva
Progress Telerik