838237: show hide taskbar code added

ej2-asp-core-mvc/code-snippet/gantt/taskbar-show-hide/data.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+    ViewBag.DataSource = GanttData.ProjectNewData();
+    return View();
+}

ej2-asp-core-mvc/code-snippet/gantt/taskbar-show-hide/razor

@@ -0,0 +1,41 @@
+@model List<GanttSample.Controllers.GanttDataSource>
+
+<div class="switch-container">
+    <label for="switch" class="switch">Show/Hide Taskbar</label>
+    @Html.EJS().Switch("switch").Checked(false).Change("change").Render()
+</div>
+@(Html.EJS().Gantt("GanttContainer").DataSource((IEnumerable<object>)ViewBag.DataSource).TaskFields(ts => ts.Id(
+            "TaskId").Name("TaskName").StartDate("TaskStart").Duration("Duration").Progress("Progress").ParentID("ParentId")).QueryTaskbarInfo("queryTaskbarInfo").Render())
+
+<script>
+    function change(args) {
+        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
+        ganttObj.element.querySelectorAll('.e-gantt-parent-taskbar-inner-div').forEach((el) => {
+            if (args.checked) {
+                el.classList.remove('hidden-taskbar');
+            } else {
+                el.classList.add('hidden-taskbar');
+            }
+        });
+    }
+    function queryTaskbarInfo(args) {
+        if (args.data.hasChildRecords) {
+            args.taskbarElement.children[1].classList.add('hidden-taskbar');
+        }
+    }
+</script>
+<style>
+    .switch-container {
+        display: flex;
+        align-items: center;
+        padding: 10px 0px 10px 0px;
+    }
+
+    .switch {
+        margin-left: 10px;
+    }
+
+    .e-gantt .hidden-taskbar {
+        visibility: hidden !important;
+    }
+</style>

ej2-asp-core-mvc/code-snippet/gantt/taskbar-show-hide/tagHelper

@@ -0,0 +1,42 @@
+<div class="switch-container">
+    <label for="switch" class="switch">Show/Hide Taskbar</label>
+    <ejs-switch id="switch" checked="false" change="Change"></ejs-switch>
+</div>
+
+<ejs-gantt id='GanttContainer' dataSource="ViewBag.DataSource" height="450px" queryTaskbarInfo="queryTaskbarInfo">
+    <e-gantt-taskfields id="TaskId" name="TaskName" startDate="StartDate" endDate="EndDate" duration="Duration" progress="Progress" parentID="ParentId">
+    </e-gantt-taskfields>
+</ejs-gantt>
+
+<script>
+    function change(args) {
+        var ganttObj = document.getElementById("GanttContainer").ej2_instances[0];
+        ganttObj.element.querySelectorAll('.e-gantt-parent-taskbar-inner-div').forEach((el) => {
+            if (args.checked) {
+                el.classList.remove('hidden-taskbar');
+            } else {
+                el.classList.add('hidden-taskbar');
+            }
+        });
+    }
+    function queryTaskbarInfo(args) {
+        if (args.data.hasChildRecords) {
+            args.taskbarElement.children[1].classList.add('hidden-taskbar');
+        }
+    }
+</script>
+<style>
+    .switch-container {
+        display: flex;
+        align-items: center;
+        padding: 10px 0px 10px 0px;
+    }
+
+    .switch {
+        margin-left: 10px;
+    }
+
+    .e-gantt .hidden-taskbar {
+        visibility: hidden !important;
+    }
+</style>

ej2-asp-core-mvc/gantt/taskbar.md

@@ -137,6 +137,37 @@ You can change the gripper icon in the taskbar by applying styles to their respe
 
 ![Change Gripper Icon in Taskbar](images/change-gripper-icon.png)
 
+### Dynamically Showing or Hiding Taskbars
+
+In a Gantt chart, taskbars are typically displayed by default to represent task information. However, in some scenarios, it may be necessary to dynamically show or hide specific taskbars based on custom conditions.
+
+During the initial render, taskbar visibility can be controlled using the [`queryTaskbarInfo`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.gantt.gantt.html#Syncfusion_EJ2_Gantt_Gantt_PdfQueryTaskbarInfo) event. Within this event, you can apply custom CSS classes to hide certain taskbars—for example, hiding only parent taskbars based on specific logic.
+
+After the Gantt chart has been rendered, taskbar visibility can also be updated dynamically. For example, you can use a toggle button to show or hide taskbars by updating the Gantt chart instance and modifying the relevant taskbar elements.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/gantt/taskbar-show-hide/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="data.cs" %}
+{% include code-snippet/gantt/taskbar-show-hide/data.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/gantt/taskbar-show-hide/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="data.cs" %}
+{% include code-snippet/gantt/taskbar-show-hide/data.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
+
 ## Multi Taskbar support in project view
 
 The Gantt component, supports rendering multi-taskbars in the project view. With this feature the parent taskbar, when it is collapsed, visually summarize the progress of all its child taskbars.