Gantt Customization using Color Palette

Gantt allows you to customize the color for taskbar, milestone bar, font, resource label and row background using color palette feature. Font type, resource label font type, font size and row height are customized using font selector.

You can enable these features by following steps.

Function below is for resource label text. We defined this in sample level for resource label text customization.

function getResourceLabel(activity) {

var assignments = activity.Assignments_M();

var labelSpans = "";

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

if (i > 0)

labelSpans += "<span>, </span>";

var assignTxt = assignments[i].toString();

var resID = assignments[i].Resource.DataSource.ResourceID;

var resTxtColor = assignments[i].Resource.DataSource.color;

labelSpans += "<span class='res" + resID + " resTextLabel resTextLabel" + resID + " resourceClass' resID=" + resID + " style='color: " + resTxtColor + "';>" + assignTxt + "</span>";

}

return labelSpans;

}

Here, the customization like background color, font color, type, size for rows takes place using the GanttTableRowLoadedCallBack(). Row height can also be set in this option.

$(document).ready(function () {

$gantt_container = $('#gantt_container');

$gantt_container.GanttControl({

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

GanttTableRowLoadedCallBack: function ($tr, activityView) {

var activity = activityView.Activity;

var dataSource = activity.DataSource;

if (dataSource.RowInfo) {

$("td", $tr).css({

"background-color": dataSource.RowInfo.background,

"color": dataSource.RowInfo.color,

"font-family": dataSource.RowInfo["font-family"],

"font-size": dataSource.RowInfo["font-size"],

"height": dataSource.RowInfo.height

});

$tr.height(dataSource.RowInfo.height);

}

$tr.RQTooltip(function () {

var activity = activityView.Activity;

return '<div>' + activity.ActivityName + '</div><div>' + activity.Description + '</div>';

});

// Template for taskbar, parent bar and milestone bar to customize the label.

TaskItemTemplate: "<div class='rq-gc-taskbar'><div class='rq-gc-taskbar-label'>${getResourceLabel(data)}</div></div>",

ParentTaskItemTemplate: "<div class='rq-gc-parentBar rq-gc-tooltip'><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle'></div><div class='rq-gc-parentBar-rightCue'></div><div class='rq-gc-taskbar-label'>${getResourceLabel(data)}</div></div>",

MileStoneTemplate: "<div class='rq-gc-milestoneBar'><div class='milestone'></div><div class='rq-gc-taskbar-label'>${getResourceLabel(data)}</div></div>",

OnTaskBarLoad: onTaskBarLoad

});

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

});

onTaskBarLoad() function does the customization for taskbar and milestone.

function onTaskBarLoad(ganttTaskItemBar) {

var activity = ganttTaskItemBar.Activity;

var dataSource = activity.DataSource;

if (dataSource.RowInfo) {

var rowHeight = dataSource.RowInfo.height, barHeight = 17;

var $td = $(this).height(barHeight).parents("td").height(rowHeight).css({

"background-color": dataSource.RowInfo.background,

"color": dataSource.RowInfo.color,

"font-family": dataSource.RowInfo["font-family"]

});

var $tr = $td.parents("tr").height(rowHeight);

$(this).css("margin-top", (rowHeight / 2) - (barHeight / 2));

if (dataSource.RowInfo["task-color"] || dataSource.RowInfo["milestone-color"]) {

if (activity.IsMilestone) {

var $this = $(this);

$(".milestone", $td).css({ "background-color": dataSource.RowInfo["milestone-color"] });

}

else if (!ganttTaskItemBar.IsParent() && (dataSource.RowInfo["task-color"])) {

if (dataSource.RowInfo["task-color"] != undefined) {

$(this).addClass("rq-gc-noneBackgroundImage");

$(this).css({ "background-color": dataSource.RowInfo["task-color"] });

}

else {

$(this).removeClass("rq-gc-noneBackgroundImage");

}

$('.resourceClass', this).bind("contextmenu", function (evt) {

$(this).addClass("selected-resource");

//position to place palette, set in options

xPos = $(this).offset().left;

yPos = $(this).offset().top;

});

}

Customization using Gantt Context Menu:

Table Context Menu:

Below code block is the definition of table context menu. New context menu item 'CustomRowSetting' for table context menu is added.

$(document).ready(function () {

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

ganttControl.TableContextMenu.AddNewItems([

{

keyName: "CustomRowSetting",

name: "Custom Row settings",

callback: function (key, opt) {

var $rowElement = opt.$trigger;

var activityview = table.GetDataFromRow($rowElement[0]);

$rowElement.initRQFontSelector(ganttControl, table, activityview, updateDataSource);

}

}], true);

// adding context menu to taskbar

taskbarMenuItem(ganttControl);

)}:

Taskbar and Milestone Context Menu:

Below code block adds context menu items for taskbars, milestones in chart area.

//context menu for 'Change Color' - taskbar

function taskbarMenuItem(ganttControl) {

var taskMenuItems = [

{

keyName: "ChangeColor", name: "ChangeColor", icon: "ChangeColor", callback: function (key, opt) {

var $curTaskbar = opt.$trigger;

var applyAllSelector = ".rq-gc-taskbar",

defaultColor = "cornflowerblue";

initColorPalatte($curTaskbar, applyAllSelector, onapply, onapplyAll, ondefault, defaultColor);

function onapply(selectedColorStr) {

this.addClass("rq-gc-noneBackgroundImage");

var ds = $curTaskbar.parents("td").data("GanttTaskItemBar").Activity.DataSource;

if (!ds.RowInfo)

ds.RowInfo = {};

ds.RowInfo['task-color'] = selectedColorStr;

}

function onapplyAll(selectedColorStr, $taskbars, applyAllSelector) {

$taskbars.addClass("rq-gc-noneBackgroundImage");

var gc = $curTaskbar.parents("td").data("GanttTaskItemBar").GanttControl;

$allTaskbars = $(".rq-gc-taskbar");

for (i = 0; i < gc.options.DataSource.length; i++) {

var isCustomOrTaskBar = $curTaskbar.hasClass("custom-taskbar");

if (!gc.options.DataSource[i].RowInfo)

gc.options.DataSource[i].RowInfo = {};

if (!gc.ActivityViews[i].IsParent && !gc.ActivityViews[i].activity.IsMilestone) {

gc.options.DataSource[i].RowInfo['task-color'] = selectedColorStr;

}

function ondefault($element, $elemClone, applyAs, isApplyAll) {

$element.removeClass("rq-gc-noneBackgroundImage");

var gc = $curTaskbar.parents("td").data("GanttTaskItemBar").GanttControl;

var isCustomOrTaskBar = $curTaskbar.hasClass("custom-taskbar")

if (isApplyAll) {

for (i = 0; i < gc.options.DataSource.length; i++)

gc.options.DataSource[i].RowInfo['task-color'] = null;

}

else {

var ds = $curTaskbar.parents("td").data("GanttTaskItemBar").Activity.DataSource;

ds.RowInfo['task-color'] = null;

}

}];

ganttControl.TaskContextMenu.AddNewItems(taskMenuItems, true);

//context menu for 'Change Color' - milestone

var taskItemBar = [

{

keyName: "ChangeColor", name: "ChangeColor", icon: "ChangeColor", callback: function (key, opt) {

var $curMilestone = opt.$trigger;

var $milestone = $(".milestone", $curMilestone);

var applyAllSelector = ".milestone",

applyAs = "background-color",

adjustment = null,

defaultColor = "black";

//($elem /*mandatory*/, applyAllSelector /*mandatory*/, onapply, onapplyAll, ondefault, defaultColor, applyAs, pos, adjustment, onchange, oncancel)

initColorPalatte($milestone, applyAllSelector, onapply, onapplyAll, ondefault, defaultColor, applyAs, "", adjustment);

function onapply(selectedColorStr) {

var ds = $curMilestone.parents("td").data("GanttTaskItemBar").Activity.DataSource;

if (!ds.RowInfo)

ds.RowInfo = {};

ds.RowInfo['milestone-color'] = selectedColorStr;

}

function onapplyAll(selectedColorStr, $milestone, applyAllSelector) {

var gc = $curMilestone.parents("td").data("GanttTaskItemBar").GanttControl;

for (i = 0; i < gc.options.DataSource.length; i++) {

if (!gc.options.DataSource[i].RowInfo)

gc.options.DataSource[i].RowInfo = {};

gc.options.DataSource[i].RowInfo['milestone-color'] = selectedColorStr;

}

function ondefault($element, $elemClone, applyAs, isApplyAll, defaultColor) {

$element.css(applyAs, defaultColor);

var gc = $curMilestone.parents("td").data("GanttTaskItemBar").GanttControl;

var $tr = null;

var dataUid = null;

$element.each(function (index, elem) {

var currDataUid = $(elem).parents("tr").data("uid");

if (dataUid == null || dataUid != currDataUid)

updateDataSource.call(elem, isApplyAll, applyAs, defaultColor);

dataUid = currDataUid;

});

}

}];

ganttControl.MilestoneContextMenu.AddNewItems(taskItemBar, true);

Context Menu for Resource label :

Below code block is the definition of resource text context menu. New context menu item 'ChangeResColor' is added for taskbar and milestone.

//context menu for Resource Color

var resTextColorMenu = [

{

keyName: "ChangeResColor", name: "ChangeResColor", icon: "ChangeColor", callback: function (key, opt) {

var $curElem = opt.$trigger;

var $selectedResElem = $(".selected-resource", $curElem).removeClass("selected-resource");

var selectedResID = $selectedResElem.attr("resID");

if (!selectedResID)

return;

var $resText = $('.res' + selectedResID);

var offset = $selectedResElem.offset();

var applyAllSelector = ".resTextLabel",

defaultColor = "black",

applyAs = 'color',

pos = { x: offset.left, y: offset.top + 20 };

initColorPalatte($resText, applyAllSelector, onapply, onapplyAll, ondefault, defaultColor, applyAs, pos);

function onapply(selectedColorStr) {

var gantt = $curElem.parents("td").data("GanttTaskItemBar").GanttControl;

var res = gantt.Model.GanttResources.getResourceByID(selectedResID);

res.DataSource.color = selectedColorStr;

}

function onapplyAll(selectedColorStr) {

var gantt = $curElem.parents("td").data("GanttTaskItemBar").GanttControl;

for (i = 0; i < gantt.Model.GanttResources.length; i++) {

var res = gantt.Model.GanttResources[i];

res.DataSource.color = selectedColorStr;

}

function ondefault(defaultColorStr) {

var gantt = $curElem.parents("td").data("GanttTaskItemBar").GanttControl;

var res = gantt.Model.GanttResources.getResourceByID(selectedResID);

res.DataSource.color = defaultColorStr;

}

}];

ganttControl.TaskContextMenu.AddNewItems(resTextColorMenu, true);

ganttControl.MilestoneContextMenu.AddNewItems(resTextColorMenu, true);

}

Below functions are for callback and updating customized properties in data source.

function initColorPalatte($elem /*mandatory*/, applyAllSelector /*mandatory*/, onapply, onapplyAll, ondefault, defaultColor, applyAs, pos, adjustment, onchange, oncancel) {

$elem.RQColorPalette({

applyAllSelector: applyAllSelector,

defaultColor: defaultColor,

applyAs: applyAs,

pos: pos,

adjustment: adjustment,

onchange: onchange,

onapply: onapply,

onapplyAll: onapplyAll,

ondefault: ondefault,

oncancel: oncancel

});

}

function updateDataSource(isApplyAll, prop, selColor) {

var ganttControl = $gantt_container.data("GanttControl") || $gantt_container.data("radiantqGanttControl");

var table = ganttControl.GetGanttTable();

var $elem = $(this);

var $tr = $elem.parents("tr");

var ds = table.GetDataFromRow($tr).Activity.DataSource;

if (!ds.RowInfo)

ds.RowInfo = {};

switch (prop) {

case "FontColor":

ds.RowInfo["color"] = $elem.css("color"); break;

case "RowBGColor":

ds.RowInfo["background"] = $elem.css("background-color"); break;

case "background-color":

ds.RowInfo["milestone-color"] = $elem.css(prop); break;

default:

}

Required references for this feature

This feature requires you to include the following script files and stylesheets in your web page.

For color picker

spectrum.css
spectrum.js
RQColorPalette.js

For font style picker

fontSelector.css
jquery.fontselector.js
RQFontSelector.js

These script files are available in ..\Samples\Scripts and stylesheets in ..\Samples\Styles.

Gantt Customization feature is illustrated in ..\Samples\GCDynamicCustomization.htm sample.

NOTE : It is not advised to use this feature in samples with dependency lines.