Category / Section
How to create a Custom ToolTip Template 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.
CSHTML
@(Html.EJ().Gantt("gantt")
// ...
.TaskbarTooltipTempateId(“customtooltip”)
// ...
)
<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>
[CS]
public ActionResult Index()
{
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
} );
ViewBag.datasource = list;
return View();
}
The following code example explains how to create a Custom ToolTip Template using taskbarTooltipTemplate API.
CSHTML
@(Html.EJ().Gantt("gantt")
// ...
.TaskbarTooltipTempate(“<table><tbody><tr><td>BuildStage :</td><td>{{:~_stageName()}}</td> </tr></tbody></table>”)
// ...
)
<script type=”text/javascript”>
$.views.helpers({_stageName: getStageName });
function getStageName() {
return this.data.item["BuildStage"] ;
}
</script>
[CS]
public ActionResult Index()
{
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
} );
ViewBag.datasource = list;
return View();
}