From dd4060249efffe49c3c52b48a869cbdd1943286b Mon Sep 17 00:00:00 2001
From: KB Bot <kb-bot@telerik.com>
Date: Wed, 13 Aug 2025 13:37:12 +0000
Subject: [PATCH] Added new kb article gantt-collapsing-nodes

---
 knowledge-base/gantt-collapsing-nodes.md | 65 ++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 knowledge-base/gantt-collapsing-nodes.md

diff --git a/knowledge-base/gantt-collapsing-nodes.md b/knowledge-base/gantt-collapsing-nodes.md
new file mode 100644
index 000000000..9b8219481
--- /dev/null
+++ b/knowledge-base/gantt-collapsing-nodes.md
@@ -0,0 +1,65 @@
+---
+title: Collapsing Gantt Nodes in UI for ASP.NET AJAX
+description: Learn how to collapse nodes in the Gantt component in UI for ASP.NET AJAX using client-side methods.
+type: how-to
+page_title: How to Collapse Gantt Nodes in UI for ASP.NET AJAX
+meta_title: How to Collapse Gantt Nodes in UI for ASP.NET AJAX
+slug: gantt-collapsing-nodes
+tags: aspnet-ajax,gantt,client-side,collapse-nodes
+res_type: kb
+ticketid: 1695987
+---
+
+## Environment
+
+<table>
+<tbody>
+<tr>
+<td>Product</td>
+<td>UI for ASP.NET AJAX Gantt</td>
+</tr>
+<tr>
+<td>Version</td>
+<td>All</td>
+</tr>
+</tbody>
+</table>
+
+## Description
+
+I want to collapse all nodes in the [Gantt](https://docs.telerik.com/devtools/aspnet-ajax/controls/gantt/overview) component for UI for ASP.NET AJAX using a button. The provided client-side code does not work, and there are no JavaScript errors. I need to know the correct approach for accomplishing this functionality.
+
+This knowledge base article also answers the following questions:
+- How to collapse Gantt nodes using client-side methods?
+
+## Solution
+
+The UI for ASP.NET AJAX Gantt does not provide a public client-side API for directly collapsing or expanding tasks. However, you can use the following workaround to achieve this functionality.
+
+````ASP.NET
+<telerik:RadButton ID="btnCollapseNodes" runat="server" Text="Collapse Nodes" AutoPostBack="false" OnClientClicked="onClientClicked" />
+````
+
+The provided JavaScript function references private properties, which is not recommended. Use the public API instead:
+
+````JavaScript
+function onClientClicked(sender, args) {
+    let gantt = $find("<%= RadGantt1.ClientID %>"); // Replace RadGantt1 with your Gantt's ClientID
+    let tasks = gantt.get_tasks(); // Get all tasks in the Gantt
+
+    for (let i = 0; i < tasks.get_count(); i++) {
+        let task = tasks.getTask(i);
+
+        if (task._data.hasChildren) { // Check if the task has child nodes
+            task.set_expanded(false); // Set the expanded state to false
+        }
+    }
+
+    gantt.repaint(); // Refresh the Gantt to reflect the changes
+}
+````
+
+## See Also
+
+- [UI for ASP.NET AJAX Gantt Overview](https://docs.telerik.com/devtools/aspnet-ajax/controls/gantt/overview)
+- [RadButton Documentation](https://docs.telerik.com/devtools/aspnet-ajax/controls/button/overview)