Is it possible to implement Drag and Drop functionality from a Tree component to a DataTable using PrimeNG?
I have tried implementing this feature, but my data is not draggable even though there are no errors after compilation. What could be the issue?
Here is an excerpt of my code:
drag.and.drop.ts
import { Component, OnInit } from '@angular/core';
import {Tree} from 'primeng/primeng';
import {DataTable} from 'primeng/primeng';
import {Column} from 'primeng/primeng';
import {Draggable,Droppable} from 'primeng/primeng';
import {ObjectsService} from "../app.tree/objects.service";
import {ClassObject} from "./class.object";
@Component({
selector: 'drag-drop',
template: `
<p-growl [value]="msgs"></p-growl>
<div class="row">
<div class="col-md-6 col-xs-12" style="height: 600px">
<div class="panel">
<div class="panel-heading">
<label class="col-md-offset-5 col-xs-offset-5">All Objects</label>
</div>
<div class="panel-body">
<p-tree [value]="availableObjects" [style]="{'width':'470px','height':'530px'}"
selectionMode="single" [(selection)]="selectedFile" (onNodeSelect)="nodeSelect($event)"
pDraggable="classObjs" (onDragStart)="dragStart($event)" (onDragEnd)="dragEnd($event)"></p-tree>
Selected Node: {{selectedFile ? selectedFile.label : 'none'}}
</div>
</div>
</div>
<div class="col-md-6 col-xs-12" style="height: 600px;">
<div class="panel">
<div class="panel-heading">
<label class="col-md-offset-2 col-xs-offset-5">Objects related to Class</label>
</div>
<div class="panel-body" pDroppable="classObjs" (onDrop)="drop($event)"
[ngClass]="{'ui-state-highlight':draggedObject}">
<p-dataTable [value]="selectedObject">
<p-column field="name" header="Name"></p-column>
<p-column field="dBegin" header="Start Date"></p-column>
<p-column field="dEnd" header="End Date"></p-column>
</p-dataTable>
<div class="row" style="position: absolute; bottom: 0px;">
<p class="col-lg-1" style="height: 30px; width: 5px; border: 1px solid #000; background: #90E803"></p>
<label class="col-lg-7" style="font-size: 12px;"> - new entries</label>
<a title="Trash Can" type="button" class="col-lg-3 btn btn-lg" style="color: #000; float: right;">
<span class="glyphicon glyphicon-trash"></span></a>
</div>
</div>
</div>
</div>
</div>
`,
directives: [Tree, DataTable, Column, Draggable, Droppable]
})
export class DragAndDrop implements OnInit {
availableObjects: ClassObject[];
selectedObjects: ClassObject[];
draggedObject: ClassObject;
constructor(private objectService: ObjectsService){}
ngOnInit() {
this.selectedObjects = [];
this.availableObjects = this.objectService.getObjects();
}
dragStart(event, classObj: ClassObject){
this.draggedObject = event.node;
}
drop(event) {
if(this.draggedObject) {
this.selectedObjects.push(this.draggedObject);
this.availableObjects.splice(this.findIndex(this.draggedObject), 1);
this.draggedObject = null;
}
}
dragEnd(event) {
this.draggedObject = null;
}
findIndex(event) {
let index = -1;
for(let i = 0; i < this.availableObjects.length; i++) {
if(event.node.label === this.availableObjects[i].label) {
index = i;
break;
}
}
return index;
}
nodeSelect(event) {
console.log(event.node);
}
}
object.service.ts
import { Injectable } from '@angular/core';
import {ClassObject} from "../app.drag.and.drop/class.object";
@Injectable()
export class ObjectsService {
getObjects():ClassObject[] {
return [
{
"label": "1",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children": [
{"label": "2", "icon": "fa-file-o", "data": "Expenses Document"},
{
"label": "3",
"data": "Documents Folder",
"expandedIcon": "fa-folder-open",
"collapsedIcon": "fa-folder",
"children":[
{"label": "4", "icon": "fa-file-o", "data": "Expenses Document"},
{"label": "5", "icon": "fa-file-o", "data": "Expenses Document"},
]
},
]
}
]
}
}
class.object.ts
import {TreeNode} from "primeng/primeng";
export interface ClassObject {
label?: string;
icon?: any;
expandedIcon?: any;
collapsedIcon?: any;
children?: TreeNode[];
leaf?: boolean;
data: any;
}