Disable or Prevent Expand/Collapse of TreeView Items

By default, all items in IntegralUI TreeView component are expandable and collapsible. Although you can initially set, which items are expanded, in some cases you may need to disable expanding or collapsing of specific items.

>A sample code that shows how to prevent expand and collapse of items in TreeView is available in JavaScript, Angular, React and Vue, in following sections below.

In this example, the item 'Documents' is locked. For visual representation, the expand box is changed to opened and closed folder icon for expanded and collapsed items. In addition, the expand box of locked item has a folder with a lock icon.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Disable Expanding or Collapsing in TreeView

Initially, if a value to the expanded field of item object is not specified, it is presumed that the item is expanded. If you want to set some items as collapsed when TreeView is populated for the first time, just set the item object expanded value to false.

• JavaScript
• Angular
• React
• Vue

Now, when there is some data into the TreeView, to prevent or disable some item from expanding, you need to handle the beforeExpand event, set a condition and cancel the event. In this case, item object uses a custom field named 'locked' to store information whether item is locked or not from any changes to expand/collapse state. For example:

• JavaScript
• Angular
• React
• Vue

In similar way, to prevent or lock some item from collapsing, you need to handle the beforeCollapse event, set a condition and cancel the event.

As visual representation, to distinguish items that have expand or collapse disabled, a lock icon is used. You can position this icon anywhere within the item space; it is customizable within the item template. For this example, the lock icon is set actually to the expand box, using an inline style set in the item object:

• JavaScript
• Angular
• React
• Vue

The expand box icon for other items is also changed through CSS, using a custom style that is applied to the customStyle property of the TreeView.

Conclusion

You can disable or prevent items from expanding or collapsing in TreeView, by handling an event that is fired before the expand or collapse process takes action. In your event handler, you only need to set a condition which when met will cancel the process.

TreeView is a native Web Component, part of IntegralUI Web that you can use in Angular, React, Vue and any other JavaScript framework.