Nebular Tree Grid Drag and Drop rearranging Nodes

Question

I'm looking for a solution for Nebular Tree Grid drag and drop option for rearranging hierarchical table data.

Example for nested Nodes (in my case the hierarchy is a little bigger):

1 Chapter
- 1.1 Element
- 1.2 Element
2 Chapter
- 2.1 Element

My goal is to have a clear info about what Element is dragged and where its dropped. (under- upper- or on Element)

If i drag 2.1 Element between 1.1 Element and 1.2 Element i need the info "2.1 Element must be placed after 1.1 Element"

Is that possible with Nebular Tree Grid?

What i found so far was https://stackblitz.com/edit/angular-cdk-nested-drag-drop-tree-structure?file=src%2Fapp%2Fapp.component.ts

But i still didnt get it to run with my Nebular Tree Grid so i hope there is some of you who already did this :)

Please [edit] your question title to something that describes the problem you're having or question you're asking. Your current title is the repetition of information already available in the tags plus "Drag and Drop", which isn't meaningful on its own. Your title should be clear and descriptive enough to have meaning to a future site user who is skimming through a list of search results trying to find a solution to a problem, and your current title doesn't provide any useful information. Thanks. — Ken White, Jan 15 '22 at 00:36

score 2 · Answer 1 · edited May 11 '23 at 16:49

If you are on Angular, which I assume because of using Nebular, check out this page about using Angular cdk drag and drop directives:

https://material.angular.io/cdk/drag-drop/overview

It plays well and fairly easy with Nebular Tree Grid, here is how code to add drag and drop to a nbTreeGrid looks like:

<table [nbTreeGrid]="_tableData" cdkDropList
    (cdkDropListDisabled)="!draggable" cdkDropListLockAxis="y"
    (cdkDropListSorted)="onDrag($event) 
    (cdkDropListDropped)="onDrop($event)">

    <tr cdkDrag nbTreeGridRow 
        *nbTreeGridRowDef="let row; let i = index; columns: _tableDataColumns"
        [cdkDragData]="{index: i, data: row.data}">
    </tr>

edit: Note the [cdkDragData] on the tr. I use this in my controller to know which element is being dropped in place of which other. Since all we get from drop events are the current and previous index of the dragged item, we need to keep track of the current index of each row in the table. I couldn't find another way to get this info from NbTreeGridDataSource. Here is some controller code to give you an idea

import { CdkDrag } from '@angular/cdk/drag-drop'

@Component()
export class DropListComponent {
    // we'll need to access all drag items to get their dragData
    @ViewChildren(CdkDrag) private rows: QueryList<CdkDrag>;

    // this is called during drag every time list elements are rearranged
    onDrag(event) {
        const {index: sourceId, data: sourceData} = event.item.data
        const target =  this.rows.find(el=> el.data.index == event.currentIndex).data
        const {index: targetId, data: targetData} = target
        console.log(`Dropped items ${sourceId} to ${targetId}.`)
        console.log('SOURCE', sourceData)
        console.log('TARGET', targetData)
    }

}

Nebular Tree Grid Drag and Drop rearranging Nodes

1 Answers1