Persist Changes Immediately

We will discuss how to persist changes immediately as they happen in the client, using as POST.

Even though we are saving changes immediately you would still need a cache because, often a single operation by the user (for example, moving a task) would result in changes to multiple tasks (dependant tasks get moved, parent bars get resized, etc.) and when you are listening to changes in your data source, you want to wait until all these changes are completed before sending them to the server for persistence.

Here we are listening to the ActivityUpdated event which will get called for all changes made to the gantt bound task properties. Take a look at this topic for information on other ways to listen to task property value changes.

var timer =null;

//To listen to the activity changes.

ganttControl.Model.ActivityUpdated.subscribe(PropertychangeNotifier);

// To listen to property changes in the bound task object.

function PropertychangeNotifier(sender, args) {

var boundData = args.DataSource;

// Caching updated tasks, unless it's aready in the added tasks list.

if (!addedTasks.Contains(boundData.ID))

updatedTasks.Add(boundData.ID, boundData);

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(function () {

UpdateModifiedTasks();

}.bind(this), 500);

}

function UpdateModifiedTasks() {

var UpdatedTasksJson = JSON.stringify(updatedTasks.asArray, MySQLDateFormatConversion);

//Posting to the same page.

$.post("<?php echo $_SERVER['PHP_SELF'];?>,

{ UpdatedTasks: JSON.stringify(UpdatedTasksJson) },

function (data) {

alert(data);

});

}

function MySQLDateFormatConversion(key, value) {

if (key == "StartDate" || key == "EndDate" || key == "PreferredStartTime")

value = new Date(value).toString('yyyy-MM-dd hh:mm:ss');

return value;

}

//Server side.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$dbh->UpdateTasks($_POST["UpdatedTasks"]);

}

Updating Added and removed Task To Database Immediately

When a task is added to the GanttContol, send it to the server right away for persisting.

$("#addRow").click(function () {

var newTask = getNewTask();

//To add a task to GanttControl.

ganttControl.AddNewItem(newTask);

UpdateAddedTasks(newTask);

return false;

});

function UpdateAddedTasks(addedTask) {

var AddedTasksTasksJson = JSON.stringify(addedTask, MySQLDateFormatConversion);

//Posting to the same page.

$.post("<?php echo $_SERVER['PHP_SELF'];?>,

{ AddedTasks: JSON.stringify(AddedTasksTasksJson) },

function (data) {

alert(data);

});

}

//Server side.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$dbh->AddTasks($_POST["AddedTasks"]);

}

When the task is removed from gantt, it might potentially remove more tasks if it's a parent. So, make sure to notify the server with all those task IDs.

$("#remove").click(function () {

var activitys = null;

var activity = ganttControl.SelectedActivity;

if (activity) {

var ganttItemSource = ganttControl.options.DataSource;

var removedTaskIds = [];

//To Remove a task from GanttControl.

activitys = ganttControl.RemoveActivity(activity.ID);

for (var i = 0; i < activitys.length; i++) {

var boundData = activitys[i].DataSource;

removedTaskIds.push(boundData.ID);

//To Remove a task from GanttControl bound data source.

ganttItemSource.splice(ganttItemSource.indexOf(boundData), 1);

}

UpdateRemovedTasks(removedTaskIds);

}

else

alert("Please select an item in the table first.");

return false;

});

function UpdateRemovedTasks(removedTaskIds) {

//Posting to the same page.

$.post("<?php echo $_SERVER['PHP_SELF'];?>,

{ "RemovedTaskIds": JSON.stringify(removedTaskIds) },

function (data) {

alert(data);

});

removedTaskIds = [];

}

//Server side.

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

$dbh->AddTasks($_POST["RemovedTaskIds"]);

}