This project is read-only.

Using treeview for single item selection

Aug 28, 2013 at 1:33 PM
This should be simple, but I'm having issues. I'm using a treeview simply to allow users to select items from a hierarchical list. I followed the documentation and the treeview is displaying, but the nodes do not appear to be clickable.

I'm sure this is a matter of applying a proper style or something similar, but I can't seem to find any examples of the treeview use anywhere. Also, I can't find documentation on the client side event when a node is clicked.

I'm using MVC4 and Razor.

Thanks in advance for any assistance
Coordinator
Aug 29, 2013 at 4:39 PM
I dont Know what you mean for selecting. Applying a css class when a node is clicked is easy. However if you want to do something in the item, such as putting something into an hidden field, so the selection can be sent to the server, you have to locate, the hidden field in the item with a jquery .find (put some css class on the hidden to find it).

Now the easy part. In order to intercept the click event...just place a click handler in some div that contains the whole tree, since events are bubbled up you will intercept all clicks of the tree. The event data contains the original html node clicked. find the root of the item with a jquery .closest: place a css class in the root of each item, say "item-root", then a .closest('."item-root') from the origin of the click event gives you the item root....it .is not difficult just a couple lines of code.
Once you have the item root, you may apply css classes to it, so they look selected, and you may write infos into some input field contained in the item.

The binary with example file of the download contains a big page wit a simple treeview....it uses aspx...since the examples are old but it is easy to understand.
Doc on the tree is here: https://mvccontrolstoolkit.codeplex.com/wikipage?title=TreeView
Doc on the events triggered by the various controls are here: https://mvccontrolstoolkit.codeplex.com/wikipage?title=Client%20Side%20Handling%20of%20Items%20Controls

However the above are intrinsic treeview events, such as node moved, node deleted, node inserted and so on...all other standard javascript events can be captured by exploting event bubbling.
Aug 29, 2013 at 5:24 PM
I went ahead and added a method to bind a click event to set a selected class, but this is such a common use case that I thought it would have been built into the toolkit. I would have thought that binding action events for the different templates would also have been built in functionality, but you are quite right that the functionality is straightforward to add. I wouldn't want to roll my own solution for this if it is built in.

There were no examples of the treeview included in the toolkit, but I did find examples of the jquery treeview upon which it is based. Apparently this was never added as standard functionality.

I actually don't need to send the selections to the server, I just needed to execute an event to inject a partial view into the content area of the page. I bound the click event using my formatting classes.

I may need to switch to the jsTree anyway, since it doesn't appear that the asynchronous loading for the treeview was brought over to the toolkit from the original jquery treeview, but for the moment it is working the way I need it to.
Coordinator
Aug 31, 2013 at 1:05 PM
Edited Aug 31, 2013 at 1:07 PM
You may add nodes dynamically, based on content you receive from ajax using the MvcControlsToolkit_TreeView_AddNew function of the treeview client side api:
https://mvccontrolstoolkit.codeplex.com/wikipage?title=Client%20Side%20Handling%20of%20Items%20Controls
Things are more complex than in jstree because the treeview must keep updated adequate data sstructures that enable it to send all changes to the server. The TreeView is great for editing hierarchcal data, if you need a readonly treeview to be used as a hierarchical menu, I advice using the menuFor helper that renders a nested <ul><li> structure starting from an object hierarchy. Than you may enhance it either with CSS3 or with a jquery plugin to make hierarchical items appears and disappears. It comes with builder object that helps you to to build the object hierarchy. Ajax addition of subtree is easily performed by rendering the associated ul li hierarchy in a partial view and sending it to the client with an ajax call. Once the subtree reaches the client and is appended where needed you may apply the same jquery enhancememt to the new subtree.

I know there is some code to write and there is no out-of the box solution. However the code to write is quite straightforward: the main purpose of the Mvc Controls Toolkkit is to furnish all tools to build easily your customized helpers. It contains just "the hard part" and the basic controls. You are supposed to use them to write your mvc helpers by writing just a few lines of code. Also the client side api contains just the "hard part" and leave to standard jquery all simple manipukations.

If you need to boost your productivity with completely out-of-the-box controls you may consider purchasing the Data Moving Plug-in that offers completely out-of the box controls based on the Mvc Controls Toolkit. It comes also with a sophisticated styling framework compatible with both jquery UI and jquery mobile. Here there is a more sophisticated TreeView that comes with standard node templates that may be configured with a fluent interface. It comes with delayed rendering of closed nodes and ajax based delayed rendering. It handles a select event, has select buttons ...and more., It stores all data in a javascript viewmodel....you may update the tree by just manipulating the javascript viemodel...the UI updates immediately to reflect all changes.