In a jstree hierarchy of N depth, how do we limit jstree mobile display to show maximum of 1-expansion-level-at-a-time (to achieve Gdrive-like node (folder) navigation)?

[peternoges]

Problem Statement; I would like hierarchy-browsing within jstree (mobile) to behave more like Google Drive, Box, or Dropbox's folder/subfolder navigation. Specifically, on small screens I am unhappy with JSTREE MOBILE display because I don't have room on mobile screens to show indented child nodes (jstree's expanded nodes).

Therefore I am exploring how best to tell jstree to limit its mobile display to a "maximum of 1-hierarchy-level-at-a-time when on mobile". Rather than navigating mobile hierarchies through expansion/collapse, I'd like to customize mobile jstree navigation so that it behaves closer to Google Drive folder navigation (goal is to ensure that mobile users see a max. of 1 level at a time).

To me this would require customizing/replacing jstree mobile "expand" with alternative means for navigating jstree hierarchies -- such as a custom ctx menu action for "drilling 1 level into a parent to see a new tree consisting of ONLY its (flat) immediate children beneath it", and custom navigation breadcrumbs that help a mobile user go from viewing a child-level to viewing nodes 1 level higher.

Design Thoughts for solving the problem

• How do I disable jstree's mobile expansion action, and replace it with a custom function?

• I already have a custom function that "loads a new tree from the server, using the parent's immediate children as the new top-level(s)". This custom function let's users navigate between jstree levels without having to "expand" child levels beneath parent levels, but I'm unsure how to replace jstree mobile's expansion action with my custom function.

• Technically, my custom function is a double-click listener on jstree nodes that overloads jstree's loadNodes function by sending it the double-clicked nodeId for retrieving new tree data (puts the immediate children(s) of the double-clicked node as the new top-level in the resulting tree.) -- this intentionally removes the need for jstree mobile users to expand children.

Thanks community! Please let me know if anything is unclear.

jstree/3.3.5/jstree.min.js cc @vakata any guidance or cc's is much appreciated.

[vakata]

I can not think of a clean and fast way to achieve this.

I would either: 1) Recreate the tree on every expand (but you'd have to detect mobile devices). Or: 2) Have a normal tree for desktop and a limited custom component for mobile.