RadiantQ jQuery Gantt Package
Task Template
Previous Topic  Next Topic 

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,

In HTML

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.