Persisting Changes Immediately

We will discuss how to persist changes immediately as they happen in the client, using AJAX. The next topic shows how to Persisting changes in bulk.

Caching Changes

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 PropertyChanged event which will get called for every changes made to the gantt bound task properties and CollectionChanged to subscribe the PropertyChanged event. Take a look at this topic for information on other ways to listen to task property value changes.

var timer =null;

ganttControl = $gantt_container.data("GanttControl");

var activityViews = ganttControl.ActivityViews;

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

var view = activityViews[i];

var activity = ganttControl.ActivityViews[i].activity;

var task = activity.DataSource_M();

//To listen the task changes.

task.PropertyChanged.subscribe(PropertychangeNotifier);

}

//To listen the task collection changes.

activityViews.CollectionChanged.subscribe(function (event, ui) {

if (event.type === "insert") {

var task = ui.items[0].Activity_M().DataSource_M();

task.PropertyChanged.subscribe(PropertychangeNotifier);

}

else {

var task = ui.items[0].Activity_M().DataSource_M();

task.PropertyChanged.unsubscribe(PropertychangeNotifier);

}

});

var updatedTasks = new RadiantQ.Gantt.Dictionary();

var timer = null;

//This will be called only once when many task changed.

function PropertychangeNotifier(sender, args) {

updatedTasks.Add(sender.ID, sender);

//To update the server using timer, so that it will update the server only once when the task and depended tasks changed

if (timer) {

clearTimeout(timer);

}

timer = setTimeout(function () {

UpdateModifiedTasks();

}.bind(this), 500);

}

function UpdateModifiedTasks() {

if (updatedTasks.length == 0)

return;

// $.post('/Home/UpdateModifiedTasks',

// { updatedTasks: JSON.stringify(updatedTasks) },

// function (data) {

// alert(data);

// });

updatedTasks = new RadiantQ.Gantt.Dictionary();

}

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) {

// $.post('/Home/UpdateAddedTasks',

// { addedTasks: JSON.stringify(addedTasks) },

// function (data) {

// alert(data);

// });

}

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) {

//$.post('/Home/UpdateRemovedTasks',

// { removedTaskIds: JSON.stringify(removedTaskIds) },

// function (data) {

// alert(data);

// });

removedTaskIds = [];

}

For a live example of the approach discussed here, refer to one of these samples:

In HTML : ..\Samples\GanttControlEditsImmediateSave.htm.

In ASP.NET MVC : ..\SQLBinding\ASPNetSamples\GanttControlEditsImmediateSave.cshtml.

In ASP.NET : ..\SQLBinding\MVC4Samples\GanttControlEditsImmediateSave.aspx.