Using Knockout

Using Knockout(KO)

Knockout is a JavaScript library that helps you to create clean, rich, responsive display with a clean underlying data model - using an MVVM approach. Any time you have sections of UI that update dynamically (e.g., changing depending on the user�s actions or when the bound data source changes), KO can help you implement it more simply and maintainably.

Why Knockout in gantt?

By default Gantt has it own data binding utilities that are light-weight, providing templating support, observable collections, etc. These utilities can be used outside the gantt as well. So, you don't really need to use KO.

But, if your page has to use KO for any other reason, then you can use the same in the Gantt as well.

Gantt Setup with Knockout

To begin with add the JSON task list to the Knockout "view model" as follows:

var mappingFilter = {

// Do not let Knockout transform the TimeSpan objects.

'Effort': {

create: function (data) {

return ko.utils.unwrapObservable(data.data);

}

viewModel = {

Tasks: ko.mapping.fromJS(self.jsonData, mappingFilter)

};

Define a Knockout template, which usually has some way to customize the look of the gantt based on an activity property value. In this case if the "ProgressPercent" is < 50, we draw the bars in red and green otherwise.

// Customizing the taskbar color based on ProgressPercent

var tTemplate = "<div data-bind=\"attr: { 'class': RQDataContext.ProgressPercent() > 50 ? 'rq-gc-taskbar bluebar-style' : 'rq-gc-taskbar greenbar_style'}\" ><div data-bind=\"text: RQDataContext.Description()\" class='rq-gc-taskbar-label'></div></div>";

$ganttControl.GanttControl({

ProjectStartDate: anchorTime,

DataSource: viewModel.Tasks(),

TaskItemTemplate: tTemplate,

....

});

And since we are using Knockout, the task bars will update themselves as and when the progress value changes.

Note: "RQDataContext" will simply be your original bound data object representing the task data.

Here is the resultant gantt:

This is illustrated in this samples:

In HTML : ..\Samples\GanttControlSkeletonUsingKO.htm.

In ASP.NET MVC : ..\Views\Home\ProjectGantt\GanttControlSkeletonUsingKO.cshtml.

In ASP.NET : ..\Samples\ProjectGantt\GanttControlSkeletonUsingKO.aspx.