Change Expand Box Appearance in AngularJS TreeView

Created: 18 December 2015

When items in the TreeView directive for AngularJS have child items, an arrow icon is shown on the left side. This states that item with children can expand or collapse, by clicking on the expand box icon. The appearance of expand box icon is fully customizable, instead of using the default arrow icons, you can use any other icons.

In this article, we will show you how to replace the default icon set with custom expand box icons.

In above classes, by changing the background and size attributes, we can change the appearance of expand box. In our example, we need open, close and locked folder icons. These icons are already present in the icon set; we only need to change the position, so that correct icon is used when item is expanded or collapsed.

How to Lock an Item and Prevent it from Expanding or Collapsing

Locking an item is not possible by default, but we can easily add custom behavior to our TreeView so that specific item can appear and behave as it is locked. In addition, there is no locked state for the expand box, so we also need to change the appearance through code by setting a custom style.

Note By setting a custom style to items, you can modify their appearance through code, simply by stating a custom CSS class to specific part of the item.

In order for an item to appear as always collapsed (t.e. locked), we will handle the beforeExpand event and prevent the item from expanding. In our example, the Documents item is set as locked, so this item has its style set with custom CSS class for the expand box.

Conclusion

Changing the expand icon in AngularJS TreeView directive is simple. By changing the values of default CSS classes and modify the behavior of specific tree items, you can make TreeView to appear in a way that suits better within your application.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.