This is a migrated thread and some comments may be shown as answers.
Multi filter with null values - they are not visible
12 Answers 137 Views
This is a migrated thread and some comments may be shown as answers.
Radoslaw
Top achievements
Rank 1
Radoslaw asked on 17 Mar 2016, 08:52 PM

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 :)

12 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 22 Mar 2016, 01:53 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Frédéric.R
Top achievements
Rank 1
answered on 31 May 2017, 01:41 PM

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

0
Vasil
Telerik team
answered on 02 Jun 2017, 12:30 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Scott
Top achievements
Rank 1
answered on 24 Aug 2017, 04:43 PM
Will this be part of the next Professional release?
0
Vasil
Telerik team
answered on 28 Aug 2017, 10:40 AM
Hello,

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

Regards,
Vasil
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Alex Hajigeorgieva
Telerik team
answered on 13 Jun 2019, 09:26 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Frédéric.R
Top achievements
Rank 1
answered on 04 Dec 2019, 12:26 PM

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

0
Alex Hajigeorgieva
Telerik team
answered on 06 Dec 2019, 06:44 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Frédéric.R
Top achievements
Rank 1
answered on 06 Dec 2019, 08:28 AM
Excellent !
Thank you !
0
David
Top achievements
Rank 1
answered on 06 Oct 2020, 05:44 PM

@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.  

 


0
David
Top achievements
Rank 1
answered on 06 Oct 2020, 06:52 PM

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>"
};
0
Alex Hajigeorgieva
Telerik team
answered on 08 Oct 2020, 03:30 PM

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

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Grid
Asked by
Radoslaw
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Frédéric.R
Top achievements
Rank 1
Vasil
Telerik team
Scott
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
David
Top achievements
Rank 1
Share this question
or