//getting data fro gantt chart 1 (main gantt chart)
var ganttChartData = @json($gantt_chart_data_arr);
//data for second gantt chart
var assignedToChartData = @json($assigned_to_data_arr);
//initializing required plugins
gantt.plugins({
// critical_path: true,
tooltip: true,
multiselect: true,
fullscreen: true,
undo: true
});
//git config layout for second chart starts
var resourceConfig = {
scale_height: 30,
scales: [
{ unit: "day", step: 1, date: "%d %M" }
],
columns: [
{
name: "text", label: "Task", tree: true, width: 250, template: function (resource) {
return resource.text;
}, resize: true
},
{
name: "assign_to", label: "Assign To", width: 150, align: "center", template: function (resource) {
return resource.assign_to || "";
}, resize: true
},
]
};
gantt.config.layout = {
css: "gantt_container",
rows: [
{
gravity: 2,
cols: [
{ view: "grid", group: "grids", scrollY: "scrollVer" },
{ resizer: true, width: 1 },
{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
{ view: "scrollbar", id: "scrollVer", group: "vertical" }
]
},
{
resizer: true, width: 1, next: "resources"
},
{
gravity: 1,
id: "resources",
config: resourceConfig,
// templates: resourceTemplates,
cols: [
{ view: "resourceGrid", group: "grids", scrollY: "resourceVScroll" },
{ resizer: true, width: 1 },
{ view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll" },
{ view: "scrollbar", id: "resourceVScroll", group: "horizontal" }
]
},
{ view: "scrollbar", id: "scrollHor" }
]
};
gantt.$resourcesStore = gantt.createDatastore({
name: gantt.config.resource_store,
type: "treeDatastore",
initItem: function (item) {
item.parent = item.parent || gantt.config.root_id;
item[gantt.config.resource_property] = item.parent;
item.open = true;
return item;
}
});
gantt.$resourcesStore.parse(assignedToChartData)
//git config layout for second chart ends
//gantt intitialization
gantt.init("gantt_here");
// gantt.scrollTo(0,2460);
//setting data for gantt chart
gantt.parse({
data: ganttChartData
});
//call back end api on create, update or delete task
let dp = gantt.createDataProcessor({
task: {
create: function(data) {
console.log('create called');
data.change_in_due_date = 0;
data.projectId = '{{$projectId}}';
callGanttApi("gantt-chart-v2/task/create", data, 'post', gantt);
},
update: function(data, id) {
callGanttApi("gantt-chart-v2/task/"+id+"/update", data, 'post', gantt);
},
delete: function(id) {
callGanttApi("gantt-chart-v2/task/"+id, null, 'delete', gantt);
}
},
link: {
create: function(data) {},
update: function(data, id) {},
delete: function(id) {}
}
});
//createDataProcessor ends
//function to call gant api, just need to change data, url and method
// you could consider it as a wrapper, so that we could make changes for response status and messages
function callGanttApi(url, data, method, gantt){
$.ajax({
url: url,
data: data,
type: method,
success: function(resp){
if(resp.ganttData){
gantt.$resourcesStore.parse(resp.ganttData.assigned_to_data_arr)
gantt.parse({
data: resp.ganttData.gantt_chart_data_arr
});
console.log('api called');
}
if(resp.reload){
if(resp.focusTaskId){
localStorage.setItem('storedFocusTaskId',resp.focusTaskId);
}
window.location.reload(1);
}
if(resp.focusTaskId){
gantt.showTask(resp.focusTaskId)
}
gantt.refreshData();
toastr.success(resp.message);
},
error: function(xhr, status, error){
if(xhr.status === 404){
toastr.error('Task Not Found');
return;
}
if(xhr.status === 404){
toastr.error('Task Not Found');
return;
}
let obj = JSON.parse(xhr.responseText);
toastr.error(obj.message);
}
});
}
//function callGanttApi ends
This is the sample of my code, however, undo and redo are no working.
Here are the buttons:
<li>
<a href="#" onclick="gantt.undo(); return false;" class="gantt-control-btn">
Undo
</a>
</li>
<li>
<a href="#" onclick="gantt.redo(); return false;" class="gantt-control-btn">
Redo
</a>
</li>