Difference in height between table and gantt when enabling virtualization

[Iván]

Hi

I've configured my gantt like this:

<ejs-gantt #gantt
           [height]="'calc(100vh - ' + reservedHeight + ')'"
           [rowHeight]="50"
           [taskbarHeight]="25"
           [enableVirtualization]="true"
           gridLines="Both"
           // Other settings
>​
  // My custom columns
​ejs-gantt>

And I have this problem with the lines between the table and the gantt chart:

The horizontal lines are not even. Also reaching the end, some gantt results disappear

This doesn't happen if I disable virtualization.

What can I do? I need virtualization because my gantt chart contains +700 lines

Edit: As a workaround, I've changed the CSS of the gantt chart. The borders increases the height to 54px.

To resolve that, I lowered down to match the 50px defined in the @Input property (rowHeight)

.e-gantt .e-gantt-chart .e-left-label-container {
    height: 46px !important;
}

[Monisha Sivanthilingam]

Hi Iván, 

  

Greetings from Syncfusion support. 

  

We have analyzed your query, however, we were not able to replicate the issue you reported. Please share more details about your issue such as: 

  

1. Are you facing this issue at load time itself or only after scrolling down for some time ?
2. We suspect that you are using some customizations with the CSS of the Gantt Chart that may interfere with our own styling codes. Please share with us if you have made some customizations to your Gantt Chart using CSS.
3. Please share an issue reproducible sample or modify the below attached sample to replicate the issue.

  

Sample: https://stackblitz.com/edit/angular-hmcrdw?file=app.component.html 

  

Any information you can share with us will be useful to us in providing a solution to you. 

  

Regards, 

Monisha. 

[Iván]

Hi! Thanks for the quick response.

1) This issue happens when scrolling, being more likely to occur if we have too many tasks. But only when using custom columns. (Or maybe I just wasn't able to repo with default columns)

2) I was able to repro the issue without any css style in the stackblitz that you provided

3) Here is an image of the stackblitz

https://imgur.com/xBXZEwc

Here is the stackblitz updated with the custom column

https://stackblitz.com/edit/angular-hmcrdw-y9pup6?file=app.component.ts

I'm sorry, sadly it doesn't have a straightforward way to 

[Monisha Sivanthilingam]

Hi Iván, 

 

Thank you for sharing the additional details. 

 

We were able to replicate the issue you reported. We have forwarded it to the concerned team. We will provide you with further details within two business day(December 1, 2021). 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Premkumar Sudalaimuthu]

Hi Ivan, 

Based on the reported issue, upon validation we have considered it as a bug and the fix will be included in the first patch release which comes after the Volume 4 release. Until then we appreciate your patience. 

Feedback: https://www.syncfusion.com/feedback/30778/difference-in-height-between-table-and-gantt-when-enabling-virtualization 

Regards, 

Premkumar s 

[Etronix]

I also facing this issue. Can i know what is the solution?

[Gopinath Munusamy]

The Reported issue has been already fixed in version v19.4.0.48. So, we suggest you update the latest version v20.3.58 to resolve this issue. For your reference, a sample is attached. Check the sample below for more details.

Sample: https://stackblitz.com/edit/angular-jczy17?file=app.component.ts

If still you’re facing this issue, then we request you to share below details, which will be useful for us to provide you with a better solution.

1. Code snippets of Gantt rendering code in your application.

2. Video demonstration of the issue.

3. Modify the attached sample as issue replicable, if possible.