Hi!
I am implementing a Gantt chart using instances in VUE, but I have the problem that when I try to modify the layout, to add the resource view and I have tasks to show in the resource view I get a problem.
I have verified that doing it outside of VUE does not give me this problem and I wanted to know if it could be a VUE problem or the logic is poorly implemented.
(Uso la versión PRO - 7.1.2)
I tell you what I do:
1.- I make changes to the default gantt configuration, to customize it (columns, scales, etc). I make changes to => gantt.config
2.- Later I create the instance on a global variable.
me.ganttInstance = Gantt.getGanttInstance({
container: document.querySelector("#gantt_here"),
config: gantt.config,
})
3.- I create the database for the resources, marking that I link the tasks as resources.
me.resourceStore = me.ganttInstance.createDatastore({
name: me.ganttInstance.config.resource_store,
type: "treeDatastore",
fetchTasks: true,
initItem: function (item) {
item.parent = item.parent || me.ganttInstance.config.root_id;
item[me.ganttInstance.config.resource_property] = item.parent;
item.open = true;
return item;
},
})
4.- I perform the parsing of resources
me.resourceStore.parse([
{ id: 1, text: "QA", parent: null },
{ id: 2, text: "Development", parent: null },
{ id: 3, text: "Sales", parent: null },
{ id: 4, text: "Other", parent: null },
{ id: 5, text: "Unassigned", parent: 4 },
{ id: 6, text: "John", parent: 1, unit: "hours/day" },
{ id: 7, text: "Mike", parent: 2, unit: "hours/day" },
{ id: 8, text: "Anna", parent: 2, unit: "hours/day" },
{ id: 9, text: "Bill", parent: 3, unit: "hours/day" },
{ id: 10, text: "Floe", parent: 3, unit: "hours/day" },
])
5.- Finally I do the parsing of the Gantt data.
me.ganttInstance.parse({
data: [
{
id: 1,
text: "Office itinerancy",
type: "project",
start_date: "02-04-2019 00:00",
duration: 17,
progress: 0.4,
parent: 0,
},
{
id: 2,
text: "Office facing",
type: "project",
start_date: "02-04-2019 00:00",
duration: 8,
progress: 0.6,
parent: "1",
},
{
id: 3,
text: "Furniture installation",
type: "project",
start_date: "11-04-2019 00:00",
duration: 8,
parent: "1",
progress: 0.6,
owner: [],
},
{
id: 4,
text: "The employee relocation",
type: "project",
start_date: "13-04-2019 00:00",
duration: 5,
parent: "1",
progress: 0.5,
owner: [],
priority: 3,
},
{
id: 5,
text: "Interior office",
type: "task",
start_date: "03-04-2019 00:00",
duration: 7,
parent: "2",
progress: 0.6,
owner: [
{
resource_id: "6",
value: 3,
start_date: "03-04-2019 00:00",
end_date: "05-04-2019 00:00",
},
],
priority: 1,
},
]
})
6.- Later I include a button that when pressed adds the resource view, and I reset the layout of the instance
me.ganttInstance.config.layout.rows.push({
config: me.resourceConfig,
cols: [
{view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
{resizer: true, width: 1},
{view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
{view: "scrollbar", id: "resourceVScroll", group:"vertical"}
],
gravity:1
})
me.ganttInstance.resetLayout()
7.- This causes me an error, because it changes the ids of the tasks linked to the Gantt and when trying to render the task layers in the Gantt, it paints them blank causing an error that does not show the bars of the Gantt chart.
Could you help me, to know if it is a problem of the implemented logic or of VUE?
Thank you!