How to enable Undo/Redo feature for custom columns ?

Here is the code that illustrates how to enable Undo/Redo feature for custom field(cost).

$.ajax({

.................

success: function (data) {

self.jsonData = data;

// Listening property changes for custom column(Cost) to let Gantt update - Undo/Redo.

for (i = 0; i < data.length; i++)

InjectGetAndSet.call(data[i], "Cost", data[i].Cost);

$.holdReady(false);

}

});

function InjectGetAndSet(key, value) {

this.PropertyChanged = new ObjectEvent("PropertyChanged");

if (key == "Cost") {

var catchVal = parseInt(value);

this[key + "_M"] = function (newValue) {

if (arguments.length == 0) {

return catchVal;

}

else {

if (newValue != catchVal) {

catchVal = newValue;

this.PropertyChanged.raise(this,

{

PropertyName: key,

Value: newValue

});

}

if (RadiantQ.CanUseDefineProperty) {

Object.defineProperty(this, key, {

get: function () {

return catchVal;

set: function (newValue) {

if (newValue != catchVal) {

catchVal = newValue;

this.PropertyChanged.raise(this,

{

PropertyName: key,

Value: newValue

});

}

enumerable: true,

configurable: true

});

}

function ToDollarString(data) {

if (data.activity.DataSource_M().Cost_M() == null)

data.activity.DataSource_M().Cost_M(0);

return "$" + data.activity.DataSource_M().Cost_M();

}

//Column definition.

var columns = [

{

field: "Activity.DataSource.Cost",

title: "Cost",

editor: "<input data-bind='value:Activity.DataSource.Cost' data-role=\"spinner\" data-options='{\"min\":0}'/>",

template: "<div>${ToDollarString(data)}</div>",

width: 60,

isParentEditable: false,

}];

Enabling Undo/Redo

The GanttControl has support for tracking user actions and building an undo/redo stack that the users can then operate on. You can turn on this feature as follows:

$('#gantt_container').GanttControl({

EnableRecordingActions: true,

});

Now, you can enable Undo/Redo feature for custom column(cost) in a table.

Undo and Redo

You can then allow users to Undo or Redo actions on the top of the stack using the following APIs:

var ganttControl = $('#gantt_container').data('GanttControl');

// To Undo the action on top of the undo stack

ganttControl.ActionManager.Undo();

// To Redo the action on top of the redo stack

ganttControl.ActionManager.Redo();

Similarly, you can enable Undo/Redo feature for different custom fields.