Multi Select Tree Demo Page

Moved to GitHub

This is a BETA update for my almost finished implementation of a multiselect tree with working drag and drop. As far as I can tell it's nearly feature complete and overwrites all current functionality that relies on selection or dragdata containing only a single node.

This page uses ExtJS 3.2.0 Please post bug reports here.

The source is available here.

Table of Contents


1. Add the following CSS to make the floating "drag" version of the tree indent prettily..

.x-dd-drag-ghost .x-tree-node-indent,.x-dd-drag-ghost .x-tree-ec-icon {display: inline !important;}

2. Instantiate like a normal tree

var tree = new Ext.ux.MultiSelectTreePanel({ autoScroll:true, width:400, height:500, animate:true, containerScroll: true, renderTo: 'target', ddGroup: 'tree1', enableDD: true, /* Required for Drag and Drop as of MultiSelectTree v1.1 */ root: new Ext.tree.AsyncTreeNode({ text: 'A Book', draggable:false, id:'node0' }), loader: new Ext.tree.TreeLoader({ dataUrl:'bookdata.json' }) });


Known Issues:


v1.0 Initial release (Original Demo Page)

v1.1 Improved Version (Demo Page)

To upgrade to v1.1 simply use MultiSelectTree-1.1.js and make sure you include enableDD, enableDrag or enableDrop for Drag and Drop.

v1.2 - beta Beta release (Demo Page)

Instructions for Drag and Drop

Ctrl-Click to multi select (or equivalent combination)
Shift-Click to range select (tested on Safari 3.1+, Opera 9.5+, Firefox 3, MSIE6+, Chrome


A multi-select drag and drop tree instrumented for rearranging a document structure. Source: example1.js

A multi-select drag and drop tree instrumented for rearranging a sorted append-only group structure. Source: example2.js

The Multiple Trees example very much like with working Multi Select Drag and Drop. (and allowContainerDrop) Source: example3.js

Example of mixing a MultiSelect tree and Default Ext Tree together. Source: example4.js

The Column Tree Example from modified that extends MultiSelectTreePanel.

By default ColumnNodeUI doesn't support drag and drop from anything other than the tree node text or the tree node icon (or empty column cells) this is because the example doesn't override getDDHandles() in TreeNodeUI to include all the possible drag handles in the row. See the modified ColumnNodeUI.js for the working code.

This is just an example, it's not supposed to make sense where nodes can be dropped and it looks funny for me in IE6. Source: example5.js


AllowContainerDrop now works. This was fixed in ExtJS 3.0 This is a working demo, just drag nodes below the bottom of the tree to see how it works. Source code here

MultiSelectTree v1.1 already includes code for appending container drop nodes to the root node.