Embedding a search bar in Gantt

Gantt
#1

Hello everyone, I’m using the Pro version of Gantt chart and I’d like to embed a Filter & Search component on the left-hand side of the Gantt chart. This discussion suggests it’s not possible out of the box, but one could add input fields in the columns themselves.

For my use case, I’d like to put the component above the task columns, or even replacing the columns component entirely. Questions:

  • Has anything changed since 2014 when the linked Q was written?
  • Is it possible to replace the Columns component out of the box?

Thank you

#2

Hello,

Yes, you still need to put a custom input field into the grid header to implement searching.
Nevertheless, now we have the snippet that demonstrates how that might be implemented and how that works.
Please find “Custom elements in the grid header” on the page here https://docs.dhtmlx.com/gantt/desktop__styling_guide.html#stylinggrid
and check the snippet https://snippet.dhtmlx.com/43a01395c

For my use case, I’d like to put the component above the task columns, or even replacing the columns component entirely.

You can put the input field outside the Gantt container and call search function in the same way as in the demo above.

Is it possible to replace the Columns component out of the box?

If you mean the grid’s columns by “the Columns component” - no, you have to use inbuilt columns.

1 Like
#3

Thank you @Polina, I was able to get it very close to what I wanted with your help.

The problem is, my search bar is a React component. I’ve been able to get the HTML structure rendered, but the problem is I can’t attach the event handler afterwards, due to the methods I have to use (ReactDomServer.renderToString() and related). These methods render the HTML but not the event handling. I was unable to use ReactDOM.hydrate as well due to the nature of my app (the Gantt chart is rendered inside a React context).

I also tried adding Gantt event handlers, so I could manually attach the input handler after the static markup has been rendered, but I wasn’t able to find the right one - the one that triggers after the Gantt columns have been rendered.

I know this is a bit tricky - could I ask if you’ve got any pointers for me?

#4

Hello Tony,
It is not possible to use React elements and event handlers inside Gantt. You can only return HTML elements in Gantt. However, I tested that ECMAScript functions work.

Gantt doesn’t have an event handler that fires when the rendering is complete for all tasks. But have a snippet with the onDataRender event handler that tries to detect that:
https://snippet.dhtmlx.com/6582729e7
I didn’t test it with all possible cases, but it allows detecting that at least the first task has been rendered.