Task Templates
The look and feel of the task bars has to be defined via the TaskItemTemplate and ParentTaskItemTemplate options in the FlexyGantt widget.
Task and Summary Task look
The template is usually a html string with one DOM element (usually a div) that represents the child or parent task bar in the chart area. This DOM element will be laid out at the appropriate position and length in the chart area.
RadiantQ template(...\RadiantQTemplate\RadiantQTemplate.chm) library is used internally to convert the template provided to actual dom elements.
Example Template that defines the above look for the child and parent bars,
var pTemplate = "<div class='rq-gc-parentBar'><div class='parentLeftPoly-style'></div><div class='parentMiddleBar-style'></div><div class='rq-gc-parentBar-rightCue'></div></div>"; var tTemplate = "<div class='rq-gc-taskbar'></div>"; $('#container').FlexyGantt({ TaskItemTemplate: tTemplate, ParentTaskItemTemplate: pTemplate }); |
In ASP.NET MVC |
@Html.JQFlexyGantt( new JQFlexyGanttSettings() { ControlId = "gantt_container", DataSourceUrl = new Uri("/Home/GetFlexyGanttItemSource", UriKind.RelativeOrAbsolute), Options = new FlexyGanttOptions() {
TaskItemTemplate = "<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>", ParentTaskItemTemplate = "<div class='rq-gc-parentBar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='parentLeftPoly-style'></div><div class='parentMiddleBar-style'></div><div class='rq-gc-parentBar-rightCue'></div></div>", .. } } ) |
In ASP.NET |
<RQ:FlexyGantt runat="server" ID="gantt" Height="500" TaskItemTemplate="<div class='rq-gc-taskbar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div></div>" ParentTaskItemTemplate="<div class='rq-gc-parentBar'><div class='rq-taskbar-dragThumb'></div><div class='rq-taskbar-resizeThumb'></div><div class='parentLeftPoly-style'></div><div class='parentMiddleBar-style'></div><div class='rq-gc-parentBar-rightCue'></div></div>" ... /> |
Below are the styles referenced in above templates,
.rq-gc-taskbar { height: 18px; background-image: url(TaskBar.png); -moz-background-size: 100% 100%; /* Firefox 3.6 */ background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid #050DFA; border-radius: 7px; float: left; position:absolute; z-index:10; } .rq-gc-parentBar { position: absolute; width:500px ; height:20px; z-index:10; } .parentLeftPoly-style { background-image: url('poly.png'); width: 20px; position: absolute; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; float: left; } .parentMiddleBar-style { background-image: url('bar.png'); width: 100%; position: absolute; height: 50%; background-repeat: no-repeat; background-size: 100% 100%; float: left; } .rq-gc-parentBar-rightCue { background-image: url('poly.png'); width: 20px; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; float: right; } |
This is illustrated in this samples:
In HTML : ..\Samples\FlexyGanttCustomTaskLook.htm.
In ASP.NET MVC : ..\Views\Home\FlexyGantt\FlexyGanttCustomTaskLook.cshtml.
In ASP.NET : ..\Samples\FlexyGantt\FlexyGanttCustomTaskLook.aspx.
© RadiantQ 2022. All Rights Reserved.