Category / Section
How to create a Custom ToolTipTemplate in Gantt?
1 min read
In Gantt, tooltip can be customized using the taskbarTooltipTemplateId or taskbarTooltipTemplate API. For taskbarTooltipTemplateId API, the id of the JS Render Template script must be provided, and for taskbarTooltipTemplate the JS Render Template script element must be provided.
The following code example explains how you can create a custom tooltip template using taskbarTooltipTemplateId API.
ASPX
<ej:Gantt ID="Gantt1" runat="server” TaskbarTooltipTemplateId="customtooltip”>
</ej:Gantt>
<script id=”customtooltip” type=”text/x-jsrender”>
<table>
<tbody>
<tr>
<td> Build Stage : </td>
<td> { { : ~_stagename()} } </td>
</tr>
</table>
</tbody>
</script>
<script type=”text/javascript”>
$.views.helpers({_stageName: getStageName });
function getStageName() {
return this.data.item["BuildStage"] ;
}
</script>
[ASPX.CS]
protected void Page_Load(object sender, EventArgs e){
List<DefaultData> list = new List<DefaultData>();
list.add(new DefaultData()
{
StartDate=”27/5/2014”, Id=1, Name=”House 1”, BuildStage=”Floor Down”, Duration=98,
PercentDone=98, Children:null, Predescessor=null
} );
list.add(new DefaultData()
{
StartDate=”4/6/2014”, Id=2, Name=”House 2”, BuildStage=”Floor Down”, Duration=84,
PercentDone=0, Children:null, Predescessor=null
} );
this.Gantt1.DataSource=list;
this.Gantt1.DataBind();
}
The following code example explains how to create a Custom ToolTip Template using taskbarTooltipTemplate API.
ASPX
<ej:Gantt ID="Gantt" runat="server”
TaskbarTooltipTemplate="<table><tbody><tr><td>BuildStage :</td><td>{{:~_stageName()}}</td> </tr></tbody></table>” >
</ej:Gantt>
<script type=”text/javascript”>
$.views.helpers({_stageName: getStageName });
function getStageName() {
return this.data.item["BuildStage"] ;
}
</script>
[ASPX.CS]
protected void Page_Load(object sender, EventArgs e){
List<DefaultData> list = new List<DefaultData>();
list.add(new DefaultData()
{
StartDate=”27/5/2014”, Id=1, Name=”House 1”, BuildStage=”Floor Down”, Duration=98,
PercentDone=98, Children:null, Predescessor=null
} );
list.add(new DefaultData()
{
StartDate=”4/6/2014”, Id=2, Name=”House 2”, BuildStage=”Floor Down”, Duration=84,
PercentDone=0, Children:null, Predescessor=null
} );
this.Gantt.DataSource=list;
this.Gantt.DataBind();
}
