Splitter between the rowheader grid and task grid not showing

Asked by Hicham
3 years ago.

Hello,

I have a Daypilot GanttConfig with these properties:

rowHeaderWidthAutoFit: true
rowHeaderWidthAutoFitShrink: false
rowHeaderScrolling: true
    columns: [
      {
        title: 'x',
        property: 'columnOne',
      },
      {
        title: 'xx',
        property: 'columnTwo'
      },
      {
        title: 'xxx',
        property: 'columnThree'
      },
      {
        title: 'xxxx',
        property: 'columnFour'
      },
      {
        title: 'xxxxx',
        property: 'columnFive'
      }
    ],

I expected a splitter to show up between the rowheader grid and the Task grid.
Like in https://aspnet.daypilot.org/demo/Gantt/RowHeaderScrolling.aspx
I also tried setting the rowHeaderWidth and rowHeaderSplitterWidth but that doesn't make any difference.
I am running version 2023.1.5488

Answer posted by Dan Letecky [DayPilot]
3 years ago.

I've tried to add your config to a new Angular Gantt chart project generated using https://builder.daypilot.org and it seems to work fine. The splitter appears as expected.

If you are using a custom theme, you may want to review it to see if the splitter is styled properly.

Please let me know if the problem persists.

Comment posted by Hicham
3 years ago.

Hi,

After some trouble shooting myself after your answers, I discovered that this (only?) happens when you set heightSpec to Parent100Pct.

You can find an example of the problem using https://builder.daypilot.org in the attachments

daypilot-project.7z

Comment posted by Dan Letecky [DayPilot]
3 years ago.

If you set "heightSpec" to "Parent100Pct" but don't fix the height of the parent element, the Scheduler will not be able to calculate the height and the view will be corrupt (not only the splitter). With this heightSpec option, you need to set the height of the parent element explicitly - either using "height" style or a combination of "top" and "bottom".

You can test it by modifying the template like this:

  template: `
    <div style="height:500px">
    <daypilot-gantt [config]="config" #gantt></daypilot-gantt>
    </div>
  `,

Comment posted by Hicham
3 years ago.

Alright, After some more debugging, I found something strange.

My parent height was already set to 100%, so I tried changing that to 500px, yet the problem was still there.
So I tried heightSpec on fixed and set the height property to 500, the problem was still there.
After commenting every other property in my config, the problem was still there.

And then, in a Hail Mary attempted, I tried setting my config with the input config in the HTML instead of the typescript viewchild property.

Issue solved!

Do you guys have any explanation as of why this matters? I am setting the config based on the viewChild property in the afterViewInit because of performance reasons (as is described in the docs)

You can find a reproduction of the bug in the attachments.

daypilot-project.7z

Comment posted by Dan Letecky [DayPilot]
3 years ago.

Thanks for the update!

The config specified using the [config] attribute is applied during the initialization. All other changes are applied as updates of the visible Scheduler instance.

For performance reasons, it's better to use the [config] attribute. If you set the "config" object in ngAfterViewInit, the Scheduler will be rendered twice.

In case of "rowHeaderScrolling" it also makes a difference because this value is only respected during initialization. This behavior will be fixed in the next release so you will be able to change it later as well.

This question is more than 1 month old and has been closed. Please create a new question if you have anything to add.