Persisting Changes in Bulk

This topic describes how persisting changes in Bulk using a button click. The previous topic shows how to Persisting Changes Immediately.

Caching Changes

Cache the changes made by the user so you can send the changes to the server in bulk at a later time. 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.

//To listen to 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 already in the cached tasks list.

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

updatedTasks.Add(boundData.ID, boundData);

}

Updating Added and Removed Tasks in Bulk.

When a task is added to gantt, add the task object to a dictionary (later parsed as string) .

//To cache the newly added task objects.

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

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

var newTask = getNewTask();

ganttControl.AddNewItem(newTask);

//Add the newly added task to Dictionary.

addedTasks.Add(newTask.ID, newTask);

return false;

});

When the task is removed from the gantt, cache it's task id. Remove this task from the "addedTasks" and "updatedTasks" list, if it's there.

//To cache the Id of the removed tasks

var removedTaskIds = [];

// To remove the selected task.

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

var activitys = null;

var activity = gantt.SelectedActivity;

if (activity) {

var ganttItemSource = gantt.options.DataSource;

activitys = gantt.RemoveActivity(activity.ID);

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

var boundData = activitys[i].DataSource;

// To check and remove the task from addedTasks and updatedTask list.

cacheRemovedTask(boundData.ID);

// To remove the task from bounded datasource

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

}

else

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

});

cacheRemovedTask = function (removedTaskID) {

removedTaskIds.push(removedTaskID);

//To remove the removed task from addedTasks list

if (addedTasks.Contains(removedTaskID))

addedTasks.Remove(removedTaskID);

//To remove the removed task from updatedTasks list

if (updatedTasks.Contains(removedTaskID))

updatedTasks.Remove(removedTaskID);

}

When the user is ready to save the changes, he could click on a "Save" button for example in whose handler you could call the UpdateModifiedTasks() method below to save the changes in the server.

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

//$.ajax({

// type: "POST",

// url: '../../DataSource/Save.ashx',

// dataType: "json",

// data: { addedTasks: JSON.stringify(addedTasks.asArray), removedTaskIds: JSON.stringify(removedTaskIds) },

// async: false,

//});

alert("Data is updated!");

//clearing the cached values;

addedTasks = new RadiantQ.Gantt.Dictionary();

removedTaskIds = [];

updatedTasks = new RadiantQ.Gantt.Dictionary();

});

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

In HTML : ..\Samples\GanttControlCustomDataBinding.htm.

In ASP.NET MVC : ..\SQLBinding\MVC4Samples\Views\Home\Index.cshtml.

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