Treeview directive for Angular

HI,

UPDATE: The latest plugin is in this blog.

Here's a treeview directive developed for and with angular framework. I am releasing beta version in this blog, which has just treeview control display feature.

You can download the treeview.js from this link angular treeview download. The plugin is compatible with angular1.0.5. It also has a css file to be included along with the plugin in your html pages.

So here's how you can start using this directive.

1. Download the plugin and include ui.treeview.min.js and treeview.css files in your html page.
2. You have to inject 'ui.treeview' in your application module.

   angular.module("demo", ['ui.treeview']);

3. The model which contains data to be displayed should be bound to "treeview-data" attribute of the directive.

   Sample directive code looks like this.

   <treeview treeview-data="productData" unique-id="id" display-attr="Name"></treeview>
   

As of now 3 attributes are present.

• treeview-data: bind the data variable from your controller for which you wish to display treeview.
• unique-id: optional attribute for now. Bind the attribute which is unique for the node.
• display-attr: bind the attribute of the data which has to be displayed at each node.

Look forward for these features in future releases

• check box option at nodes
• Searching
• Tri state implementation
• Allowing user templates
• and more...

Happy Coding.

Google chrome frame for old browers

Google has released a plugin for all old browsers to be able to render HTML 5 pages.

Check out the usage of plugin here

Its obviously a boon for HTML 5 developers, who are plucking their hair to support the HTML 5 web application in old browsers for various reasons.

There's one thing to be taken care by developer while using google chrome frame. Thats resetting of sessionStorage value on navigation.

So instead of sessionStorage you might have to use localStorage or cookie for client side data storage.

Happy coding