Angular treeview directive 0.5v (ui.treeview 0.5v).

Hi,

With this post, the new treeview directive version changes(ui.treeview.js v0.5) will be explained. The new plugin can be downloaded from this link.

The first and foremost change is in the implementation of search functionality of the treeview.

I noticed that using the default angular's filter is not suitable for the control like treeview. Hence with this release there's new custom filter in place which will be upgraded in coming versions.

Here's list of options and their usage description of this version.

Attributes	DataType	Description
treeview-data (Required)	Array (Binding)	bind the data variable from your controller for which you wish to display treeview.
unique-id (Optional)	String	optional attribute for now. Bind the attribute which is unique for the node.
display-attr (Required)	String	bind the attribute of the data which has to be displayed at each node.
data-check (Optional)	boolean	Attribute to specify whether to display check box for the nodes or not. Default is false.
data-check-rec (Optional)	boolean	Attribute to specify whether to select all children nodes on selection of a single node. Default is true.
expand-all (Optional)	boolean	Attribute to specify whether the tree should be expanded or not. Default is collapse
searchModel (Optional)	String (Binding)	Attribute for searching tree.

Check out the plugin and please leave your comments for improving this.

Happy Coding.

Angular treeview directive 0.1v

Hi,

UPDATE: The latest plugin is in this blog.

In continuation to my previous blog here, I am releasing new version of the treeview directive.

You can download the plugin from this link.

This version supports searching and has place for checking nodes.

For searching you have to bind a model which has search text in the current scope to the attribute search-model of treeview directive, as shown below.

<input type="text" width="50px" ng-model="searchText" placeholder="Search products"/>
<treeview style="width: 300px;" search-model="searchText" treeview-data="productData" unique-id="id" display-attr="Name">
</treeview>

The same model can be bound to some other control also, for example input text control. In this way when there's any update to the model the tree nodes will be sought and displayed.

Tri-state support, retrieving checked nodes, user template etc. will be following in next blog posts.

Happy Coding.