Tuesday, July 2, 2013

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.

4 comments:

  1. Excellent work. Thanks for sharing. To expand on this idea I really think what's needed for Angular is way to show a tree view with many fields which is combinig a treeview with a grid. Perhaps a plugin to ng-grid.
    (see:
    http://mleibman.github.io/SlickGrid/examples/example5-collapsing.html
    or the commercial product
    http://www.coqsoft.com/treegrid/www/)


    ReplyDelete
  2. Thank you John for the feedback. Plugin for ng-grid surely seems feasible. I will surely work towards that.

    ReplyDelete
  3. Hi Kavitha, you should set up a repo, or at the very least a gist on GitHub to make it easier for people to see and contribute to making it better.

    ReplyDelete
    Replies
    1. Sure, I do have plans to setup GitHub repo.

      Delete