drag and drop from p-tree to p-table

UI Components for Angular
Post Reply
ramaeon
Posts: 1
Joined: 13 Sep 2022, 14:48

13 Sep 2022, 14:55

Hi , I am trying to drag from p-tree to specific cell in p-table.
Pls help me if anything .

My Tree Code:
<div class="p-col">
<div pDraggable="products" (onDragStart)="dragStartDBTree($event)" (onDragEnd)="dragEndDBTree($event)">
<p-tree
[value]="dbTreeData"
[draggableNodes]="true"
[droppableNodes]="true"
selectionMode="single"
[loading]="loadingDbTree"
[(selection)]="selectedFileDBTree"
[contextMenu]="cmDBTree"
(onNodeExpand)="expandDBTree($event)"
(onNodeSelect)="seletedNodeDBTree($event)"
[style]="{ 'max-height': '490px', overflow: 'auto' }"
droppableScope="files"
draggableScope="server2"
[validateDrop]="true"
(onNodeDrop)="onTreeDrop($event)"
(onNodeContextMenuSelect)="onNodeContextMenuSelect($event)"
></p-tree>

</div>

My Table Code:
<div
class="card"
pDroppable="dbDragTreeData"
(onDrop)="droptoTable($event)"
>
<p-table
#dt
[value]="records"
[columns]="cols"
responsiveLayout="scroll"
dataKey="COLUMN_NAME"
styleClass="p-datatable-gridlines p-datatable-sm"
scrollHeight="400px"
scrollDirection="both"
[tableStyle]="{ width: 'max-content' }"
[loading]="!loadingSpinner"
[columns]="cols"
[exportFilename]="exportName"
[rows]="100"
[(contextMenuSelection)]="selectedItem"
[scrollable]="true"
scrollHeight="450px"
[resizableColumns]="true"
columnResizeMode="expand"
[contextMenu]="cm"
(onEditComplete)="editGrid($event)"
[rowsPerPageOptions]="[100, 200, 500]"
>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 31 guests