How to keep gantt.config.min_column_width value when exporti

Good day,

I am exporting a gantt chart with my own css files using the “header” element.

I noticed that the exported image does not take into account my gantt.config.min_column_width setting.

Or the width of the columns grids

Is is possible to send this value to the export server?

Here is the data That I am sending:

{
“header”: “”,
“gantt.config.min_column_width”: 80,
“name”: “gantt.png”,
“data”: {
“data”: [
{
“id”: 1,
“itemInstanceId”: 999999,
“projectInstanceId”: 999999,
“templateInstanceId”: 999999,
“type”: “project”,
“text”: “DEMO MILESTONE”,
“start_date”: “2014-11-03 08:00”,
“isEarliestStartDate”: false,
“duration”: 64,
“progress”: 0.525,
“open”: true,
“end_date”: “2014-11-12 16:00”,
“parent”: 0,
“$2”: “DEMO MILESTONE”,
“$3”: “53% </span>”,
“$4”: “”
},
{
“id”: 2,
“itemInstanceId”: 999999,
“projectInstanceId”: 999999,
“templateInstanceId”: 999999,
“type”: “task”,
“text”: “Task #1”,
“start_date”: “2014-11-03 08:00”,
“isEarliestStartDate”: false,
“duration”: 16,
“parent”: “1”,
“progress”: 0.5,
“open”: true,
“end_date”: “2014-11-04 16:00”,
“$2”: “Task #1”,
“$3”: “50% </span>”,
“$4”: “”
},
{
“id”: 3,
“itemInstanceId”: 999999,
“projectInstanceId”: 999999,
“templateInstanceId”: 999999,
“type”: “task”,
“text”: “Task #2”,
“start_date”: “2014-11-05 08:00”,
“isEarliestStartDate”: false,
“duration”: 16,
“parent”: “1”,
“progress”: 0.6,
“open”: true,
“end_date”: “2014-11-06 16:00”,
“$2”: “Task #2”,
“$3”: “60% </span>”,
“$4”: “”
},
{
“id”: 4,
“itemInstanceId”: 999999,
“projectInstanceId”: 999999,
“templateInstanceId”: 999999,
“type”: “task”,
“text”: “Task #3”,
“start_date”: “2014-11-07 08:00”,
“isEarliestStartDate”: false,
“duration”: 16,
“parent”: “1”,
“progress”: 0.5,
“open”: true,
“end_date”: “2014-11-10 16:00”,
“$2”: “Task #3”,
“$3”: “50% </span>”,
“$4”: “”
},
{
“id”: 5,
“itemInstanceId”: 999999,
“projectInstanceId”: 999999,
“templateInstanceId”: 999999,
“type”: “task”,
“text”: “Task #4”,
“start_date”: “2014-11-11 08:00”,
“isEarliestStartDate”: false,
“duration”: 16,
“parent”: “1”,
“progress”: 0.5,
“open”: true,
“end_date”: “2014-11-12 16:00”,
“$2”: “Task #4”,
“$3”: “50% </span>”,
“$4”: “”
}
],
“links”: [
{
“id”: “1”,
“source”: “2”,
“target”: “3”,
“type”: “0”
},
{
“id”: “2”,
“source”: “3”,
“target”: “4”,
“type”: “0”
},
{
“id”: “3”,
“source”: “3”,
“target”: “4”,
“type”: “0”
},
{
“id”: “4”,
“source”: “4”,
“target”: “5”,
“type”: “0”
}
]
},
“config”: {
“links”: {
“finish_to_start”: “0”,
“start_to_start”: “1”,
“finish_to_finish”: “2”,
“start_to_finish”: “3”
},
“types”: {
“task”: “task”,
“project”: “project”,
“milestone”: “milestone”
},
“duration_unit”: “hour”,
“work_time”: true,
“correct_work_time”: true,
“skip_off_time”: false,
“autosize”: true,
“autosize_min_width”: 0,
“show_links”: true,
“show_task_cells”: true,
“static_background”: false,
“branch_loading”: false,
“show_loading”: false,
“show_chart”: true,
“show_grid”: true,
“min_duration”: 3600000,
“xml_date”: “%Y-%m-%d %H:%i”,
“api_date”: “%d-%m-%Y %H:%i”,
“start_on_monday”: true,
“server_utc”: false,
“show_progress”: true,
“fit_tasks”: true,
“select_task”: true,
“preserve_scroll”: true,
“readonly”: false,
“date_grid”: “%Y-%m-%d %H:%i”,
“drag_links”: true,
“drag_progress”: true,
“drag_resize”: true,
“drag_move”: true,
“drag_mode”: {
“resize”: “resize”,
“progress”: “progress”,
“move”: “move”,
“ignore”: “ignore”
},
“round_dnd_dates”: false,
“link_wrapper_width”: 20,
“root_id”: 0,
“autofit”: true,
“columns”: [
{
“name”: “id”,
“label”: “Id”,
“width”: 22,
“tree”: false
},
{
“name”: “text”,
“label”: “Name”,
“width”: 192,
“tree”: true
},
{
“name”: “start_date”,
“label”: “Start Time”,
“align”: “center”,
“width”: 112
},
{
“name”: “end_date”,
“label”: “End Time”,
“align”: “center”,
“width”: 112
},
{
“name”: “duration”,
“label”: “Duration”,
“align”: “center”,
“width”: 62
}
],
“step”: 1,
“scale_unit”: “day”,
“scale_offset_minimal”: true,
“subscales”: [

],
"time_step": 60,
"duration_step": 1,
"date_scale": "%D, %M %d",
"task_date": "%d %F %Y",
"time_picker": "%H:%i",
"task_attribute": "task_id",
"link_attribute": "link_id",
"layer_attribute": "data-layer",
"buttons_left": [
  "dhx_save_btn",
  "dhx_cancel_btn"
],
"_migrate_buttons": {
  "dhx_save_btn": "gantt_save_btn",
  "dhx_cancel_btn": "gantt_cancel_btn",
  "dhx_delete_btn": "gantt_delete_btn"
},
"buttons_right": [
  "relink_button"
],
"lightbox": {
  "sections": [
    {
      "name": "description",
      "height": 70,
      "map_to": "text",
      "type": "textarea",
      "focus": true
    },
    {
      "name": "time",
      "height": 72,
      "type": "duration",
      "map_to": "auto"
    }
  ],
  "project_sections": [
    {
      "name": "description",
      "height": 70,
      "map_to": "text",
      "type": "textarea",
      "focus": true
    },
    {
      "name": "type",
      "type": "typeselect",
      "map_to": "type"
    },
    {
      "name": "time",
      "height": 72,
      "type": "duration",
      "readonly": true,
      "map_to": "auto"
    }
  ],
  "milestone_sections": [
    {
      "name": "description",
      "height": 70,
      "map_to": "text",
      "type": "textarea",
      "focus": true
    },
    {
      "name": "type",
      "type": "typeselect",
      "map_to": "type"
    },
    {
      "name": "time",
      "height": 72,
      "type": "duration",
      "single_date": true,
      "map_to": "auto"
    }
  ]
},
"drag_lightbox": true,
"sort": false,
"details_on_create": true,
"details_on_dblclick": true,
"initial_scroll": true,
"task_scroll_offset": 100,
"task_height": 20,
"min_column_width": 80,
"min_grid_column_width": 70,
"grid_resizer_column_attribute": "column_index",
"grid_resizer_attribute": "grid_resizer",
"keep_grid_width": false,
"grid_resize": false,
"readonly_property": "readonly",
"editable_property": "editable",
"type_renderers": {
  
},
"open_tree_initially": false,
"touch_drag": 500,
"touch": false,
"touch_feedback": true,
"show_markers": true,
"highlight_critical_path": false,
"row_height": 26,
"scale_height": 60,
"grid_width": 500,
"link_line_width": 2,
"link_arrow_size": 6,
"lightbox_additional_height": 75,
"scroll_size": 0

}
}

I think I found the source of the issue My code is as follows:

this.m_gantt.config.columns = [
{name:“id”, label:“Id”, width:30, tree:false },
{name:“text”, label:“Name”, width:200, tree:true },
{name:“start_date”, label:“Start Time”, align: “center”, width:120 },
{name:“end_date”, label:“End Time”, align: “center”, width:120 },
{name:“duration”, label:“Duration”, align: “center”, width:70 },
{name:“add”, label:"", width:44 }

but all the “width” values sent to the server have been reduced by 8… Weird see below:

{
“name”: “id”,
“label”: “Id”,
“width”: 22,
“tree”: false
},
{
“name”: “text”,
“label”: “Name”,
“width”: 192,
“tree”: true
},
{
“name”: “start_date”,
“label”: “Start Time”,
“align”: “center”,
“width”: 112
},
{
“name”: “end_date”,
“label”: “End Time”,
“align”: “center”,
“width”: 112
},
{
“name”: “duration”,
“label”: “Duration”,
“align”: “center”,
“width”: 62
}

After I bit of testing I found 2 issues:

  1. When exporting the columns data, the columns (gantt.config.columns) width is reduced by 8 for some reason

  2. Whatever the width value send to the export server ( gantt.config.columns ) the width is always the same in the rendered image. It does not seem to be taken into account when doing the export.

Hope this helps

There is a regression in Gantt 3.1 that can cause such a problem ( export engine uses Gantt 3.1 )
Please try to add the next line to config

gantt.config.grid_width = 584; //summ of all columns

ok Thank you

it worked fine :smiley: