Fixed Grid Column

Gantt
#1

Hello,
In this example, I want to freeze the WBS column on the left without moving along with the scrollbar. What can I do?
https://docs.dhtmlx.com/gantt/samples/07_grid/10_scrollable_grid.html

#2

Hi @virgil,
Unfortunately, there is no built-in way to do this.
But you can do it with css / js, as in the following snippet(HTML/CODE tabs):
https://snippet.dhtmlx.com/355905724
You can add classes to header cells using grid_header_class template:
gantt.templates.grid_header_class = function (columnName, column) { user logic };
API:
https://docs.dhtmlx.com/gantt/api__gantt_grid_header_class_template.html
To access the cells of a column, you can go through the document and add classes to each cell directly, as in this code fragment:

function fixColumnCells () {
let wbsColumnCells = [... document.querySelectorAll ('div [data- column-name = "wbs"]')];
wbsColumnCells.forEach( cell => {
cell.classList.add("fixedCell")
})

New classes will be removed from the elements after each re-rendering of the gantt, so you must call the fixColumnCells() function every time you update something in the gantt chart to add new classes again.

Unfortunately, this implementation has one back effect: the grid flickers after adding new tasks and currently, I can’t provide you with an easy solution for that because it requires changes in the source code.
I hope this answer helped you.

#3

SiarHei,
Can I use tickets to solve this problem and support fixed multiple columns?

#4

Hi @virgil,
If you have an active license, you can contact our support using instruction from the email with a license.

Also, I have found a good solution for your issue:
you could create a fixed column, by creating second grid view, inside the grid, like in the following snippet:
http://snippet.dhtmlx.com/bafd27720
The main steps of this solution are:

  1. Create a variable to handle a column configuration:
var secondGridColumns = {
  columns: [{
      name: "wbs",
      align: "center",
      label: "WBS",
      template: gantt.getWBSCode,
      resize: true
  }]
};
  1. Change the gantt layout configuration gantt.config.layout to create the structure you need.
    To assign configuration from variable to column in the layout you should use the config property: config: secondGridColumns .
    To assign the data source from where the grid will get the data you should use the
    bind property - bind: "task"
    API:
    https://docs.dhtmlx.com/gantt/desktop__layout_config.html#configsandtemplatesofviews

Important: you can assign different scrollbars for each column, by assigning them unique id
like - id: 'gridScrollX2'
Here is a helpful snippet, which displays how to work with the layout config:
https://snippet.dhtmlx.com/784acd5bb

#5

Siahei,
I know this method, but it will make the inline edit function unavailable.

#6

Hi @virgil,
This bug is in our bug tracker, and the dev team works on a fix, unfortunately, I can’t give you an ETA for this fix.
If you want, I will inform you when this issue will be fixed. Currently, I can’t provide you with another solution or a workaround to your issue.

#7

Hello,
I found a workaround. You can add the id: "grid" string to the grid configuration. After that, the inline editors will work in both grids.
Here is the snippet:
http://snippet.dhtmlx.com/dac5ad12c

#9

One problem with this is that using gantt.resetlayout () will report an error

#10

Hello,
It seems that the issue occurs if you add the id: "grid" parameter for the second grid. That was a workaround that stopped working after some update. If you remove that parameter from the second grid, you won’t get the error message, but then, the inline editors won’t work in the second grid:
http://snippet.dhtmlx.com/5/bc28860eb

I don’t have another workaround. You need to wait until the dev team fixes the issue. Unfortunately, I cannot give you any ETA.

#11

Hello,
The dev team has not yet fixed the bug with the inline editors not working in the second grid. But they suggested an alternative way to freeze/fix the column in the grid.
That can be done by using CSS and only one grid. You need to set the relative position to the column that needs to be fixed. The left parameter should have the same value as the scrollbar position, so, you can add the event handler to the scrollbar and update the CSS variable:
http://snippet.dhtmlx.com/5/332065706