RadiantQ jQuery Gantt Package
RefreshRowForeground
Previous Topic  Next Topic 

Custom UI in Row Foreground:

Similar to the above topic(RefreshRowBackground), you might want to occasionally render some custom UI on top of the tasks in the row. For example, to indicate "breaks" at specific times in the chart.

You do so by first setting EnableCustomRowForeground to true and then subscribing to RefreshRowForeground. Below is some sample code that shows how to use the RenderNonWorkingHours to render some rectangular divs indicating 'breaks'.

$gantt_container.FlexyGantt({

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

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

       EnableCustomRowForeground: true,

       GanttChartTemplateApplied: function (sender , args) {

          var flexyGantt = $gantt_container.data("FlexyGantt");

          var GanttChart = args.element;

          // RefreshRowForeground event is raised every time the row's span changes

          GanttChart.RefreshRowForeground.subscribe(function (fgDiv, args) {

               // fgDiv - The div inside which you should add your custom UI elements.

               // args - It contain the two values.

                   // args.GanttChart - Reference to the GanttChart widget.

                   // args.Data  -  Reference to the FlexyNodeData of the row.

                var data = args.Data._data;

                var breaksID = data.BreaksID;

                var break = getBreaks(breaksID);

                if (break)

                    RadiantQ.FlexyGantt.RenderNonWorkingHours(fgDiv, 'grayFGStyle', args.GanttChart, break);

           });

        }

});

Break times in a schedule rendered with gray background



© RadiantQ 2022. All Rights Reserved.