From 4bc35d123dcaf55f6c7c2be81a8374c1986184bc Mon Sep 17 00:00:00 2001 From: AjithkumarGopalakrishnan Date: Wed, 8 Oct 2025 16:54:51 +0530 Subject: [PATCH] 827533: Baseline tooltip disable code updated --- .../baselineTootipHide/baselineTootipHide.cs | 105 ++++++++++++++++++ .../gantt/tooltip/baselineTootipHide/razor | 12 ++ .../tooltip/baselineTootipHide/tagHelper | 14 +++ ej2-asp-core-mvc/gantt/taskbar.md | 47 +++++++- 4 files changed, 176 insertions(+), 2 deletions(-) create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/razor create mode 100644 ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/tagHelper diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs new file mode 100644 index 0000000000..2ebf448f59 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs @@ -0,0 +1,105 @@ +public IActionResult Index() +{ + ViewBag.DataSource = ganttData(); + return View(); + +} + +public static List ganttData() +{ + List GanttDataSourceCollection = new List(); + + GanttDataSource Record1 = new GanttDataSource() + { + TaskId = 1, + TaskName = "Project initiation", + StartDate = new DateTime(2019, 04, 02), + EndDate = new DateTime(2019, 04, 21), + }; + GanttDataSource Record2 = new GanttDataSource() + { + TaskId = 2, + TaskName = "Identify site location", + StartDate = new DateTime(2019, 04, 02), + BaselineStartDate = new DateTime(2019, 04, 02), + BaselineEndDate = new DateTime(2019, 04, 02), + Duration = 0, + Progress = 70, + ParentId = 1 + }; + GanttDataSource Record3 = new GanttDataSource() + { + TaskId = 3, + TaskName = "Perform soil test", + StartDate = new DateTime(2019, 04, 02), + BaselineStartDate = new DateTime(2019, 04, 04), + BaselineEndDate = new DateTime(2019, 04, 09), + Duration = 8, + Progress = 50 + ParentId = 1 + }; + GanttDataSource Record4 = new GanttDataSource() + { + TaskId = 4, + TaskName = "Soil test approval", + StartDate = new DateTime(2019, 04, 02), + BaselineStartDate = new DateTime(2019, 04, 08), + BaselineEndDate = new DateTime(2019, 04, 12), + Duration = 4, + Progress = 50, + ParentId = 1 + }; + + GanttDataSource Record5 = new GanttDataSource() + { + TaskId = 5, + TaskName = "Project estimation", + StartDate = new DateTime(2019, 04, 02), + EndDate = new DateTime(2019, 04, 21), + }; + GanttDataSource Record6 = new GanttDataSource() + { + TaskId = 6, + TaskName = "Develop floor plan for estimation", + StartDate = new DateTime(2019, 04, 04), + BaselineStartDate = new DateTime(2019, 04, 08), + BaselineEndDate = new DateTime(2019, 04, 12), + Duration = 4, + Progress = 70, + ParentId = 5 + }; + GanttDataSource Record7 = new GanttDataSource() + { + TaskId = 7, + TaskName = "List materials", + StartDate = new DateTime(2019, 04, 04), + BaselineStartDate = new DateTime(2019, 04, 02), + BaselineEndDate = new DateTime(2019, 04, 02), + Duration = 0, + Progress = 50, + ParentId = 5 + }; + + GanttDataSourceCollection.Add(Record1); + GanttDataSourceCollection.Add(Record2); + GanttDataSourceCollection.Add(Record3); + GanttDataSourceCollection.Add(Record4); + GanttDataSourceCollection.Add(Record5); + GanttDataSourceCollection.Add(Record6); + GanttDataSourceCollection.Add(Record7); + + return GanttDataSourceCollection; +} + +public class GanttDataSource +{ + public int TaskId { get; set; } + public string TaskName { get; set; } + public DateTime StartDate { get; set; } + public DateTime EndDate { get; set; } + public int? Duration { get; set; } + public DateTime? BaselineStartDate { get; set; } + public DateTime? BaselineEndDate { get; set; } + public int Progress { get; set; } + public int? ParentId { get; set; } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/razor b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/razor new file mode 100644 index 0000000000..9d045884e5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/razor @@ -0,0 +1,12 @@ + +@Html.EJS().Gantt("Gantt").DataSource((IEnumerable)ViewBag.DataSource).RenderBaseline( + true).Height("450px").TaskFields(ts => ts.Id("TaskId").Name("TaskName").StartDate("StartDate").BaselineStartDate( + "BaselineStartDate").Duration("Duration").BaselineEndDate("BaselineEndDate").Progress("Progress").ParentId("ParentId")).BeforeTooltipRender("BeforeTooltipRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/tagHelper new file mode 100644 index 0000000000..f3cd9db7af --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/gantt/tooltip/baselineTootipHide/tagHelper @@ -0,0 +1,14 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/gantt/taskbar.md b/ej2-asp-core-mvc/gantt/taskbar.md index 4e31f0609b..44e16da952 100644 --- a/ej2-asp-core-mvc/gantt/taskbar.md +++ b/ej2-asp-core-mvc/gantt/taskbar.md @@ -317,12 +317,55 @@ A baseline tooltip can be customized using the [`TooltipSettings.Baseline`](http {% endtabs %} {% endif %} - - The following screenshot shows the template for baseline in Gantt. ![Alt text](images/baselineTemplate.png) +#### Preventing Baseline Tooltip Display + +In the Gantt chart, baseline tooltips are automatically displayed when hovering over baseline bars. In certain scenarios, it may be necessary to conditionally control the visibility of these tooltips. +This can be achieved using the [`beforeTooltipRender`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.gantt.gantt.html#Syncfusion_EJ2_Gantt_Gantt_BeforeTooltipRender) event, which allows customization of tooltip behavior before it is rendered. + +##### Using the beforeTooltipRender Event + +The `beforeTooltipRender` event is triggered when hovering over chart elements, including baseline bars. By checking the class of the target element, tooltip rendering can be canceled based on specific conditions. + +```javascript +function beforeTooltipRender(args) +{ + if (args.args.target.classList.contains("e-baseline-bar")) + { + args.cancel = true; + } +} + +``` + +In this example, tooltip rendering is prevented for baseline bars by setting `args.cancel` to `true`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/gantt/tooltip/baselineTootipHide/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="baselineTootipHide.cs" %} +{% include code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/gantt/tooltip/baselineTootipHide/razor %} +{% endhighlight %} +{% highlight c# tabtitle="baselineTootipHide.cs" %} +{% include code-snippet/gantt/tooltip/baselineTootipHide/baselineTootipHide.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + ### Connector line tooltip The default connector line tooltip in the Gantt control can be customized using the [`TooltipSettings.ConnectorLine`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTooltipSettings.html#Syncfusion_EJ2_Gantt_GanttTooltipSettings_ConnectorLine) property. You can map the value to this property as template script element ID or template string format. The following code example shows how to use the [`TooltipSettings.ConnectorLine`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Gantt.GanttTooltipSettings.html#Syncfusion_EJ2_Gantt_GanttTooltipSettings_ConnectorLine) property.