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

Gantt React Gantt
#1

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 ?

#2

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.

#3

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

we have version 7.0.8 pro

#4

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

#5

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?

image
image1280×597 204 KB

image
image1280×632 180 KB

thanks for the help

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

#6

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