Columns do not appear in the table in the empty state of the table after changing the display

case with a problem: in the current display mode, remove all columns, switch to another display mode and try to add columns - it does not work.
gantt config changes correctly, columns.hide - too

the problem occurs when we switch to display mode without columns

layout:

const grid = {
  rows: [
    {
      cols: [
        {
          rows: [
            {
              scrollX: 'gridScroll',
              scrollY: 'scrollVer',
              scrollable: true,
              view: 'grid',
            },
            { group: 'horizontal', id: 'gridScroll', view: 'scrollbar' },
          ],
        },
        {
          rows: [
            {
              bind: 'task',
              config: {
                columns: [
                  {
                    align: 'center',
                    hide: false,
                    label: settingsLabel,
                    min_width: 50,
                    name: SETTINGS_COLUMN_NAME,
                    template: () => contextMenu,
                  },
                ],
              },
              scrollY: 'scrollVer',
              view: 'grid',
            },
          ],
          width: 50,
        },
      ],
    },
  ],
  width: gantt.config.grid_width ?? DEFAULT_GRID_WIDTH,
}

I tried running gantt.render() or gantt.refreshData() - it doesn’t help (the onDataRender, onBeforeDataRender and onGanttRender events are triggered, but the columns are still not displayed)

how i can fix this problem ?

Hello Yana,

Unfortunately, it’s difficult to determine the exact cause without seeing the full code. I used your layout configuration and built a simple example — please take a look:
https://snippet.dhtmlx.com/p4psidgn

Maybe it will be helpful.

Alternatively, if you can reproduce the issue directly in my snippet and send it back, I’ll be able to investigate it in more detail.

Hello Maksim,
on version 7.0 pro the bug in your example is reproduced

we have version 7.0.8 pro

Hello Yana,

Thanks for the clarification. You’re right — in version 7.0.8 there was a bug related to column visibility and layout changes. It was fixed in newer versions of Gantt.

If possible, I recommend updating to the latest version.

As a workaround, when there are no visible columns, you need to remove the grid from the layout. I’ve updated the example to reflect that:
https://snippet.dhtmlx.com/95a3a011

Good afternoon, the last question is about the scroll in the Gantt. There is a scroll for the table + graph, but for the table the scroll disappears, what can be done about this?


thanks for the help

it turned out to be a hassle with styles, but if there is a simpler option - it is accepted

Hello Yana,

You can add a vertical scrollbar for the grid (for example, gridScrollVer) in the corresponding view like this:

const mainGrid = {
	cols: [
		{
			rows: [
				{ scrollX: 'gridScroll', scrollY: 'gridScrollVer', scrollable: true, view: 'grid' },
				{ group: 'horizontal', id: 'gridScroll', view: 'scrollbar' }
			],
		},
		{ view: "scrollbar", id: "gridScrollVer" }
	]
};

Here is an example: DHTMLX Snippet Tool