[BUG?] Datatable selectFilter "null" does not show null nor empty values

Webix JS
1

Problem

A datatable column with a selectFilter generates the “null” option if some key contains “null” value, which is good and makes sense.

The issue is that it does not actually filter null nor empty values, instead it shows no data.

The reason is that the initially generated null filter {id:null, value:null} is then quoted as “null” during the comparison, thus (null == “null”) → false.

Snippet

http://webix.com/snippet/1c90618e

Filter a column with the “null” option → no data is shown.

Questions

  • If this is a wanted behavior and not a bug, why generating the null filter option then?
  • Wouldn’t be a good idea to also generate an “empty” filter, which filters keys containing “” (empty, but not null values)?
  • These could be set as parameters maybe

Quick Fix

http://webix.com/snippet/dfcd79ca

Here is my snippet with ideas of filtering null and empty values, based on what I could find on this forum.

Main problems of this fix :

  • I do not want to add an “empty” nor “null/empty” filter if none of the data actually contains empty values.
  • I do have to implement this customCompare function on all my files, views, datatables, columns…

Thanks a lot!

2

Hello,

You can iterate column data within the onCollectValues handler to decide whether options really need an “Empty/Null” line.

Also, to avoid code repetition you can create a custom mySelectFilter with a built-in customCompare functionality and reuse it everywhere you need it:

webix.ui.datafilter.mySelectFilter = webix.extend({
  render:function(master, config){  
	config.compare= customCompare;
	config.css = "webix_ss_filter"; 
    	return ""; 
  }
}, webix.ui.datafilter.selectFilter);
...
{ id:"Title", header:{content:"mySelectFilter"}}

Moreover, you can create a custom Datatable and attach the onCollectValues handler right in the prototype:

webix.protoUI({
  name:"myDatatable",
  $init:function(){
  	this.attachEvent("onCollectValues", collectValues)
  }
}, webix.ui.datatable);
...
webix.ui({ view:"myDatatable", ...});

Check the snippet, please: http://webix.com/snippet/c735177f

3

Hello,

Thank you very much for these explanations, this is really helpful.
I then modified your snippet to match my needs, and now it works perfect :
http://webix.com/snippet/772248eb

Cheers!

4

@Helga @NatashaS I tried the this solution but i am using prefilters and they are not working as expected refer to the snippet
https://snippet.webix.com/ti1rqmlp

5

Hello Prashanth_Allamreddy

excelFilter has different and more complex logic and sturcture compared to selectFilter. To make your example work first you need to call the render method with its default logic of the excelFilter: Code Snippet
Also you need to set mode for the filter:

 {
   content:"customExcelFilter", mode:"text"
 }

But if you want to check datatable data for null values using excelFilter you can use scheme property.
Please check the example: Code Snippet