Datatable Master-Header

Webix JS
#1

Hi!

Like in this example, where you can check a Master-checkbox, I want to have a Master-textfield, -calendar, -dropdown in my header. Goal of this requirement is when a value is set in a header-field, all values of the column need to get exactly this value from header.
Like checking the master checkbox and all checkboxes get checked/unchecked.

https://webix.com/snippet/48f20ae5

#2

Any idea? :slight_smile:

#3

Please check the related article with the ready-to-use sample of custom textFilter.

In general, you can insert any content to the header using DataFilter object. The best will inherit default logic/rendering patterns from the existing filters (in webix_debug.js you’ll find all available in your Webix version).

While filters call filterByAll to trigger filtering, masterCheckbox iterates through all rows and changes the values in the column where it was set:

refresh:function(master, node, config){
	node.onclick = function(){
		this.getElementsByTagName("input")[0].checked = config.checked = !config.checked;
		var column = master.getColumnConfig(config.columnId);
		var checked = config.checked ? column.checkValue : column.uncheckValue;
		master.data.each(function(obj){
			if(obj){ //dyn loading
				obj[config.columnId] = checked;
				master.callEvent("onCheck", [obj.id, config.columnId, checked]);
				this.callEvent("onStoreUpdated", [obj.id, obj, "save"]);
			}
		});
		master.refresh();
	};
},
#4

Now I’ve implemented following Snippet: https://webix.com/snippet/d6306d85

When I set a value to the filter-box, this value has to break down to all rows. But as soon as I start typing, the data-rows are hidden.

Following works: When I type ‘123’ into the filter box, then press Enter and then delte ‘123’, the data appears again with my wanted logic.

How can I fix this issue? I want the global input work after I pressed Enter and confirmed my input.

Thanks for help!

#5

The estimated result can be seen in this snippet: https://webix.com/snippet/9697573c

The problem, why I changed
compare:startCompare
to
compare: (val,filter,obj) =>{startCompare(val,filter,obj,‘title’);

is that I need to know in which column the global input was done.

#6

Fixed it! Here is the result: https://webix.com/snippet/11f0ae5f

#7

So far so good… How can I trigger the Math-Calculation, after setting new global values?
https://webix.com/snippet/db6b2343

When I type in a new global value, the math-logic doesnt run.

#8

compare triggers unnecessary filtering process/events, so it may interrupt the logic of your app if you have any actions related to data filtering.

In order to isolate this customization, DataFilter is still the solution for your use-case. Such object gets all needed parameters, so please check the following solution:

https://webix.com/snippet/63134b9a

#9

Also, please check your email (there’s an autoreply), as I’m not sure that I can reach you through the support channel.

#10

Thank you, that looks much cleaner!
Could you please tell me where I can set different input fields? In this example we see a text-input. But I also want to implement a Calendar, Dropdown, Checkbox or Popup

#11

I recommend you to check the webix_debug.js (non-minified source code, it is also the debug version of the library which is recommended for development process) for webix.ui.datafilter objects.
While the HTML-based controls (text, select and checkbox) require the modifications provided earlier, the UI-based editor has to inherit from the existing filter with the new render method. Basic render includes filterByAll which you need to avoid in order to isolate your custom control from the built-in features.

As an example, please check the datePicker editor: https://webix.com/snippet/92d51ab7