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?
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?
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