RadiantQ jQuery Gantt Package
Persisting Changes in Bulk
Previous Topic  Next Topic 

This topic describes how persisting changes in Bulk using a button click. 


For a live example of the approach discussed here, refer to this PHP sample:

\Samples\ProjectGantt\DataBaseSample.php


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

}    


Updating Added and Removed Tasks in Bulk.


When a task is added to gantt, add the task object to the 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 gantt, cache the task ids in an array and also check if the task exists in the added and updated dictionary, and if it does, remove it from those dictionaries.


//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 called the UpdateModifiedTasks() method below to save the changes in the server.


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

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

    var AddedTasksJson = JSON.stringify(addedTasks.asArray, MySQLDateFormatConversion);

    $.post("<?php echo $_SERVER['PHP_SELF'];?>?type=update", { AddedTasks: AddedTasksJson, RemovedTaskIds: removedTaskIds, UpdatedTasks: UpdatedTasksJson }, function (data) {


    });

    UpdatedTasks = new RadiantQ.Gantt.Dictionary();

    AddedTasks = new RadiantQ.Gantt.Dictionary();

    RemovedTaskIds = [];

});


function MySQLDateFormatConversion(key, value) {

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

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

    return value;

}

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

    $dbh->SaveTasks($_POST,'tasks');

}



© RadiantQ 2022. All Rights Reserved.