angular

Author: flagmanAndrew

Angular/src/app/app.component.html

@@ -1,3 +1,28 @@
 <div class="default-style">
-  <dx-button [text]="buttonText" (onClick)="onClick($event)"></dx-button>
+  <div class="demo-header">
+    <h3>TreeView - Select multiple items and drag'n'drop</h3>
+    <div id="toggle-container">
+      <span>Clear selection after drop</span>
+      <dx-switch
+        id="clear-after-drop-switch"
+        [(value)]="clearSelectionAfterDrop"
+      ></dx-switch>
+    </div>
+  </div>
+  <dx-tab-panel [deferRendering]="false">
+    <dxi-item title="Plain Data">
+      <div *dxTemplate>
+        <tree-view-plain
+          [shouldClearSelection]="clearSelectionAfterDrop"
+        ></tree-view-plain>
+      </div>
+    </dxi-item>
+    <dxi-item title="Hierarchical Data">
+      <div *dxTemplate>
+        <tree-view-hierarchy
+          [shouldClearSelection]="clearSelectionAfterDrop"
+        ></tree-view-hierarchy>
+      </div>
+    </dxi-item>
+  </dx-tab-panel>
 </div>

Angular/src/app/app.component.scss

@@ -2,3 +2,20 @@
   margin: 50px;
   width: 90vw;
 }
+
+.demo-header {
+  display: flex;
+  justify-content: space-between;
+}
+
+#toggle-container {
+  padding-top: 20px;
+}
+
+#clear-after-drop-switch {
+  vertical-align: text-bottom;
+}
+
+#toggle-container span {
+  padding-right: 10px;
+}

Angular/src/app/app.component.ts

@@ -1,20 +1,15 @@
 import { Component } from '@angular/core';
-import { ClickEvent } from 'devextreme/ui/button';
+import { DxSwitchModule, DxTabPanelModule } from 'devextreme-angular';
+import { TreeViewPlainComponent } from './components/tree-view-plain/tree-view-plain.component';
+import { TreeViewHierarchyComponent } from './components/tree-view-hierarchical/tree-view-hierarchy.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
+  standalone: true,
+  imports: [DxTabPanelModule, DxSwitchModule, TreeViewPlainComponent, TreeViewHierarchyComponent],
 })
 export class AppComponent {
-  title = 'Angular';
-
-  counter = 0;
-
-  buttonText = 'Click count: 0';
-
-  onClick(e: ClickEvent): void {
-    this.counter++;
-    this.buttonText = `Click count: ${this.counter}`;
-  }
+  clearSelectionAfterDrop = false;
 }

Angular/src/app/app.module.ts

@@ -0,0 +1,26 @@
+<dx-sortable
+  filter=".dx-treeview-item"
+  [allowDropInsideItem]="true"
+  [allowReordering]="true"
+  (onDragStart)="dragStart($event)"
+  (onDragChange)="dragChange($event)"
+  (onDragEnd)="dragEnd($event)"
+  dragTemplate="draggedItemsTemplate"
+>
+  <div *dxTemplate="let dragData of 'draggedItemsTemplate'">
+    <div *ngFor="let node of dragData.itemData">
+      <div class="dragged-item">{{ node.text }}</div>
+    </div>
+  </div>
+  <dx-tree-view
+    #treeView
+    class="tab-item-content"
+    [items]="treeItems"
+    [expandNodesRecursive]="false"
+    [selectNodesRecursive]="false"
+    showCheckBoxesMode="normal"
+    dataStructure="tree"
+    displayExpr="name"
+    [width]="300"
+  ></dx-tree-view>
+</dx-sortable>