Tree grid component with custom context menu opens on button click, deep copy

[MM]

Hello everybody,

What is the best way to open the context menu on the button click in the tree grid component? Let's say that I trying to open the context menu on tree dot's button.

A context menu should support add child, add parent and copy. 

Also what is the best way to copy everything, so let's say that I want to copy parent with all the children is this possible?

What about the option add parent, so if I select the child and I click the add parent option can I insert parent item on that child immediately?

example

Thank you,

M

[Pon Selva Jeganathan]

Hi MM,     

Query1: open the context menu on the button click in the tree grid component  

 

Based on your query we can open the context menu popup in the command button using  command button click event and used contextMenuOpen event to prevent context menu opening on any other places in tree grid. Please refer to below code snippet,   

  

      

   

<ejs-treegrid id='TreeGrid' #treegrid [dataSource]='data' copyHierarchyMode='Child' height='315'   

(contextMenuOpen)='contextMenuOpen($event)'  […>  

  

</ejs-treegrid>  

  

  

  

    this.contextMenuItems = [  

      { text: "Add Child", target: ".e-content", id: "addchild" },  

      { text: "Copy", target: ".e-content", id: "copy" },  

        ];  

  }  

btnclick(e: MouseEventArgs){  

  var element: EventTarget = e.target;  

  var ev: Event  = document.createEvent('HTMLEvents');  

  ev['pageX'] = e.pageX, ev['pageY'] = e.pageY;  

  ev.initEvent("contextmenu", true, false)  

  element.dispatchEvent(ev);  

}  

contextMenuOpen(args: BeforeOpenCloseEventArgs){  

   if (!(<HTMLElement>args.event.target).classList.contains('e-btn-icon')){  

     args.cancel = true;  

   }  

  

}  

  

  private createTreeGridColumns() {  

    return [  

      {  

        field: "taskID",  

        headerText: "Task ID",  

        isPrimaryKey:"true",  

        editType: "defaultedit",  

        customAttributes: { class: "customcss" }  

      },  

 … 

      {  

        headerText: "action",  

        commands: [  

          {  

            buttonOption: {  

              iconCss: "e-icons e-detail",  

              cssClass: "e-flat",  

  

              click: this.btnclick.bind(this)  

            }  

          }  

   

   

   

   

  Query2: context menu should support add child, add parent and copy.  

 

Based on your query, we achieved your query by using contextmenuclick event. 

1.     Add Child: We suggest that you use the addRecord method to add child.  

2.     Add Parent: We don’t have this support to add parent for existing record. If needed, we need to update the whole treegrid datasource as workaround.

3.     Copy: We suggest that you use the copy method. If you want to copy parent with all children then copyhierchymode property to child. Please refer to the below code example, 



 

   

           

<ejs-treegrid id='TreeGrid' #treegrid [dataSource]='data' copyHierarchyMode='Child'   

(contextMenuClick)='contextMenuClick($event)'  [contextMenuItems]='contextMenuItems'  

[gridLines]='lines'>  

  

</ejs-treegrid>  

contextMenuClick(args: ContextMenuClickEventArgs): void {  

  var idx :any= args.rowInfo.rowIndex  

  if (args.item.id === 'addchild') {        // add child  

    var data = {taskID:88,priority:"high"};  

    this.treegrid.addRecord(data, idx, "Child"); // pass data, index, position  

  }   

   

  else if (args.item.id === 'copy') {  

    this.treegrid.selectRow(idx);  

      

    this.treegrid.copy();  

  }  

}  

  

  

 

   

Please refer to the below sample:    

https://www.syncfusion.com/downloads/support/forum/160888/ze/angular-285188725 

 

Please refer to the below API documentation: 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#contextmenuopen 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#contextmenuclick 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#contextmenuitems 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#copyhierarchymode 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#copy 

https://ej2.syncfusion.com/angular/documentation/api/treegrid#addrecord 

 

Kindly get back us to further assistance.    

    

Regards,     

Pon selva  

Marked as answer