Width Missmatch

Question

Hello,

I realize that i have a lot of customizations already, so i am not anticipating that you know that answer perse, but maybe you can point me in a better direction.

The problem is simple, the left half of the gantt-chart wants to be 750px wide, but is only calculated as 732.5px, so a little bit is hiding.

Please note that i have a dragable column on the left, that i need to hide when the row is a header section, i do that with visible: collapse/hidden. That column is also missing some top and bottom borders....

Do you have any suggestions to why the width calculation is missing just a few pixel? and is there a way i can force it to recalculate?

Pooja Priya Krishna Moorthy · Answer

Hi Andrew,

Please find the below response.

S.No

Query

Syncfusion Comments

1

the left half of the gantt-chart wants to be 750px wide, but is only calculated as 732.5px, so a little bit is hiding.

We are unable to reproduce the reported issue. We set the splitter position as 750px by using splitterSettings.position property. But the Grid part is rendered with 750px without any issues. Please find the below sample link.

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

Can you please share us the detail, how you are setting the splitter position else please modify our provided sample. It will be very helpful to check from our end and provide you a better solution.

2

i have a dragable column on the left, that i need to hide when the row is a header section, i do that with visible: collapse/hidden. That column is also missing some top and bottom borders

From your query, we understand that you are including header row by adding a dummy record. We have prepared a sample by adding dummy record to act as an header section. In this we have added custom class for header row using rowDataBound event. Using this class we can hide the drag and drop icon for that particular row. Please find the below code example.

[index.html]

tr.e - row.e - customheader > .e - rowdragdrop > .e - icon - rowdragicon:: before,

tr.e - row.e - customheader > .e - rowdragdrop > .e - icon - rowdragicon:: before {

content: '';

}

</style>

[app.component.html]

<ejs-gantt

//...

(rowDataBound) = "rowDataBound($event)">

</ejs-gantt>

[app.component.ts]

public rowDataBound(args: any): void {

if(!args.row.classList.contains('e-header') && args.data.taskData.isHeader == true) {

args.row.classList += ' e-customheader'

}

Please find the below sample link.

Sample - https://stackblitz.com/edit/angular-cnhs2e?file=index.html

Regards,

Pooja K.

Andrew Tarr · Answer

Turns out the problem to the width was solved by add 1 column to the splitterSplitter settings, from 5.1 to 6.1.

The second problem is different, but your solution may help me approach this a little differently.

Pooja Priya Krishna Moorthy · Answer

Hi Andrew, 
Thanks for your update. 
We are happy to hear that our solution provided in the last update helps you. 
Please get back to us if you would require any further assistance on this. 

Regards, 
Pooja K.