From 92aadf0457e2d3f5b40cc4f2d2b13f4a53c1d5e9 Mon Sep 17 00:00:00 2001
From: mp9007 <38858370+mp9007@users.noreply.github.com>
Date: Tue, 25 Jan 2022 09:55:35 -0500
Subject: [PATCH] Update grid-conditional-expand-button.md

Setting the CSS class "no-children" was inverted.

I was having a "null" issue because the row didn't have childs. The error was style showing if I clicked on the cell after hidding the expand icon.
To fix this, I added a CSS class to set the visibility of the .k-hierarchy-cell to "hidden" so the click is not triggered when clicking in the cell.
---
 knowledge-base/grid-conditional-expand-button.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/knowledge-base/grid-conditional-expand-button.md b/knowledge-base/grid-conditional-expand-button.md
index 80cad8887b..8111702c62 100644
--- a/knowledge-base/grid-conditional-expand-button.md
+++ b/knowledge-base/grid-conditional-expand-button.md
@@ -31,6 +31,7 @@ I would like the expand to only be visible when it has further data to expand.
 Use the [`OnRowRender` event]({%slug grid-events%}#onrowrender) to evaluate the current row item (for example, whether it has child items in a collection or some other flag your application has). 
 
 Then, if you want to hide the expand icon, set a CSS class to the row that will hide the button in the expand cell.
+You should also set the visibility of the td to hidden, so the click event is not triggered when clicking in the td.
 
 >caption Hide the expand button conditionally per row
 
@@ -43,9 +44,15 @@ Then, if you want to hide the expand icon, set a CSS class to the row that will
         conditionally hide hierarchy expand buttons.
         You may want to add this to your site-wide stylesheet.
     */
+    /* Hide the expand icon. */
     .k-grid tr.no-children td.k-hierarchy-cell * {
         display: none;
     }
+
+    /* Set the visibility of .k-hierarchy-cell to hidden, so the click is not trigger when clicking in the td. */
+    .k-grid tr.no-children td.k-hierarchy-cell {
+        visibility: hidden;
+    }
 </style>
 
 <TelerikGrid Data="@salesTeamMembers" OnRowRender="@OnRowRenderHandler">
@@ -73,7 +80,7 @@ Then, if you want to hide the expand icon, set a CSS class to the row that will
         MainModel item = args.Item as MainModel;
 
         bool hasNoHierarchy = item.Orders == null || item.Orders.Count == 0;
-        args.Class = hasNoHierarchy ? "" : "no-children";
+        args.Class = hasNoHierarchy ? "no-children" : "";
     }
 
     // sample data generation follows