Hi,
copy following code to the codeEditor of treeGroup demo.
Select a cell in the first row and group by a column.
import { Gantt, StringHelper, ProjectModel } from '../../build/gantt.module.js?474608';
import shared from '../_shared/shared.module.js?474608';
const
prioTextMap = { 1 : 'High', 2 : 'Medium', 3 : 'Low' },
project = new ProjectModel({
loadUrl : '../_datasets/launch-saas.json',
taskStore : {
fields : ['priority', 'cost']
}
});
const gantt = new Gantt({
appendTo : 'container',
selectionMode: {
cell: true,
rowNumber: true,
column: false,
dragSelect: true
},
features : {
fillHandle: true,
treeGroup : {
hideGroupedColumns : true,
parentRenderer({ field, value, column, record }) {
// Do not html encode priority columns value, it uses custom markup
if (column.field === 'priority') {
return `<div>${StringHelper.encodeHtml(column.text)}:</div>${value}`;
}
// For generated group parent, prefix with the grouped column text
return StringHelper.xss`<div>${column.text}: ${value}</div>`;
}
}
},
project,
tbar : [
'Drag columns here to group',
{ type : 'groupbar' }
],
columns : [
{
type : 'wbs',
},
{
type : 'name',
},
{ type : 'startdate' },
{ type : 'enddate' },
{ type : 'duration', width : 150 }
]
});
project.load();
BR, Bert
