TreeTable with Drag & Drop Support

[egotec]

Hello,

with Trees i can use D&D
https://www.primefaces.org/primeng/#/tree

but unfortunately not in TreeTable, is this planned?
https://www.primefaces.org/primeng/#/treetable

Regards
Patrick

[KarolDepka]

Hi.
I have the same question!

To add my 5 cents:

Is it really not supported, or just missing from the doc/demo at https://www.primefaces.org/primeng/#/treetable?

How difficult / feasible would it be to implement it ourselves?

How much code similarity would there be with the Tree drag and drop code?

Thanks!
Best Regards,
Karol Depka Pradzinski

PS Great Stuff .
PS The forum software seems quite clunky (e.g. login by email (now requires to remember user-name), and post preview should be automatic client-side)... I think you guys can do much better, especially that you are into modern front-end! .
PS I tried to put bullet point char in the post and it gave me error:

Code: Select all

SQL ERROR [ mysqli ]

Incorrect string value: '\xE2\x80\xA2 Is...' for column 'post_text' at row 1 [1366]

An SQL error occurred while fetching this page. Please contact the Board Administrator if this problem persists.

[HammerNL]

Any news on this topic?

[kalempir]

it would be a great feature, i am also waiting d&d support.

[lbaum]

This would be a great feature for the TreeTable because no other TreeTable supports Drag & Drop in Angular at the moment.

Is there a timeline for D&D support for the TreeTable, because the Tree component already have D&D support?

[PhilHuhn]

Hey, I'm a fellow developer. The place to do a new feature request is the GitHub account.

https://github.com/primefaces/primeng/issues

[quande.ren@gmail.com]

I am doing TreeTable with cdkDrag cdkDropList but got stucked. I am able to get the drag source element, but could not get the drop destination element. Can someone help me figure out how could I get the target where the item is dropped at(drop destination)?



Support I have a initial TreeTable data like this:

Code: Select all

Father id=1
   Son1 id=3
   Son2 id=4
Grandpa id=2

I would like drop the first record(Father id=1) on last record( Grandpa id=2) so that the data should like this:

Code: Select all

Grandpa id=2
   Father id=1
      Son1 id=3
       Son2 id=4

Here is my code

1. data model file: acctount-category.module.ts

Code: Select all

export class AcctountCategoryVo {
  public    id=0;
  public    parentId=0;
  public    parent: AcctountCategoryVo;
  public    description='';
  public    childrenCategories: AcctountCategoryVo[];
}

2. service file where data is coming from: restful.service.ts

Code: Select all

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../environments/environment';
import { MessageService } from 'primeng/api';
import { AcctountCategoryVo } from '../model/acctount-category.module';

@Injectable()
export class RestfulService {
	categories: AcctountCategoryVo[];

  	constructor(
		  private http: HttpClient, 
		  private messageService: MessageService,
		  ) { }

	public callRestful(requestType:string, actionType:string, jsonObj: any, callback: any) {
		
			let dtoWrapper={
				requestType: requestType, 
				actionType: actionType, 
				jsonString: JSON.stringify(jsonObj)
			};
			
			//console.log("login using " + this.email + " " + this.password);
			return this.http
					   .post(environment.API_BASE_URL+"/api/postJson3", dtoWrapper)
					   .subscribe(
									response 	=> this.handleResponse(response, callback), 
									error 		=> this.handleError(error)						
								   );
		}
	

	retrieveCategories(){
		console.log("categories="+this.categories);

		if(this.categories===null || this.categories===undefined){
			let  father=new AcctountCategoryVo();
			father.description="Father id=1";
			father.id=1;
	
			let  grandpa=new AcctountCategoryVo();
			grandpa.description="Grandpa id=2";
			grandpa.id=2;
			
			let  son1=new AcctountCategoryVo();
			son1.description="Son1 id=3";
			son1.id=3;
	
			let  son2=new AcctountCategoryVo();
			son2.description="Son2 id=4";
			son2.id=4;

			father.childrenCategories=[son1, son2];

			this.categories=[ father, grandpa];
		}

		console.log("categories="+this.categories);

		return this.categories;
	}

	private handleResponse(response: any, callback: any) {
		if(response.success){
			  callback(response);
		}else{
			  this.messageService.add({severity:'error', summary: 'Error', detail: response.errorMessage+' ('+response.errorCode+')' });
		}
  }
  
  private handleError(error: Response) {
	  console.log(error.status + ' :: ' +error.json +' '+error.statusText );
	  this.messageService.add({severity:'error', summary: 'Error !', detail:'Server Error Happened when communicate with server'});
	}

}

3. html file use TreeTable and CdkDrop and : acctount-category.component.html

Code: Select all

<p-fieldset legend="All Account Categories" [toggleable]="true">
	<p-treeTable  [value]="treeNodes" >
		<ng-template pTemplate="header">
			<tr>
				<th>Description</th>
			</tr>
		</ng-template>
		<ng-template pTemplate="body" let-rowNode let-rowData="rowData">
	        <tr>
				<td cdkDropList 
						(cdkDropListDropped)="drop($event)" 
						id="td{{rowData.id}}" 
						[cdkDropListData]="rowData.id" 
				>

					<p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>

					<a 	class="dropdown-item" 
						(click)="selectRecord(rowData)" 
						href="javascript:void(0);"
						id="item{{rowData.id}}" 
						cdkDrag
							(cdkDragData)="rowData.id"
							(cdkDragStarted)="dragStarted($event)"
							(cdkDragEnded)="dragEnded($event)"
							(cdkDragMoved)="dragMoved($event)"
					>    
						{{rowData.description}}
					</a>

				</td>
			</tr>
		</ng-template>
	</p-treeTable>
</p-fieldset>

4. ts file: acctount-category.component.ts

Code: Select all

import { CdkDragDrop, CdkDragEnd, CdkDragMove, CdkDragStart, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { Component, OnInit } from '@angular/core';
import { MessageService, TreeNode } from 'primeng/api';
import { AcctountCategoryVo } from 'src/app/model/acctount-category.module';
import { RestfulService } from 'src/app/services/restful.service';

@Component({
  selector: 'app-acctount-category',
  templateUrl: './acctount-category.component.html',
  styleUrls: ['./acctount-category.component.css']
})
export class AcctountCategoryComponent implements OnInit {
  category=new AcctountCategoryVo();
  selectedCategory: AcctountCategoryVo;
  categories: AcctountCategoryVo[];
  treeNodes : TreeNode<AcctountCategoryVo>[] ;
  parentCategory: AcctountCategoryVo;

  constructor(
    private restfulService: RestfulService,
    private messageService: MessageService) { }

  ngOnInit(): void {
    this.doRetrieve();
  }

  doRetrieve(){
    this.categories=this.restfulService.retrieveCategories();    
    this.setTreeNodes();
  }

  setTreeNodes(){
    this.treeNodes = [];
    this.categories.forEach(category => { 
      this.treeNodes.push( this.convertDtoToTreeNode(category) );
    });
  }

  convertDtoToTreeNode(category: AcctountCategoryVo): TreeNode<AcctountCategoryVo>{
    //let treeNode: TreeNode;
    let children : TreeNode<AcctountCategoryVo>[] ;

    children = [];

    if(category.childrenCategories!=null){
      category.childrenCategories.forEach(child => children.push(this.convertDtoToTreeNode(child)));
    }

    let treeNode = 
        { data: category,
          label: category.description,
          leaf: false,
          expanded: true,
          children: children,
        };
    
    return treeNode;
  }

  

  selectRecord(category: AcctountCategoryVo){
    this.category=category;
  }


  drop(event: CdkDragDrop<string[]>) {
    console.log("drop");
    console.log(event);
    console.log("drag source id = "+event.previousContainer.data);
    //what should be used here to show the target/destination of the elment that was dropped?
    console.log("drop desctination id = ?"); 
  }

  dragStarted(event: CdkDragStart) {
   // console.log("dragStarted");
   // console.log(event);
  }

  dragEnded(event: CdkDragEnd) {
    console.log("dragEnded");
    console.log(event);
  }

  dragMoved(event: CdkDragMove) {
    //console.log("dragMoved");
    //console.log(event);
  }



  nodeSelect(event) {
    this.selectedCategory = event.node.data;
    this.messageService.add({severity: 'info', summary: 'Node Selected', detail: this.selectedCategory.description});
}
  
}