On hover task, icons visible and clickable

Gantt
#1

Hi,
I’m using angular 2+ and jquery. I would like to know if it’s possible when mouse is hover a task to make appear icons at the right corner of the task. When one clicks on the icon for creation, it opens the window for task creation/edition, and when clicks on another icon it redirects to another page. Do you think it’s possible ? Maybe with tooltips function ?
Many thanks.

#2

Hello,
Yes, it is possible to do that. You just need to return buttons in the rightside text function:
docs.dhtmlx.com/gantt/api__gant … plate.html
The following snippet shows how it might be implemented:
https://snippet.dhtmlx.com/73yduem6
Each button is “hidden” by opacity parameter, that is controlled by mouse hover(check “HTML” tab), and actions are applied in a separate function.

Have you also checked “quick info” extension? Maybe it has the functionality you need. Although, it works just by clicking on the task not by hovering on it. Here is the example with the quick info extension:
http://snippet.dhtmlx.com/5/61f8a7466

#3

thank you very much for this ! When I’m trying to reproduce the first snippet but i get an “Uncaught ReferenceError: action is not defined
at HTMLInputElement.onclick”. :s

#4

Hello,
Unfortunately, I couldn’t reproduce it. I tried Firefox, Chrome, Edge and other not popular browsers and it works correctly. Do you use Internet Explorer or Edge or an old browser?
I recorded how it works in Google Chrome and Firefox:
https://files.dhtmlx.com/30d/52f6b521d3449164423887d56df771a6/vokoscreen-2018-08-15_11-42-44.mkv

You can record it and upload the video there:
https://uploadfiles.io/

#5

Hi!

probably it’s due to the way function action is declared and called.
The onclick handler in code expects it to be defined in the global scope:

<input class='side_button' type=button onclick=action(

while the function is defined using this expression

function action(id, type){ ... }

Which defines a function in the same scope where the code is called. It works as expected if all code is executed in the global scope, but if it’s placed inside another function, for example inside window ready or DOMContentLoaded event hanlder - action won’t be available from the global scope, explaining the error you have.

As a solution, you can change the declaration of the action function, please check this snippet:
http://snippet.dhtmlx.com/7364eec3b

#6

Thanks both for helping! The last snippet is working like a charm ! Thanks for the explanation !