To execute the example, in the HEAD tag add links to component library PP.js and visual style tables PP.css. Add a DIV element with the "container" identifier in the BODY tag. Add an image containing a list of node icons.
Connect the script that generates random nodes:
<script src="genJson.js" type="text/javascript"></script>
Add the following code to the <script> tag:
// Determine drag events var onNodeDrag = function (s, a) { // Disable adding new children to leaves var targetIsFolder = treelist.getNodeChildrenCount(a.TargetNode) > 0, draggableIsFolder = treelist.getNodeChildrenCount(a.Nodes[0]) > 0; if (!targetIsFolder) a.CanTakeChildren = false; };
var onNodeDragEnd = function (s, a) { // Output drag result to console
console.log(a); };
var onNodeDragStart = function (s, a) { // Disable dragging of last child var dragNode = a.Nodes[0], dragNodeParent = t.getNodeParent(dragNode); if (dragNodeParent && t.getNodeChildrenCount(dragNodeParent) == 1) a.Cancel = true; // cancel operation in order the node remains as a folder, that is, it has children }; // -------------------- // Create a tree var json = genJson(500, 100, false, 1234567); // Node generation function var t, Tree; t = Tree = new PP.Ui.SimpleTreeList({ DataObject: json, DataMappers: {
Key: 'k', Index: 'i', Parent: 'p', Content: new PP.PropertyMapper({ Getter: function (item) { return item.a.it }, Setter: function (item, value) { item.a.it = value; } }), Selected: 's', Expanded: 'e', ImageIndex: new PP.PropertyMapper({ Getter: function (item) { return this.getNodeChildrenCount(item.k) ? (item.e ? 1 : 0) : 2 }, Context: t }),
}, ImageList: imageList = new PP.ImageList({ Source: '../../../build/img/treeIcons.png', IconHeight: 20, IconWidth: 20 }), Width: 580, Height: 580, // Determine drag settings EnableDragAndDrop: true, DragAndDropMode: 'MultiDrag', DragAndDropDelay: 200, DragAndDropIndent: 0,
EnableDragOutside: true, EnableDropOutside: true, EnableColumnsMenu: true, SelectionMode: 'ControlShiftMultiSelect', ParentNode: 'container', Captions: [{ Content: 'first', Width: '40%' },{ Content: 'second',
Width: '10%' },{ Content: 'third', Width: '50%' }], NodeDrag: onNodeDrag, NodeDragStart: onNodeDragStart, NodeDragEnd: onNodeDragEnd }); Tree.setSelectedForAll(false);
After executing the example the SimpleTreeList component with node dragging is created.
See also: