How to use Gantt Chart with OData model instead of JSON - sapui5

Question

I am trying to use the Gantt Chart with Tree Table with an OData model. Unfortunately, I can only find examples with JSON model. I have built the hierarchy in my OData model like in the example https://blogs.sap.com/2015/10/23/treetable-odata-binding/ - I used the annotation option.
The Tree Table seems to be correct but the shapes in the Gantt do not fit to the start end end date in the related row. In the JSON examples always stands "children" at the property "shapeDataName" but I don't know what I have to write there using OData. Can somebody help?
Here you can see the structure of my OData model if I call it in the browser:
In my onInit method I did the following:
To build the shapes I wrote the following method:
My result Looks like this:

Answer 1

my onInit method looks like this:
onInit: function () {
var oGantt = new sap.gantt.GanttChartContainer({ ganttCharts: [
new sap.gantt.GanttChartWithTable({
id: "gantt",
columns: [ new sap.ui.table.Column({ label: "Id", template: "Aufgabenid" }),
new sap.ui.table.Column({ label: "Bezeichnung", template: "Aufgabenbez" }),
new sap.ui.table.Column({ label: "Start", template: new sap.m.DatePicker({ value: {path: "Berstartstring"}, valueFormat: "yyyyMMdd" }) }),
new sap.ui.table.Column({ label: "Ende", template: new sap.m.DatePicker({ value: {path: "Berendestring"}, valueFormat: "yyyyMMdd" }) })
],
rowSettingsTemplate: new sap.gantt.simple.GanttRowSettings( {rowId: "{Aufgabenid}" })
})
]});
var oGanttTable = oGantt.getGanttCharts()[0],
sServiceUrl = "/sap/opu/odata/sap/Z_PPM_Projekt_SRV/",
oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
oGantt.setModel(oModel);
oGanttTable.bindRows({
path : "/TimingAnnoSet",
parameters: {
operationMode: "Server",
numberOfExpandedLevels: 0
}
});
oGanttTable.setShapeDataNames(["top"]);
oGanttTable.setShapes(this.configShape());
oGantt.placeAt("content");}
And here my configShape method as code:
configShape: function () {
var aShapes = [];
Rectangle.extend("sap.gantt.ppm.Rectangle", {
getFill: function(oRawData) {
switch (oRawData.Hierarchie) {
case "0":
return "black";
case "1":
return "#FF9999";
default:
return "#FAC364";
}
}
});
var oTopShape = new sap.gantt.config.Shape({
key: "top",
shapeDataName: "metadata",
shapeClassName: "sap.gantt.ppm.Rectangle",
level: 1,
shapeProperties: {
time: "{Berstartstring}",
endTime: "{Berendestring}",
height: 20,
isDuration: true,
enableDnD: true
}
});
aShapes = [oTopShape];
return aShapes;
}