Issue with Expanding and Collapsing Projects in Gantt Chart using Chevron and Pr

[Varshitha Yerukonda]

Hi Team,

Team, currently in the Gantt chart expand and collapse functionality (refer to: Smart HTML Elements Gantt Chart Demo), we can use the chevron provided by Smart HTML Elements to expand and collapse projects. However, for better UX intuitiveness, I want to enable expand and collapse functionality by clicking on both the project itself and the chevron.

I encountered an issue when implementing this logic using the itemClick event. The default expand and collapse behavior with the chevron gets broken when any logic related to expanding or collapsing is added in the itemClick event. This results in the chevron no longer working as expected.

Please find this issue in the following StackBlitz link: StackBlitz Example. Please do check. Thanks.

Thanks,

Varshitha

[Markov]

Hi Varshitha,

Because if you click the chevron and the default logic is still applied, then you apply your logic on click and basically it restores the state. You should add if-condition in your code to check if the chevron is clicked and return; if it is clicked. The clicked target can be retrieved by using event.detail.originalEvent.target;

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Varshitha Yerukonda]

Hi Markov,

Thank you for the suggestion! I implemented the condition to check for chevron clicks, and it’s working perfectly now. Both the chevron and project clicks are functioning as expected.

Thanks,

Varshitha

[Author]

Posts