What is dynatree?
- Lazy loading using Ajax
- Checkboxes for selections
- State persistence with cookies
- Context menu
- Copy/paste of nodes
I had to create a tree widget using Archetypes. I’ve done some research and selected Dynatree as the best solution for me. It had all the features and used jQuery. But then I’ve discovered that checkboxes are not real checkboxes. They are just images that are manipulated by changing CSS using jQuery. That was a small surprise because I had to send a selection in a form and save it. But there was no real input fields.
Check example of dynatree with checkboxes straight away or read more information below.
DIY – do it yourself
Example presented here shows general use case. It has nothing to do with Plone and Archetypes. Maybe this is a subject for next article.
This one is easy. I’ve added fields with a prepared id attribute that contains node id and a prefix.
Above there is a snippet of jQuery code that does all the tricks. First we’ve defined 4 parameters for our dynatree. Please refer to Dynatree documentation for more explanation. Secondly we’ve added 2 events: onSelect makes sure that real checkboxes (hidden) are checked and unchecked together with their image counterparts; onExpand goes around a problem with showing up hidden checkboxes when node is collapsed or expanded. Then we’ve dynamically assigned CSS class to hide checkboxes. Lastly we’ve added code that initializes checkboxes when the page is loaded again and state is read from cookie.
Check here for example of dynatree with checkboxes that can be send in a form. View underlying HTML to see above code in context.
If you want to know more about amazing jQuery see the latest books:
Alternative way to pass checkbox value in DynaTree
I have done this like below, just get list of selected nodes and pass in hidden field comma separated values:
var selectedNodes = $(“#tree”).dynatree(“getTree”).getSelectedNodes();