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.

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