Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Build an XML-based Tree Control with JavaScript

Tree controls provide a hierarchical view of data and XML provides a way to structure data hierarchically, so viewing XML data as a tree structure is a natural fit. But browsers don't provide a tree control. Instead, use this mix of XML, XSLT, JavaScript, and CSS to produce an extensible HTML tree control.


advertisement


fter writing the Build an Object-Oriented Tree Control Using JavaScript article, it occurred to me that using XML as the data source for the tree would be a natural fit. I wanted to create a solution that was both maintainable and extensible. That is, I wanted to create an automated system whereby any XML document that adhered to a given grammar would easily become an HTML tree control. Essentially, I wanted to be able to view the XML document in a browser and have the browser render it as a tree similar to the TreeView control in Windows Explorer. Further, the same control should work in both Internet Explorer 6 (IE) and Netscape/Mozilla (N7).
Tree controls provide a hierarchical view of data and XML provides a way to structure data hierarchically, so it would seem that viewing XML data as a tree structure would be a natural fit. The problem is, how can you build an HTML tree control that uses XML for its data model?


The solution is to brew a mix of XML, XSLT, JavaScript, and CSS to produce an extensible HTML tree control.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap