Bryntum Support Forums

import { Gantt, StringHelper, TaskStore, ProjectModel, ResourceAssignmentColumn, ColumnStore } from '../../build/gantt.module.js?478335';
import shared from '../_shared/shared.module.js?478335';

const resources = [
      {
        "id"       : 1,
        "name"     : "Celia",
        "city"     : "Barcelona",
        "calendar" : null,
        "image"    : "celia.jpg"
      }
    ];
const taskData = [
      {
        "id"          : 1000,
        "name"        : "Launch SaaS Product",
        "percentDone" : 34,
        "startDate"   : "2019-01-14",
        "endDate"     : "2019-03-20",
        "duration"    : 47,
        "expanded": false,
        "complexity"  : 3,
        "children"    : []
      }
    ];

const assignmentData = [
      {
        "id"       : 1,
        "event"    : 11,
        "resource" : 1
      }
    ];


class GNT_TaskStore extends TaskStore {
	static get type() {
		return 'gnt_taskstore';
	}

static get configurable() {
	return {
		transformFlatData: true
	};
}
}

GNT_TaskStore.initClass();

class GNT_ResourceAssignmentColumn extends ResourceAssignmentColumn {
	static get $name() {
		return 'GNT_ResourceAssignmentColumn';
	}

static get type() {
	return 'gnt_resourceassignment';
}
}


ColumnStore.registerColumnType(GNT_ResourceAssignmentColumn);

const project = new ProjectModel({
    taskStoreClass: GNT_TaskStore
})

const gantt = new Gantt({
    appendTo          : 'container',
    dependencyIdField : 'sequenceNumber',
    rowHeight         : 45,
    tickSize          : 45,
    barMargin         : 8,
    project,
    


columns : [
    { type : 'name', width : 250 },
    { type : 'startdate' },
    { type : 'enddate' },
    { type : 'gnt_resourceassignment' },
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return StringHelper.encodeHtml(taskRecord.name);
    }
},

tbar : {
        items : [
            {
               type       : 'button',
                text       : 'Load Data',
                async onAction() {
				// Uncommenting this will fix the issue 
		            //gantt.project.resourceStore.removeAll();

		            gantt.project.set({ calendar: null });
                    try{
                    await Promise.all([
                        gantt.project.taskStore.loadDataAsync(taskData),
                        gantt.project.assignmentStore.loadDataAsync(assignmentData),         
			            gantt.project.resourceStore.loadDataAsync(resources)
                    ])
                    }catch(error){
                        console.log(error);
                    }

                    gantt.project.set(project.project);
                } 
            }
        ]
}
});
project.load();

                async onAction() {
                    gantt.project.set({ calendar : null });
                    
                    gantt.project.taskStore.data = taskData;
                    gantt.project.assignmentStore.data = assignmentData;
                    gantt.project.resourceStore.data = resources;

                    gantt.project.commitAsync();
                }