To set up a specific task bar template when using Gantt Chart Hyper Library, you need to use ganttChartView.settings.*TaskTemplate and/or item.taskTemplate properties. A fully working example for improving touch capabilities of the presentation is presented below:
ganttChartView.standardTaskTemplate = function (item) {
var control = item.ganttChartView, settings = control.settings, document = control.ownerDocument,
svgns = 'http://www.w3.org/2000/svg';
// Create, if needed, and store and manage the SVG group element that will represent the task bar area.
if (typeof item.taskBarAreaContainerGroup === 'undefined')
item.taskBarAreaContainerGroup = document.createElementNS(svgns, 'g');
var containerGroup = item.taskBarAreaContainerGroup;
for (var i = containerGroup.childNodes.length; i-- > 0; )
containerGroup.removeChild(containerGroup.childNodes[i]);
// Determine item positioning values.
var itemLeft = control.getChartPosition(item.start, settings),
itemRight = control.getChartPosition(item.finish, settings),
itemCompletedRight = control.getChartPosition(item.completedFinish, settings);
// SVG rectangle element that will represent the main bar of the task (blue).
var rect = document.createElementNS(svgns, 'rect');
rect.setAttribute('x', itemLeft); rect.setAttribute('width', Math.max(0, itemRight - itemLeft - 1));
rect.setAttribute('y', settings.barMargin - 0.5); rect.setAttribute('height', settings.barHeight + 0.5);
rect.setAttribute('style', 'stroke: Blue; fill: LightBlue; stroke-width: 0.65px; fill-opacity: 0.5;');
containerGroup.appendChild(rect);
if (settings.isTaskCompletedEffortVisible) {
// SVG rectangle element that will represent the completion bar of the task (gray).
var completionRect = document.createElementNS(svgns, 'rect');
completionRect.setAttribute('x', itemLeft);
completionRect.setAttribute('y', settings.barMargin + settings.completedBarMargin - 0.5);
completionRect.setAttribute('width', Math.max(0, itemCompletedRight - itemLeft - 1));
completionRect.setAttribute('height', settings.completedBarHeight + 0.5);
completionRect.setAttribute('style',
'stroke: Gray; fill: Gray; stroke-width: 0.65px; fill-opacity: 0.5;');
containerGroup.appendChild(completionRect);
}
// SVG rectangle element that will behave as a task bar thumb,
// providing horizontal drag and drop operations for the main task bar.
var thumb = document.createElementNS(svgns, 'rect');
thumb.setAttribute('x', itemLeft); thumb.setAttribute('width', Math.max(0, itemRight - itemLeft - 1));
thumb.setAttribute('y', settings.barMargin); thumb.setAttribute('height', settings.barHeight);
thumb.setAttribute('style', 'fill: Transparent; cursor: move');
containerGroup.appendChild(thumb);
// SVG rectangle element that will behave as a task finish time editing thumb,
// providing horizontal drag and drop operations for the right end of the main task bar.
var finishThumb = document.createElementNS(svgns, 'rect');
finishThumb.setAttribute('x', itemRight - 8);
finishThumb.setAttribute('y', settings.barMargin);
finishThumb.setAttribute('width', 10);
finishThumb.setAttribute('height', settings.barHeight);
finishThumb.setAttribute('style', 'fill: Transparent; cursor: e-resize');
containerGroup.appendChild(finishThumb);
control.initializeTaskDraggingThumbs(thumb, null, finishThumb, null, item, itemLeft, itemRight, null);
if (settings.areTaskDependenciesVisible) {
// SVG circle element that will behave as a task dependency creation thumb,
// providing vertical drag and drop operations for the right end of the main task bar.
var dependencyThumb = document.createElementNS(svgns, 'circle');
dependencyThumb.setAttribute('cx', itemRight - 2);
dependencyThumb.setAttribute('cy', settings.barMargin + settings.barHeight / 2);
dependencyThumb.setAttribute('r', settings.barHeight / 4);
dependencyThumb.setAttribute('style', 'fill: Transparent; cursor: pointer');
containerGroup.appendChild(dependencyThumb);
control.initializeDependencyDraggingThumb(dependencyThumb, containerGroup, item,
settings.barMargin + settings.barHeight / 2, itemRight - 2);
}
return containerGroup;
}
To set up a specific task bar client side template when using Gantt Chart Web Library, you need to use GanttChartView.*TaskTemplateClientCode and/or GanttChartItem.TaskTemplateClientCode properties. An example, partially using the same JavaScript® code as for Gantt Chart Hyper Library is presented below:
GanttChartView.StandardTaskTemplateClientCode = @"
var settings = control.settings, document = control.ownerDocument,
svgns = 'http://www.w3.org/2000/svg';
// Create, if needed, and store and manage the SVG group element that will represent the task bar area.
if (typeof item.taskBarAreaContainerGroup === 'undefined')
item.taskBarAreaContainerGroup = document.createElementNS(svgns, 'g');
var containerGroup = item.taskBarAreaContainerGroup;
for (var i = containerGroup.childNodes.length; i-- > 0; )
containerGroup.removeChild(containerGroup.childNodes[i]);
[...]
return containerGroup;";
To set up a specific task bar client side template when using Gantt Chart Modern Library, you need to use GanttChartView.*TaskTemplateCode and/or GanttChartItem.TaskTemplateCode properties. An example, partially using the same JavaScript® code as for Gantt Chart Hyper Library is presented below (note that internally the WinRT controls from Gantt Chart Modern Library use HTML5 based components, requiring JavaScript® template functions and CSS styles, and therefore they do not support XAML styles and templates):
GanttChartView.StandardTaskTemplateCode = @"
var settings = control.settings, document = control.ownerDocument,
svgns = 'http://www.w3.org/2000/svg';
// Create, if needed, and store and manage the SVG group element that will represent the task bar area.
if (typeof item.taskBarAreaContainerGroup === 'undefined')
item.taskBarAreaContainerGroup = document.createElementNS(svgns, 'g');
var containerGroup = item.taskBarAreaContainerGroup;
for (var i = containerGroup.childNodes.length; i-- > 0; )
containerGroup.removeChild(containerGroup.childNodes[i]);
[...]
return containerGroup;";
}