Hiding the First-Level Checkboxes in the TreeView
Environment
Product | Progress® Kendo UI for Angular TreeView |
Description
How can I hide or remove the checkboxes in the first-level TreeView items?
Node Template-Based Solution
The nodeTemplateDirective
allows you to add custom HTML or CSS to each tree node. You can add the checkboxes only to the desired nodes conditionally by using the *ngIf
Angular directive.
The following example demonstrates how to add checkboxes to all but the top level nodes. The limitation of this approach is that the built-in features of a selectable TreeView will be lost and developers must manually handle the change
checkbox event and the checked
input property.
CSS-Based Solution
Hide the built-in checkboxes by using custom CSS that targets specific nodes.
The following example demonstrates how to hide the checkboxes in the top level nodes. This approach preserves the built-in features of the TreeView SelectDirective
.