Perf impact with getHeaderFilter().clear with many columns

Suite and Optimus Suite 7
#1

Hi all,

I test today the new Suite 8 with the extended getHeaderFilter() function (amazing !!!)

I put in the following snippet https://snippet.dhtmlx.com/vzwer4v8
but the grid is very small in comparison of mine :

  • many rows : more than 50000 (no lazy loading)
  • many columns : 48
    - with many filters (input,select) : 40
    - with some calculated footers : 3

I create one function : setfilter() to setfilter on 2 columns
I create one function : nofilter() to clear ALL filters
I create one function : nofilter2() to clear only the 2 filters

Test 1 : setfilter() + nofilter()
nofilter : 3535 ms (it’s 3.5 seconds !!! quite slow for end users)

Test 2 : setfilter() + nofilter2()
nofilter2 : 146 ms

it seem that :

  • either the gridHeaderFilter() function is very costly
  • either clearing a yet cleared headerFilter has a performance impact

(the test prove that it is not the filtering itself who generate the duration)

I think that i have a work around :

  • trapping the filter set/unset with filterChange and beforeFilter events
  • using gridHeaderFilter() only on the really filtered columns

but perhaps someone have a better idea ?
is there a function to have the current filter value of a column ?

best regards

#2

I found a temporary solution.
The issue is “clearing a yet cleared headerFilter has a performance impact”

I change nofilter() as follow :
function nofilter(grid) {
// Start timing now
console.time(“nofilter”);

	grid.config.columns.forEach(col => {
		let funcHeaderFilter = grid.getHeaderFilter(col.id);
		if (funcHeaderFilter){
			if (funcHeaderFilter.getFilter().body.length > 1) {
				if (funcHeaderFilter.getFilter().body[1].attrs.value != "") {
						funcHeaderFilter.clear();
				}
			}
		}
	});

now with the same case, i obtain
nofilter : 105 ms

clearly better than 3.5s
so i have a workaround

but :

  • the script hard code the row where is the filter :
    for first row :
    if (funcHeaderFilter.getFilter().body.length > 0) {
    if (funcHeaderFilter.getFilter().body[0].attrs.value != “”) {
    for second row :
    if (funcHeaderFilter.getFilter().body.length > 1) {
    if (funcHeaderFilter.getFilter().body[1].attrs.value != “”) {
  • work with inputFilter but not with selectFilter and comboFilter

so yet some jobs, but scanning the body is a true headache

my dream : having a funcHeaderFilter.getFilter().getValue() returning a string (inputFilter,selectFilter) or an array (comboFilter)

#3

solved, solution in
https://snippet.dhtmlx.com/mkbbfojk

to apply only with big grid with many columns to avoid performance issue.

result time on my big Grid :
nofilter3 : 170 ms

  1. track filtered columns in an array (grid_filters) with event filterChange
  2. then apply getHeaderFilter().clear() only to filtered columns to call it only when necessary
#4

You may try to use the
grid.getHeaderFilter("colId").value
to get the value of a header filter.

1 Like