1. Home
  2. Forum
  3. Angular - EJ 2
  4. Gantt event markers overlapping

Gantt event markers overlapping

I have multiple event markers for consecutive dates. When we are in zoom out view, the event markers overlap, so unable to read them. We need a way to display event markers in stacked manner



5 Replies
AK Alagumeena Kalaiselvan Syncfusion Team February 2, 2022 01:08 PM UTC

Hi Rohit , 
 
We can able to achieve your requirement using dataBound and actionComplete event. We have prepared a sample and also shared code snippets for your reference. Please contact us for further assistance. 
 
Code snippets: 
 
public updateEventMarker() { 
    document.getElementsByClassName('e-span-label')[1].style.top = '100px'; 
    document.getElementsByClassName('e-gantt-right-arrow')[1].style.top = 
      '110px'; 
  } 
  public actionComplete(args: any) { 
    this.updateEventMarker(); 
  } 
  public dataBound(args: any) { 
    this.updateEventMarker(); 
  } 
 
 
Regards, 
Premkumar S 


RM Rohit Maini February 2, 2022 01:52 PM UTC

Hi Team,


I added the snippet you provided in both places, but it did not work.






AK Alagumeena Kalaiselvan Syncfusion Team February 3, 2022 12:56 PM UTC

Hi Rohit, 
 
We have included your code snippets and checked them from our side. However, we cannot able to replicate the issue. The workaround we shared has been worked correctly and we have attached a video and screenshot for your reference. We request you to share your sample or modify the attached sample as an issue replicable. It will help us to provide you with a better solution. 
 
 
Screenshot: 
 
 
 
Regards, 
Premkumar S

RM Rohit Maini February 4, 2022 08:16 AM UTC

Hi Team,

In the video also, I can see that the events are overlapping on same level when zoomed in. Also, the solution provided is not working. Is it possible to have a screenshare and resolve the issues as we have client deployment tomorrow. I do appreciate the efforts being put in by you team, but it is not serving the purpose. 

Thanks

Rohit Maini


AK Alagumeena Kalaiselvan Syncfusion Team February 7, 2022 10:02 AM UTC

Hi Rohit , 
 
In our previous video and sample, we demonstrated how to set the top for the label and its right arrow using elements to avoid overlapping with other event markers. The example we provided only involved avoiding the overlapping of the first two event markers. However, like that, we can able to set and adjust the top for other event markers too by using their elements. We suggest you to check your element structure and set-top for all of your requirements. We also shared code snippets of set-top for all the used event markers in our sample which surely avoids overlapping with other event markers.  

If you are still facing the issue we are happy to schedule a call and assist you to achieve your requirement. Kindly let us know your preferred timing to schedule the call, if needed. 
 
Code snippets: 
public updateEventMarker() { 
 
Design phase – 2marker 
    document.getElementsByClassName('e-span-label')[1].style.top = '100px'; 
    document.getElementsByClassName('e-gantt-right-arrow')[1].style.top = 
      '110px'; 
 
Production Phase – 3marker 
    document.getElementsByClassName('e-span-label')[2].style.top = '140px'; 
    document.getElementsByClassName('e-gantt-right-arrow')[2].style.top = 
      '140px'; 
 
Sales and marketing – 4th marker 
    document.getElementsByClassName('e-span-label')[3].style.top = '170px'; 
    document.getElementsByClassName('e-gantt-right-arrow')[3].style.top = 
      '180px'; 
  } 
 
 
Screenshot:   
 
 
 
 
 
Regards, 
Premkumar S 


Loader.
Up arrow icon