1

I am using DHTMLX GANTT chart, I have to create one more row inside second column(Chart section) on top above date and also divide that row into 7 columns by matching with date. currently I have created custom div inside independent row.I tried using adding row inside the second column object but it was not working. Here is the code below

html

<!DOCTYPE html>
<html>

<head>
  <link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
  <script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
  <style>
    .gantt_custom_button {
      background-color: rgb(206, 206, 206);
      position: absolute;
      right: -10px;
      top: 5px;
      width: 20px;
      height: 26px;
      border-radius: 0;
    }
  </style>


</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>

<body>
  <script>
    var task1 = {
      'data': [{
          'id': 1,
          'text': 'Project #1',
          'start_date': '01-04-2019',
          'duration': 2,
          'order': 10,
          'progress': 0.4,
          'open': true
        },
        {
          'id': 2,
          'text': 'Task #1',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 3,
          'text': 'Task #2',
          'start_date': '03-04-2019',
          'duration': 2,
          'order': 20,
          'progress': 0.6,
          'parent': 1
        },
        {
          'id': 4,
          'text': 'Task #3',
          'start_date': '02-04-2019',
          'duration': 1,
          'order': 10,
          'progress': 0.6,
          'parent': 1
        }

      ],
      'links': [{
          'id': 1,
          'source': 1,
          'target': 2,
          'type': '1'
        },
        {
          'id': 2,
          'source': 2,
          'target': 3,
          'type': '0'
        },
        {
          'id': 3,
          'source': 3,
          'target': 4,
          'type': '0'
        },
        {
          'id': 4,
          'source': 2,
          'target': 5,
          'type': '2'
        }
      ]
    };
    gantt.config.layout = {
      css: 'gantt_container',
      cols: [{

          rows: [{
              height: 80
            },
            {
              view: 'grid',
              scrollX: 'gridScroll',
              scrollable: true,
              scrollY: 'scrollVer'
            },
            {
              view: 'scrollbar',
              id: 'gridScroll',
              group: 'horizontal'
            }
          ]
        },
        {
          resizer: true,
          width: 1
        },
        {
          rows: [{
              html: '<div class=\'custom-content\'>custom content 1</div>',
              css: 'custom-content'
            },

            {
              view: 'timeline',
              scrollX: 'scrollHor',
              scrollY: 'scrollVer'
            }
            // { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
          ]
        },
        {
          view: 'scrollbar',
          id: 'scrollVer'
        },
        {
          resizer: false,
          width: 1
        }
      ]
    };
    gantt.init('gantt_here');
    gantt.parse(task1);
  </script>

</html>
anguler-developer
  • 61
  • 1
  • 6

1 Answers1

0

You need to add a layout cell with the columns above the timeline layout cell. Here is a simple idea:

cols:[
  //grid and scrollbar
  {
    rows: [
      cols:[
        //html content layout cells
      ],
      //timeline
    ]
  }
]

By default, HTML cells will have the same size as the timeline cells, because they will stretch to fit the available width. But there is the gantt.config.min_column_width parameter that tells Gantt what the minimal timeline cells width should be:

https://docs.dhtmlx.com/gantt/api__gantt_min_column_width_config.html

You can change it to 1, then the timeline cells should match the sizes of HTML layout cells even with a small width.

Here is an example of how it can be implemented:

http://snippet.dhtmlx.com/5/3f3d94281

gearcoded
  • 561
  • 5
  • 11