Task Popup

Popups are shown when the end-user interacts with the task, when they move it, resize it, connect 2 tasks, resize the progress information, etc. While the default content might be good enough and appropriate enough for most scenarios, you can replace these popups with custom popups if necessary.

These are the properties in GanttChart that will allow you do this:

- ResizeInfoPopup

- ProgressResizePopup (used only by GanttControl)

- MovingInfoPopup

- ConnectingInfoPopup (used only by GanttControl)

The class reference for these properties contain information on the DataContext that will be applied on these custom popup templates.

Let us see how to customize the MovingInfoPopup using a template with an example.

(Note that the RadiantQ template library is used internally to convert the template provided to actual dom elements.)

<tr>

<td colspan='2' align='center'>${RadiantQ_TaskString} </td>

</tr>

<tr>

<td>${RadiantQ_StartString} : ${data.StartTime.toString('yyyy-MM-dd HH:mm')} </td>

</tr>

<tr>

<td>${RadiantQ_FinishString} : ${data.EndTime.toString('yyyy-MM-dd HH:mm')} </td>

</tr>

</table>

</script>

<tr>

</tr>

<tr>

<td style='float: right;'>Duration : </td>

<td>#if (data.Duration){# #= data.Duration.days_M() #d #= data.Duration.hours_M() #h #}# </td>

</tr>

<tr>

<td style='float: right;'>StartTime : </td>

<td>${data.StartTime.toString('yyyy-MM-dd HH:mm')}</td>

</tr>

<tr>

<td style='float: right;'>EndTime :</td>

<td>${data.EndTime.toString('yyyy-MM-dd HH:mm')}</td>

</tr>

</table>

</script>

In HTML

$('#container').FlexyGantt({

MovingInfoPopup: $("#MovingInfoPopup").html(),

ResizeInfoPopup: $("#ResizeInfoPopup").html()

});

In ASP.NET MVC

@Html.JQFlexyGantt(

new JQFlexyGanttSettings()

{

Options = new FlexyGanttOptions()

{

GanttChartOptions = new GanttChartOptions()

{

AnchorTime = DateTime.Today,

MovingInfoPopupID = "MovingInfoPopup",

ResizeInfoPopupID = "ResizeInfoPopup",

}

)

In ASP.NET

<RQ:FlexyGantt ID="gantt" AfterDataRetrievedCallback="AfterDataRetrievedCallback"

AfterGanttWidgetInitializedCallback="AfterGanttWidgetInitializedCallback"

ParentTaskEndTimeProperty="OverallEndTime"

ParentTaskStartTimeProperty="OverallStartTime"

TaskEndTimeProperty="EndTime"

MovingInfoPopupID="MovingInfoPopup"

ResizeInfoPopupID="ResizeInfoPopup"

TaskStartTimeProperty="StartTime"

HierarchyResolverFunction="ResolverFunction"

DataSourceUrl="../../DataSources/FGTaskListHandler.ashx"

LocalizationResourceFilePath="../../Src/ResourceStrings/"

Height="500" runat="server"

TaskItemTemplate="<div class='rq-gc-taskbar'></div>"

ProgressBarTemplate="<div class='rq-gc-progressbar'></div>"

ParentTaskItemTemplate="<div class='parentBar-style'><div class='rq-gc-parentBar-leftCue'></div><div class='rq-gc-parentBar-middle' ></div><div class='rq-gc-parentBar-rightCue'></div>"

This is illustrated in this samples:

In HTML : ..\Samples\TemplatizedTaskBar.htm.

In ASP.NET MVC : ..\Views\Home\ProjectGantt\TemplatizedTaskBar.cshtml.

In ASP.NET : ..\Samples\ProjectGantt\TemplatizedTaskBar.aspx.

Built-in MovingInfoPopup

Customized MovingInfoPopup