Your search did not match any results.
Tree View

Drag & Drop for Plain Data Structure

This sample app demonstrates node drag and drop operations within DevExtreme TreeView when using simple data structures. You can reorder nodes within a single tree view or drag and drop nodes between two separate tree views.

Use Sortable to implement the necessary drag and drop functionality within your web app. The following steps outline configuration requirements for our JavaScript TreeView:

  1. Allow users to reorder nodes
    Wrap the TreeView in a Sortable and enable the Sortable's allowReordering option.

  2. Allow users to change node hierarchy
    Enable the allowDropInsideItem option so that users can drop one node onto another. This adds it as the target node's child. If this option is disabled, users can only drop nodes between other nodes.

  3. Allow users to drag only tree view nodes
    To specify tree view nodes as drag targets, set the filter option to a class selector. Since all tree view nodes use the dx-treeview-node class, you can use this class selector as needed.

  4. Prevent a node from being moved into its child node
    When a user moves a parent node into its own child node, it breaks the hierarchy. To prevent this outcome, implement the onDragChange function and traverse up the node tree. If the target is a child of the dragged node, cancel the ability to drop the node.

  5. Reorder nodes in code
    Implement the onDragEnd function. In this function, you must gather information about nodes being moved. With this information, you can reorder the nodes in the data source (see the moveNode function), and reassign the data source to the TreeView's items option.

  6. Specify tree view identifiers (for drag and drop between multiple tree views only)
    Identifiers help distinguish between multiple tree views. Save them in the Sortable's data option. The tree views below include the following identifiers: "driveC" and "driveD".

  7. Combine tree views into one drag and drop group (for drag and drop between multiple tree views only)
    Set the Sortable's group option to the same value for all tree views. This allows users to move nodes between the tree views.

Copy to CodePen
Apply
Reset
window.onload = function() { var productName = ko.observable(""), productPrice = ko.observable(""), productImage = ko.observable(""); var viewModel = { treeViewOptions: { items: products, width: 300, onItemClick: function(e) { var item = e.itemData; if(item.price) { productImage(item.image); productName(item.text); productPrice("$" + item.price); } else { productPrice(""); } } }, productName: productName, productPrice: productPrice, productImage: productImage }; ko.applyBindings(viewModel, document.getElementById("treeview")); };
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.1.6/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div class="form" id="treeview"> <div id="simple-treeview" data-bind="dxTreeView: treeViewOptions"></div> <!-- ko if: productPrice() --> <div id="product-details"> <img src="" data-bind="attr: { src: productImage }" /> <div class="name" data-bind="text: productName"></div> <div class="price" data-bind="text: productPrice"></div> </div> <!-- /ko --> </div> </div> </body> </html>
#simple-treeview, #product-details { display: inline-block; } #product-details { vertical-align: top; width: 400px; height: 420px; margin-left: 20px; } #product-details > img { border: none; height: 300px; width: 400px; } #product-details > .name { text-align: center; font-size: 20px; } #product-details > .price { text-align: center; font-size: 24px; } .dark #product-details > div { color: #f0f0f0; } .hidden { visibility: hidden; }
var products = [{ id: "1", text: "Stores", expanded: true, items: [{ id: "1_1", text: "Super Mart of the West", expanded: true, items: [{ id: "1_1_1", text: "Video Players", items: [{ id: "1_1_1_1", text: "HD Video Player", price: 220, image: "../../../../images/products/1.png" }, { id: "1_1_1_2", text: "SuperHD Video Player", image: "../../../../images/products/2.png", price: 270 }] }, { id: "1_1_2", text: "Televisions", expanded: true, items: [{ id: "1_1_2_1", text: "SuperLCD 42", image: "../../../../images/products/7.png", price: 1200 }, { id: "1_1_2_2", text: "SuperLED 42", image: "../../../../images/products/5.png", price: 1450 }, { id: "1_1_2_3", text: "SuperLED 50", image: "../../../../images/products/4.png", price: 1600 }, { id: "1_1_2_4", text: "SuperLCD 55", image: "../../../../images/products/6.png", price: 1350 }, { id: "1_1_2_5", text: "SuperLCD 70", image: "../../../../images/products/9.png", price: 4000 }] }, { id: "1_1_3", text: "Monitors", expanded: true, items: [{ id: "1_1_3_1", text: "19\"", expanded: true, items: [{ id: "1_1_3_1_1", text: "DesktopLCD 19", image: "../../../../images/products/10.png", price: 160 }] }, { id: "1_1_3_2", text: "21\"", items: [{ id: "1_1_3_2_1", text: "DesktopLCD 21", image: "../../../../images/products/12.png", price: 170 }, { id: "1_1_3_2_2", text: "DesktopLED 21", image: "../../../../images/products/13.png", price: 175 }] }] }, { id: "1_1_4", text: "Projectors", items: [{ id: "1_1_4_1", text: "Projector Plus", image: "../../../../images/products/14.png", price: 550 }, { id: "1_1_4_2", text: "Projector PlusHD", image: "../../../../images/products/15.png", price: 750 }] }] }, { id: "1_2", text: "Braeburn", items: [{ id: "1_2_1", text: "Video Players", items: [{ id: "1_2_1_1", text: "HD Video Player", image: "../../../../images/products/1.png", price: 240 }, { id: "1_2_1_2", text: "SuperHD Video Player", image: "../../../../images/products/2.png", price: 300 }] }, { id: "1_2_2", text: "Televisions", items: [{ id: "1_2_2_1", text: "SuperPlasma 50", image: "../../../../images/products/3.png", price: 1800 }, { id: "1_2_2_2", text: "SuperPlasma 65", image: "../../../../images/products/8.png", price: 3500 }] }, { id: "1_2_3", text: "Monitors", items: [{ id: "1_2_3_1", text: "19\"", items: [{ id: "1_2_3_1_1", text: "DesktopLCD 19", image: "../../../../images/products/10.png", price: 170 }] }, { id: "1_2_3_2", text: "21\"", items: [{ id: "1_2_3_2_1", text: "DesktopLCD 21", image: "../../../../images/products/12.png", price: 180 }, { id: "1_2_3_2_2", text: "DesktopLED 21", image: "../../../../images/products/13.png", price: 190 }] }] }] }, { id: "1_3", text: "E-Mart", items: [{ id: "1_3_1", text: "Video Players", items: [{ id: "1_3_1_1", text: "HD Video Player", image: "../../../../images/products/1.png", price: 220 }, { id: "1_3_1_2", text: "SuperHD Video Player", image: "../../../../images/products/2.png", price: 275 }] }, { id: "1_3_3", text: "Monitors", items: [{ id: "1_3_3_1", text: "19\"", items: [{ id: "1_3_3_1_1", text: "DesktopLCD 19", image: "../../../../images/products/10.png", price: 165 }] }, { id: "1_3_3_2", text: "21\"", items: [{ id: "1_3_3_2_1", text: "DesktopLCD 21", image: "../../../../images/products/12.png", price: 175 }] }] }] }, { id: "1_4", text: "Walters", items: [{ id: "1_4_1", text: "Video Players", items: [{ id: "1_4_1_1", text: "HD Video Player", image: "../../../../images/products/1.png", price: 210 }, { id: "1_4_1_2", text: "SuperHD Video Player", image: "../../../../images/products/2.png", price: 250 }] }, { id: "1_4_2", text: "Televisions", items: [{ id: "1_4_2_1", text: "SuperLCD 42", image: "../../../../images/products/7.png", price: 1100 }, { id: "1_4_2_2", text: "SuperLED 42", image: "../../../../images/products/5.png", price: 1400 }, { id: "1_4_2_3", text: "SuperLED 50", image: "../../../../images/products/4.png", price: 1500 }, { id: "1_4_2_4", text: "SuperLCD 55", image: "../../../../images/products/6.png", price: 1300 }, { id: "1_4_2_5", text: "SuperLCD 70", image: "../../../../images/products/9.png", price: 4000 }, { id: "1_4_2_6", text: "SuperPlasma 50", image: "../../../../images/products/3.png", price: 1700 }] }, { id: "1_4_3", text: "Monitors", items: [{ id: "1_4_3_1", text: "19\"", items: [{ id: "1_4_3_1_1", text: "DesktopLCD 19", image: "../../../../images/products/10.png", price: 160 }] }, { id: "1_4_3_2", text: "21\"", items: [{ id: "1_4_3_2_1", text: "DesktopLCD 21", image: "../../../../images/products/12.png", price: 170 }, { id: "1_4_3_2_2", text: "DesktopLED 21", image: "../../../../images/products/13.png", price: 180 }] }] }, { id: "1_4_4", text: "Projectors", items: [{ id: "1_4_4_1", text: "Projector Plus", image: "../../../../images/products/14.png", price: 550 }, { id: "1_4_4_2", text: "Projector PlusHD", image: "../../../../images/products/15.png", price: 750 }] }] }] }];