Multi filter with null values - they are not visible

13 posts, 0 answers
  1. Radoslaw
    Radoslaw  avatar
    7 posts
    Member since:
    Jun 2015

    Posted 17 Mar 2016 Link to this post

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

  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 22 Mar 2016 Link to this post

    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!
     
  3. Frédéric.R
    Frédéric.R avatar
    7 posts
    Member since:
    Feb 2015

    Posted 31 May 2017 Link to this post

    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

  4. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 02 Jun 2017 Link to this post

    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.
  5. Scott
    Scott avatar
    1 posts
    Member since:
    Aug 2013

    Posted 24 Aug 2017 in reply to Vasil Link to this post

    Will this be part of the next Professional release?
  6. Vasil
    Admin
    Vasil avatar
    1642 posts

    Posted 28 Aug 2017 Link to this post

    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.
  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 13 Jun 2019 Link to this post

    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.
  8. Frédéric.R
    Frédéric.R avatar
    7 posts
    Member since:
    Feb 2015

    Posted 04 Dec 2019 in reply to Alex Hajigeorgieva Link to this post

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

  9. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 06 Dec 2019 Link to this post

    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.
  10. Frédéric.R
    Frédéric.R avatar
    7 posts
    Member since:
    Feb 2015

    Posted 06 Dec 2019 in reply to Alex Hajigeorgieva Link to this post

    Excellent !
    Thank you !
  11. David
    David avatar
    2 posts
    Member since:
    Mar 2020

    Posted 06 Oct 2020 in reply to Alex Hajigeorgieva Link to this post

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

     


  12. David
    David avatar
    2 posts
    Member since:
    Mar 2020

    Posted 06 Oct 2020 in reply to David Link to this post

    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>"
    };
  13. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 08 Oct 2020 Link to this post

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

Back to Top