Shape of layout object

gantt.config.layout -
what options does it has? can it be used to limit the task list width?

Actually, I posted too soon. I found this right after, but it uses mainGridConfig which is unspecified anywhere, how does that object look / where is it coming from?

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
  {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: [
      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:

As you can see in this fragment:

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

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


1 Like