How to listen to changes made by the end-user on the tasks?

There are a few different ways to do this, go through all the options below and choose the right one for you.

1 ) ..\Samples\GanttBoundToXML.htm.

2 ) ..\Samples\TrackingEndTimeInDataSource.htm

Option 1

Listen to the GanttControl.ActivityTimeChanged event, which is raised only when the end-user changes the start or end time (duration) of an activity in the GanttChart.

//Will nofity when the task start/end changed.

ganttControl.ActivityTimeChanged.subscribe(activity_timeChanged);

function activity_timeChanged(sender, args) {

if (args.Type == "DragEnd") {

alert("Task Moved, New Start and End is" + args["StartTime"] + args["EndTime"]);

}

else if (args.Type == "ResizeEnd") {

alert("Task Resized, New End is" + args["EndTime"]);

}

Note that if you added the ability to edit the times in the Grid, this event will not be raised when the user edits the times in the Grids.

Option 2

To get a comprehensive notification of all changes happening on an activity, consider listening to the Model.ActivityUpdated event. This event will be raised for all the properties in your task object that are bound to the gantt (like Start Time, End Time, Predecessors, Progress, etc.). This will be raised both changes that are initiated from the Chart and in the Grid.

Occasionally, you might be showing some custom data in the Gantt's Grid, in a custom column and if the user edits the values in those columns, the above event will not be raised for that.

Code sample to listen to this event:

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

$ganttControl.Model.ActivityUpdated.subscribe(activity_Updated);

function activity_Updated(sender, args) {

var taskSource = activity.DataSource;// to get hold of the underlying data source.

// The activity has the latest values edited by the user.

}

Note that this event will only call after the GanttControl loads. In other words, this will not be raised for changes made to you task objects (typically the times) while the Gantt's Model is getting initialized. While initializing, if the Model sees that the times in your task objects need to be adjusted (to take into account project schedule, dependencies, etc.) it will do so.

Option 3

The best way to keep notified of changes is to listen directly to your bound task object's property changed events. Java Script objects, of course, don't emit any change notification, however, there are 2 ways to enable them to notify changes:

a) Enable Change Notification through Knockout

If you have applied Knockout on your data objects then they will be notifying changes.

function propertyChangeNotifier(value) {

//To get currently modified task objet field name.

var proptyName = this.PropertyName;

//To get the modifed task object.

var task = this.TaskObject;

// alert("PropertyName : " + proptyName + "New Value : " + value);

}

ko.utils.arrayForEach(viewModel.Tasks(), function (taskObject) {

for (var fieldName in taskObject) {

var field = taskObject[fieldName];

if (field.subscribe) {//{ PropertyName: fieldName, TaskObject: taskObject } is the context for the subscribe method

field.subscribe(propertyChangeNotifier, { PropertyName: fieldName, TaskObject: taskObject });

}

});

b) Insert Change Notifying code

If you are not using KO, our library comes with a simple utility that will insert change notifying code into your objects and then you can listen to changes in the data. Here is the code that lets you do that:

$gantt_container.GanttControl({

DataSource: self.jsonData,

// This will make the bound objects trigger change notifications.

CanInsertPropertyChangeTriggeringPropertiesInData: true

....

});

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

var activityViews = ganttControl.ActivityViews;

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

var view = activityViews[i];

var activity = view.Activity;

//To listen the task property changes.

var task = activity.DataSource;

task.PropertyChanged.subscribe(PropertychangeNotifier);

}

function PropertychangeNotifier(sender, args) {

//Sender - holds the bounded task object

//arg.PropertyName - holds the propery which was changed by end user(like StartTime, Effort, name etc..)

//arg.PropertyName - holds the updated value for the arg.PropertyName

}

When a task is newly added, you will have to listen to it's PropertyChanged events too. This is discussed in this topic.