Search code examples
javascripthtmltreeviewmicrosoft-metrotablet

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.

Solution

  • 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.