HTML/JS tree view in metro-style

I am using classical tree view on my site. For mobile I've used other special designed version. My site showed the mobile version for tabled devices to the current moment, but from now on I am going to show desktop version on tablet devices. Everything is OK, except the classical tree view - Expand/Collapse signs are to small and difficult to pick.

Could anybody suggest a tree view that is well designed for tablet devices too? I think about something in metro style, but I can't find good implementations or concepts.

Answers:

Answer

Ok. If nobody knows how to solve it, let me explain what have I done for this.

Looks like that there no solution for this. I took visual appearance of my html/js tree view. Took off behind js code and "+"/"-" sings. And add simple behavior.

  • When I click on closed tree view item - it is opened and details appropriate filtered
  • When I click on open tree view item - nothing happens. So I can't close opened item by click on it.
  • When I click on the header (title - place where I described what kind of items I have) - opened item is closed.

So I simplify current tree view (mix open/close and filtering actions). It doesn't looks stupid on Desktop and in the same time is useful on Tab devices.

PS: I have used knockoutjs for filtering.

Answer

This is late, but might still be useful for anyone finding this question.

I needed to port my VB.net app that used the VB.Net Treeview Control to produce an HTML/JS version with the same functionality. I'm still working on this project, but the Treeview conversion was solved a year ago by using a Jquery plugin named zTree. I made it compatible with touch screens as well as mouse events, and it works well for me. Here are links to relevant sites:

VB.Net Treeview Control: http://www.codeguru.com/columns/vb/working-with-the-treeview-control-in-vb.net.htm

zTree: http://www.ztree.me/v3/demo.php#_101

My old VB Treeview app: http://www.retirementforecaster.com

My new HTML/JS Treeview app (still early beta): http://www.moneyplan.link

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.