Grid filters reset

Suite and Optimus Suite 7
#1

I am trying to manually reset filters in a grid. This will triggered on a tree checkbox call. I had working at one point but got ahead of myself and didn’t save a copy and I’m using Noteapad …so basically have no history to fall back on…and I must have inadvertently removed code that allowed it to work.

In version 5 I used a loop to iterate through the header values and set each to empty strings…I imagine I can do the same with 7 (would be a nice feature/method - clearFilters()) once I understand why the following does not work…

I am used to working with version 5 and I’m finding this version to be a learning curve so any help is greatly appreciated:

computer = computer_grid.getHeaderFilter("computer").querySelector("input"); // html element - grid filter - inputbox - computer
model = computer_grid.getHeaderFilter("model").querySelector("select");      // html element - grid filter - selectbox - model 

 computer_value = computer.value; // inputbox value - confirmed value
 model_value = model.value;   // selectbox value - confirmed value

 // does not work when trying to clear filters
 computer.value = ""; 
 model.value = "";

//Had working in a one-liner...but using Notepad and must have inadvertently removed code to get it to work again
computer_grid.getHeaderFilter("computer").querySelector("input").value = "";
computer_grid.getHeaderFilter("model").querySelector("select").value = "";
#2

Hello.
Please, refer tio the following solution:
https://snippet.dhtmlx.com/mj81jxxm

#3

sematik,

It’s been a while but this one is coming back to haunt me…

Yes, I used the example you are referring to but I need all filters to be cleared at the same time. I believe the example allows for multiple “choices” but still only one at a time - not all cleared at once. I have tried to use static code for each grid element…tried an array with each grid id name in it and iterated through it but i still cannot get anything to work.

Is it possible to demonstrate how to do 3 at one time…perhaps a couple input and a select? Or perhaps some hints or other references?

I am trying to use a div button onclick event to call a function to reset a grid’s (host) filters - ip (inputFilter), mac (inputFilter), severity (selectFilter) are example grid id filters

Thanks!

Note: the following does work but for 1 element… end goal is to reset entire set of filters at one time using an onlclick event

function resetFilters()
     {
       const inputEvent = document.createEvent("HTMLEvents")
       inputEvent.initEvent("input", true, true);

       headerFilter =  host.getHeaderFilter("ip")
              
       element = headerFilter.querySelector("input")
       element.value="";
       element.dispatchEvent(inputEvent);
     }
#4

FYI,

To make it as simple as possible I used the code posted on your link and replaced minor things like grid id and button names …that’s all. The individual rest buttons for individual column works as advertised. But the Clear All button that triggers ALL individual reset functions resets only the last column…the previous columns data input stays…so basically it is doing the same thing as what I have tried all along.

I removed any dhtmlx lib links that may interfere (even w. - same result)

lib files used - grid.js and grid.css - current ver 7.3

code used:

<!-- component container -->
<button type="button" onclick="clear_ip()">clear ip</button>
<button type="button" onclick="clear_mac()">clear mac</button>
<button type="button" onclick="clear_severity()">clear severity</button>
<button type="button" onclick="clear_all()">clear all</button>

<div style="height: 500px; width: 100%" id="grid"></div>


<script language='javascript' type='text/javascript'> 

dataset=[
{"ip":"192.000.000.001","mac":"M-01","severity":"S-01"},
{"ip":"192.000.000.001","mac":"M-01","severity":"S-02"},
{"ip":"192.000.000.001","mac":"M-01","severity":"S-02"},
{"ip":"192.000.000.002","mac":"M-02","severity":"S-01"},
{"ip":"192.000.000.002","mac":"M-02","severity":"S-03"}
]

	      const grid = new dhx.Grid("grid", {
		  	columns: [
					{ width: 125, id: "ip", header: [{ text: "IP Address"},{ content: "inputFilter" }] },
					{ width: 150, id: "mac", header: [{ text: "MAC Address" },{ content: "inputFilter" }]  },
					{ width: 125, id: "severity", header: [{ text: "Severity" },{ content: "selectFilter"}] }
				],  data: dataset
                               
         });

function clear_ip() {
    var inputEvent = document.createEvent("HTMLEvents");
    inputEvent.initEvent("input");
    var filter = grid.getHeaderFilter("ip").querySelector('input');
    filter.value = "";
    filter.dispatchEvent(inputEvent);
}

function clear_mac() {
    var inputEvent = document.createEvent("HTMLEvents");
    inputEvent.initEvent("input");
    var filter = grid.getHeaderFilter("mac").querySelector('input');
    filter.value = "";
    filter.dispatchEvent(inputEvent);
}

function clear_severity() {
    var changeEvent = document.createEvent("HTMLEvents");
    changeEvent.initEvent("change");
    var filter = grid.getHeaderFilter("severity").querySelector('select');
    filter.value = "";
    filter.dispatchEvent(changeEvent);
}

function clear_all() {
    clear_ip();
    dhx.awaitRedraw().then(function () {
        clear_mac();
    }).then(function () {
        clear_severity()
    })
}

	</script>
#5

I see. Thank you for your detailed report. The problem is confirmed.
We’ll try to fix it in future updates.
For now, you may use the following workaround to clear all the filters in the grid:
https://snippet.dhtmlx.com/ed9uct8b

#6

Hi sematik,

The workaround don’t work with checkboxes
have a look
https://snippet.dhtmlx.com/kqh2c14c

to test :
set flag filter to true
then clear all
then (try to) set filter flag to false

best regards

#7

The problem is confirmed. We’ll try to find a solution in future updates.

#8

We have extended the dhx.Grid API allowing you to operate with the in-header filters in the latest dhx.Suite update (v8.0).

Now you can easily operate with it. Here you can find a snippet where you can test it:

Please, download the latest available dhx.Suite build from your client’s area to get this functionality.

Best regards.

#9

OK, solved the issue with new version 8.
Thx