New to Kendo UI for AngularStart a free 30-day trial

Hiding the First-Level Checkboxes in the TreeView

Environment

ProductProgress® 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.

Change Theme
Theme
Loading ...

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.

Change Theme
Theme
Loading ...