Task Bar Redraw

Forcing a Redraw of the Bars

Gantt enables you to redraw the whole chart rows by calling "RedrawChartRows" GanttControl method.

The task bar look and feel is defined using templates as shown above. And these templates can also use bindings to customize the look and feel based on the underlying data-object properties. However, the look does not automatically change when the underlying data changes. There are 2 ways to ensure this:

- Using KnockOut. This is illustrated this in topic. This would in fact result in a much more cleaner code with the MVVM approach. However, this adds a level of complexity to your pages.

- Simply redraw the bars whenever a data object value changes. This is what this API allows you to do.

Here is some sample code that illustrates a use case from our GanttControlCriticalPath sample.

// Template to show the critical task.

var tTemplate = "<div class='rq-gc-taskbar' style='background-image:${UpdateBackgroundColorBinding(data)} !important; border-color:${ UpdateBorderColorBinding(data)} !important'><div id='GanttTaskBarLabel' class='rq-gc-taskbar-label'></div></div>";

function updateCriticalPaths(sender, e) {

// The first argument to GetCriticalPathActivities is a time-buffer which speifies the "safe distance"

// that an activity's end time should be away from affecting the project deadline.

CriticalPathActivities = $ganttControl.GetCriticalPathActivities(RQTimeSpan.Zero);

$ganttControl.RedrawChartRows();

}

function clearCriticalPaths(sender, e) {

CriticalPathActivities = [];

$ganttControl.RedrawChartRows();

}

function UpdateBackgroundColorBinding(data) {

var isCritical = CriticalPathActivities.indexOf(data) != -1;

// for background-image

if (isCritical)

return 'url(Images/redBar.png)';

return 'url(Src/Styles/Images/TaskBar.png)';

}

function UpdateBorderColorBinding(data) {

var isCritical = CriticalPathActivities.indexOf(data) != -1;

// for background-color

if (isCritical)

return 'red';

return '#050DFA';

}

The ....\GanttControlCriticalPath sample illustrates a use case for this method.

Redraw APIs.

RadiantQ GanttControl allows you to redraw the single chart row and also enable you to redraw the whole chart rows. Below code will illustrates how to redraw single row and whole rows in chart.

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

$ganttControl.RedrawChartRows();

});

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

var activityview = ganttControl.SelectedItem;

$ganttControl.RedrawChartRow(activityview);

});