Shape of layout object

Gantt
#1

gantt.config.layout - https://docs.dhtmlx.com/gantt/api__gantt_layout_config.html
what options does it has? can it be used to limit the task list width?

#2

Actually, I posted too soon. I found this https://docs.dhtmlx.com/gantt/desktop__layout_config.html right after, but it uses mainGridConfig which is unspecified anywhere, how does that object look / where is it coming from?

#3

Hello @autodaniel,

Regarding your first post:

1)The easiest way to set the width of the grid is to use the grid_width config:
gantt.config.grid_width = 400;

2)Or you can use the columns config to set the width of each column:

// default columns definition
gantt.config.columns=[
  {name:"text",    width: 200,   label:"Task name",  tree:true,  },
  {name:"start_date",width: 150, label:"Start time", align: "center" },
  {name:"duration",  width: 200, label:"Duration",   align: "center" },
  {name:"add",      width: 50,  label:"" }
];

3)The layout object is used for more complex changes, and I can’t recommend it if you only want to change the grid’s width. But you also can define the width of the column here, using width and max_width properties :

gantt.config.layout = {
  css: "gantt_container",
  cols: [
    {
      id:"gridCell",
      width: 400,
      min_width: 602,
      max_width: 602,
      rows: [
        { view: "grid", scrollX: "gridScroll", scrollable:true, resizable: false, scrollY: "scrollVer" },
        { view: "scrollbar", id: "gridScroll", group: "horizontal" }
      ]
    },
...

Regarding the second post:

Maybe it’s not fully clear from our documentation, but you can define grid configuration object in the variable, it may look like this fragment:

var mainGridConfig = {
	columns: [
		{
			name: "status", label: "Status", width: 60, align: "center", template: function (task) {
				var progress = task.progress || 0;
				return Math.floor(progress * 100) + "";
			}
		},
		{
			name: "impact", width: 80, label: "Impact", template: function (task) {
				return (task.duration * 1000).toLocaleString("en-US", {style: 'currency', currency: 'USD'});
			}
		}
	]
};

And use this variable as a config parameter of the layout object.

You can watch how it works in the demo below:
http://snippet.dhtmlx.com/5/a151e980d

As you can see in this fragment:

var  modifiedLayout = {
    css: "gantt_container",
    rows:[
      { 
        cols: [
          {view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer", bind: "task", config: mainGridConfig},

the “mainGridConfig” is uses as config parameter for the grid view.

API:
grid_width:
https://docs.dhtmlx.com/gantt/api__gantt_grid_width_config.html
columns:
https://docs.dhtmlx.com/gantt/api__gantt_columns_config.html

1 Like