Basic Filtering Issue

Gantt
#1

For basic filter sample, it shows blank if none of the checkboxes is selected. How to show all records if none are selected?

Additionally, the “updIcon” method is not functioning correctly when used as is in a react project implementation. Is there a better sample to refer from? Kindly let me know

#2

@ramil - little help pls

#3

Hello Debjoy,
This is expected behavior that none of the tasks are displayed.
To filter tasks, you need to return true or false in the onBeforeTaskDisplay event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskdisplay_event.html

So, the only thing you need is to implement a logic that will define if the filtering should be applied. Probably, the easiest way is to check if the state of the filter checkboxes: if all of them are unchecked, you return true in the function.

The sample uses material icons, and the code was not written for React. So, it is expected that you need to use a different approach.
In React you need to use React state or add a listener from the Gantt configuration instead of the onclick event handler. Also, material icons should be added another way (at least there are native mui or material-ui packages that use the common React approach:

Here is the snippet with the updated code:
https://snippet.dhtmlx.com/y2qf6w96

And here is a React demo:
https://files.dhtmlx.com/30d/1c66db18af51f152c4e8c459d83669b8/reactive-gantt+gantt-instance+filter-checkboxes.zip

Also, if you want to raise the priority for your questions, you can submit a support ticket via email as questions on the forum have a lower priority:

#4

@ramil - The below event listener is written unchanged and it runs fine for my needed logic,

window.addEventListener(“click”, function (e) {
const filterCheckbox = e.target.closest(“.filterCheckbox”);
if (filterCheckbox) {
gantt.render();
}
});

But I am getting this error on screen each time I click checkbox to make a selection and can be dismissed with a close icon in the overlay:
Uncaught TypeError: Cannot read properties of undefined (reading ‘getService’)

Any idea how to fix it?

#5

@ramil - a little help on this issue please

#6

Hello Debjoy,
I couldn’t reproduce the issue in the snippet and in the demo I shared.
It is hard to suggest what might be wrong as I don’t see your code.
Please share a snippet or a ready demo with all the necessary JavaScript and CSS files so that I can reproduce the issue locally.

#7

HI @ramil

I am not getting this error in Licensed version. So I guess it’s fine.

#8

Hello Debjoy,
I tried to reproduce the issue in the GPL version, but it is working correctly:
https://files.dhtmlx.com/30d/2f0f866fe4e77526f0a950686d2f151f/react-demo.zip

So, most likely, it is related to the application configuration.

#9

Thanks. I will check out the code.

I have a open question of high priority - if you can kindly take a look.

#10

Hello Debjoy,
It is not necessary to remind about other questions on the forum. It doesn’t help to speed up the response time. And as I said before, you can submit a support request via email. In that case, the response time depends on the license type (though, usually, it is within 24 hours on business days):