refactor: replace GridDragDropFilters example with TreeGridDragDrop

articles/components/grid/drag-drop.adoc

@@ -105,21 +105,21 @@ Drag-and-drop filters determine which rows are draggable and which rows are vali
 ifdef::lit[]
 [source,typescript]
 ----
-include::{root}/frontend/demo/component/grid/grid-drag-drop-filters.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/tree-grid/tree-grid-drag-drop.ts[render,tags=snippet,indent=0,group=Lit]
 ----
 endif::[]
 
 ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/grid/GridDragDropFilters.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/treegrid/TreeGridDragDrop.java[render,tags=snippet,indent=0,group=Flow]
 ----
 endif::[]
 
 ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/grid/react/grid-drag-drop-filters.tsx[render,tags=snippet,indent=0,group=React]
+include::{root}/frontend/demo/component/tree-grid/react/tree-grid-drag-drop.tsx[render,tags=snippet,indent=0,group=React]
 ----
 endif::[]
 --

frontend/demo/component/tree-grid/react/tree-grid-drag-drop.tsx

@@ -57,7 +57,6 @@ function Example() {
         expandedItems.value = event.detail.value;
       }}
       rowsDraggable
-      dropMode={draggedItem.value ? 'on-top' : undefined}
       onGridDragstart={(event) => {
         draggedItem.value = event.detail.draggedItems[0];
       }}
@@ -71,13 +70,17 @@ function Example() {
           items.value = [...items.value];
         }
       }}
+      dropMode={draggedItem.value ? 'on-top' : undefined}
       dragFilter={(model) => {
         const { item } = model;
-        return !item.manager;
+        return !item.manager; // Only drag non-managers
       }}
       dropFilter={(model) => {
         const { item } = model;
-        return item.manager && item.id !== draggedItem.value?.managerId;
+        return (
+          item.manager && // Can only drop on a supervisor
+          item.id !== draggedItem.value?.managerId // Disallow dropping on the same manager
+        );
       }}
     >
       <GridTreeColumn path="firstName" />

frontend/demo/component/tree-grid/tree-grid-drag-drop.ts

@@ -75,14 +75,13 @@ export class Example extends LitElement {
     return html`
       <vaadin-grid
         .dataProvider="${this.dataProvider}"
-        .itemIdPath="${'id'}"
-        .itemHasChildrenPath="${'manager'}"
+        item-id-path="id"
+        item-has-children-path="manager"
         .expandedItems="${this.expandedItems}"
         @expanded-items-changed="${(event: GridExpandedItemsChangedEvent<Person>) => {
           this.expandedItems = event.detail.value;
         }}"
         rows-draggable
-        .dropMode=${this.draggedItem ? 'on-top' : undefined}
         @grid-dragstart="${(event: GridDragStartEvent<Person>) => {
           this.draggedItem = event.detail.draggedItems[0];
         }}"
@@ -99,6 +98,7 @@ export class Example extends LitElement {
             this.grid.clearCache();
           }
         }}"
+        .dropMode="${this.draggedItem ? 'on-top' : undefined}"
         .dragFilter="${(model: GridItemModel<Person>) => {
           const { item } = model;
           return !item.manager; // Only drag non-managers