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/