autoLoad set to true does not initialize TaskStore data
Posted: Thu Sep 19, 2019 4:14 pm
Hello,
we are testing the new JavaScript UI Bryntum Gantt v1.1.4 (trial version) but we are facing some issues.
In our Gantt configuration, we set:
in order to fetch the tasks from our backend upon load. This enables the correct rendering of the tasks in the Gantt, but the `data` field in the TaskStore object is actually empty (e.g. we have `NaN` durations in the task tooltip) until we call explicitly
Is this the expected behaviour? If we disable the the `autoLoad` flag we have to call the load method twice to get a consistent TaskStore.
Furthermore, we are not able to disable the drag/drop sorting of the cells (tasks) within the Gantt "name column". We tried with the following configurations:
and
but non of them worked. Can you suggest a different approach?
Please find attached a working example in HTML and the related JSON data.
Many thanks in advance for your help.
The html and json are herebelow
we are testing the new JavaScript UI Bryntum Gantt v1.1.4 (trial version) but we are facing some issues.
In our Gantt configuration, we set:
taskStore: new TaskStore({
autoLoad: true,
modelClass: TaskModel,
readUrl: '/get/my/tasks',
}),
gantt.taskStore.load();
Furthermore, we are not able to disable the drag/drop sorting of the cells (tasks) within the Gantt "name column". We tried with the following configurations:
column: {
nameColumn: {
draggable: false,
sortable: false,
}
}
columns: [
{
type: 'name',
text: 'Task Name',
draggable: false,
sortable: false,
}
],
Please find attached a working example in HTML and the related JSON data.
Many thanks in advance for your help.
The html and json are herebelow
<html lang="en">
<head>
<meta charset="utf-8"/>
<script src="https://www.bryntum.com/examples/build/gantt.module.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="https://www.bryntum.com/examples/build/gantt.default.css"/>
<script type="module">
import {Gantt, TaskModel, TaskStore} from 'https://www.bryntum.com/examples/build/gantt.module.js';
const gantt = new Gantt({
autoHeight: true,
appendTo: 'gantt',
taskStore: new TaskStore({
autoLoad: true,
modelClass: TaskModel,
readUrl: 'data.json',
}),
});
gantt.taskStore.load();
</script>
</head>
<body>
<div id="gantt"></div>
</body>
</html>
[
{
"id": 1,
"name": "Task 1",
"startDate": "2019-09-18",
"endDate": "2019-09-22",
"expanded": true,
"children": [
{
"id": 2,
"name": "Task 2",
"startDate": "2019-09-18",
"endDate": "2019-09-19"
},
{
"id": 3,
"name": "Task 3",
"startDate": "2019-09-20",
"endDate": "2019-09-22"
}
]
}
]