We're trying to overwrite the DependencyModel of a DependencyStore. We have custom from/to fields and would like to avoid manually mapping our dependencies. Our use case is pretty much 1:1 with the example in the documentation, see https://www.bryntum.com/docs/gantt/#Gantt/model/DependencyModel . However, it does not seem to work. I have attached an html file that should allow you to easily run this.
Two problems:
1) If I provide to/from keys for my dependencies they are not shown correctly. I have to use toTask/fromTask. This is not clear from the documentation (I had to look at the response from one of your examples).
2) I cannot remap to/from (nor toTask/fromTask or even toEvent/fromEvent) to myTo/myFrom using the dataSource key when overriding the fields. Am I defining my custom model incorrectly or plugging it in the wrong place?
Let me know if you need any additional information.
Thanks!
I could not attach the .html file so I have to copy-paste it here. Sorry about that.
<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, DependencyStore, DependencyModel} from 'https://www.bryntum.com/examples/build/gantt.module.js';
class MyDependencyModel extends DependencyModel {
static get fields() {
return [
// Mentioned in the documentation
{name: 'to', dataSource: 'myTo'},
{name: 'from', dataSource: 'myFrom'},
// Other attempts
// {name: 'toTask', dataSource: 'myTo'},
// {name: 'fromTask', dataSource: 'myFrom'},
// {name: 'toEvent', dataSource: 'myTo'},
// {name: 'fromEvent', dataSource: 'myFrom'},
];
}
}
const gantt = new Gantt({
autoHeight: true,
appendTo: 'gantt',
taskStore: new TaskStore({
modelClass: TaskModel,
}),
dependencyStore: new DependencyStore({
modelClass: MyDependencyModel,
}),
});
gantt.taskStore.data = [
{
"id": 1,
"name": "Task 1",
"startDate": "2019-10-18",
"endDate": "2019-10-22",
"expanded": true,
"children": [
{
"id": 2,
"name": "Task 2",
"startDate": "2019-10-18",
"endDate": "2019-10-19"
},
]
}
];
gantt.dependencyStore.data = [
{
"id": "d1",
"myTo": 1,
"myFrom": 2
}
];
</script>
</head>
<body>
<div id="gantt"></div>
</body>
</html>
