JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Gantt › How to create a Multiple hierarchies in gantt chart › Reply To: How to create a Multiple hierarchies in gantt chart
January 9, 2024 at 9:45 pm
#109646
Keymaster
Hi,
I checked the code and below is a full example based on your data source. Hope it helps.
/// <reference path=”../../../source/typescript/smart.elements.d.ts” />
window.Smart(
"#gantt",
class {
get properties() {
return {
theme: 'bootstrap',
height: 'auto',
width: 'auto',
view: 'month',
dayFormat: 'short',
firstDayOfWeek: 1, //Monday
nonworkingDays: [6],
adjustToNonworkingTime: true,
durationUnit: 'day',
monthScale: 'day',
autoSchedule: true,
disableTaskProgressChange: true,
//resourceTimelineMode: 'histogram',
//disableWindowEditor: true,
//groupByResources: true,
hideTimelineHeaderDetails: true,
snapToNearest: true,
taskColumns: [
{
label: 'Tasks',
value: 'label',
sort: 'asc',
size: '60%'
},
{
label: 'Duration (days)',
value: 'duration',
formatFunction: (date) => parseInt(date)
}
],
dataSource: new window.Smart.DataAdapter({
dataSource:
[{
id: 0,
label: 'Project 1',
synchronized: true,
expanded: true,
type: 'project',
connections: [
{
target: 1,
type: 0
}
],
},
{
id: 1,
label: 'Project 1.1',
reportsTo: '0',
dateStart: '2021-2-31',
dateEnd: '2021-6-1',
expanded: true,
type: 'project',
connections: [
{
target: 4,
type: 0
}
]
},
{
id: 2,
reportsTo: 1,
label: 'Task 1.1.1',
dateStart: '2021-3-10',
dateEnd: '2021-4-1',
type: 'task',
},
{
id: 3,
reportsTo: 1,
label: 'Task 1.1.2',
dateStart: '2021-4-2',
dateEnd: '2021-6-1',
type: 'task',
connections: []
},
{
id: 4,
reportsTo: 2,
label: 'Task 1.1.1.1',
dateStart: '2021-07-10',
dateEnd: '2021-08-30',
type: 'task',
},
{
id: 5,
reportsTo: 2,
label: 'Task 1.1.1.2',
dateStart: '2021-08-30',
dateEnd: '2021-10-1',
type: 'task'
}
],
keyDataField: 'id',
parentDataField: 'reportsTo',
id: 'id',
dataFields: [
'id: number',
'label: string',
'dateStart: date',
'dateEnd: any',
'type: string',
'duration: any',
'progress: any',
'reportsTo: any',
'synchronized: boolean',
'expanded: boolean'
]
})
}
}
}
);
export { };
Best regards,
Markov
Smart UI Team
https://www.htmlelements.com/