1. Home
  2. Forum
  3. Angular - EJ 2
  4. TreeGrid - Contextmenu for adding new Row with Parent aggregates

TreeGrid - Contextmenu for adding new Row with Parent aggregates

Hi,

I am using this link to create crontextmenu https://www.syncfusion.com/kb/12296/how-to-add-record-with-dynamic-newrowposition-using-context-menu and add rows in my grid:

after implementing this my Cell Saved and Cell Edit event is not triggering.

Also, initially after adding the rows in my grid. I was not able to add values in Cell. After edit it just vanished. however to resolve this i have implemented Refresh grid method. which allows me to add rows as well as allows me to update values which Cell  can retain and does not vanish. But I have following issues which i am not able to solve 

public editSettings: EditSettingsModel={ allowEditing: true, allowAdding: true, allowDeleting: false, mode: "Row"};
  1. I have to click on Add Row Below 2 times to add my first row, after that it works just fine.
  2. I have implemented Rollup at the level of parent using following code. which is not working for newly added rows. does this require Edit Settings Mode should be Batch ????  https://stackblitz.com/edit/angular-disable-editing-in-batch-with-aggregate-z8o3u5?file=app.component.ts


If you can please provide me a sample with below:

  1. which will allow me to add Rows and Child from ContextMenu. 
  2. It can calculate the total at the parent level.
  3. Triggers Cell Edit/Save event. this will allow me to disable parent row for editing, including newly created rows 


         const totalChildPoint= function (field:any, data:any, column:any) {

    try{
    if (!isNullOrUndefined(data.hasChildRecords)) {
    //checking if the record has children
    let total = 0;
    findChildrenRecords(data).map(row => {
    total += row[parseInt(field)];
    });
    return total;
    }else{
    return data[parseInt(field)];
    }
    }catch(e){
    console.log("Error while calculating total");
    console.log(e);
    return 0;
    }
    }

2 Replies
PD PDev December 27, 2021 11:34 PM UTC

Additional information. I have tried using following code. that also does not work, there is something about the "Mode" which is not allowing rows to be added into tree grid.  

this.gridPAR1.editSettings.mode="Cell";
this.gridPAR1.addRecord(_dict, row, "Child");
this.gridPAR1.editSettings.mode="Batch";

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 28, 2021 04:36 PM UTC

Hi Parth Rawal, 

Thanks for your interest in using Syncfusion Components. 

Query#:- If you can please provide me a sample with below: 
  1. which will allow me to add Rows and Child from ContextMenu. 
  2. It can calculate the total at the parent level.
  3. Triggers Cell Edit/Save event. this will allow me to disable parent row for editing, including newly created rows 

We have achieved your requirement by using the following steps below:- 

  1. In order to addChild record dynamically, we suggest to use Custom-ContextMenu Item of the TreeGrid using addRecord method. We can use addRecord method with newRowPosition as Child, Top, Below or Above based on your requirement.
 
  1. It can calculate the total at the parent level.
Upon adding new Record, we suggest to use actionComplete event of the TreeGrid to refresh the TreeGrid with added Aggregates. Also we have handled the Aggregates using ValueAccessor discussed in the KB same has been implemented in your sample. 
  1. Triggers Cell Edit/Save event. this will allow me to disable parent row for editing, including newly created rows 
You can refer the below KB link for disable editing for particular record CellEditing as well as RowEditing. 
 
Refer to the code below:- 
App.Component.html:- 
 
<div class="control-section"> 
    <ejs-treegrid #treegrid 
                  [dataSource]="data" 
                  childMapping="subtasks" 
                  height="350" 
                  [treeColumnIndex]="1" 
                  id="treegridcomp" 
                  allowPaging="true" 
                  [pageSettings]="pageSettings" 
                  allowExcelExport="true" 
                  allowPdfExport="true" 
                  [allowSelection]="true" 
                  [selectionSettings]="selectionOptions" 
                  allowSorting="true" 
                  (contextMenuOpen)="contextMenuOpen($event)" 
                  (contextMenuClick)="contextMenuClick($event)" 
                  [contextMenuItems]="contextMenuItems" 
                  [editSettings]="editing" 
                  [toolbar]="toolbar" 
                  (actionBegin)="actionBegin($event)" 
                  (actionComplete)="actionComplete($event)"> 
        <e-columns> 
            .    .   . 
            <e-column field="progress" 
                      headerText="Progress" 
                      width="90" 
                      textAlign="Right" 
                      [edit]="editparams" 
                      [valueAccessor]="totalChildValue" 
                      editType="numericedit"></e-column> 
        </e-columns> 
    </ejs-treegrid> 
</div> 
 
App.Component.ts 
 
export class AppComponent { 
  public data: Object[] = []; 
  public pageSettings: Object; 
  public contextMenuItems: Object; 
  public editing: EditSettingsModel; 
@ViewChild('treegrid') 
  public treeGridObj: TreeGridComponent; 
  ngOnInit(): void { 
    this.data = sampleData; 
    this.contextMenuItems = [ 
      { 
        text: 'Add Child', 
        target: '.e-content', 
        id: 'addchildrow', 
        iconCss: ' e-icons e-circle-add', 
        cssClass: 'e-flat', 
      }, 
    ]; 
    this.selectionOptions = { 
      type: 'Single', 
      mode: 'Row', 
    }; 
    (this.editing = { 
      allowEditing: true, 
      allowAdding: true, 
      allowDeleting: true, 
      newRowPosition: 'Top', 
      showConfirmDialog: false, 
      mode: 'Row', 
    }), 
      (this.pageSettings = { pageSize: 11 }); 
    this.editparams = { params: { format: 'n' } }; 
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
  } 
  contextMenuOpen(args): void { 
    this.rowIndex = args.rowInfo.rowIndex; 
    this.cellIndex = args.rowInfo.cellIndex; 
  } 
  totalChildValue(field, data, column) { 
    if (isNullOrUndefined(data.parentItem)) { 
      let totalUnitWeight = 0; 
      data.subtasks.map((row) => (totalUnitWeight += row['progress'])); 
      return totalUnitWeight; 
    } 
    return data.progress; 
  } 
  actionComplete(args) { 
    if (args.requestType == 'save') { 
      this.treeGridObj.refresh(); //refresh the TreeGrid upon saving while adding new child and newly added value has been added into aggregate 
    } 
  } 
  actionBegin(args) { 
    if (args.requestType == 'beginEdit' && args.rowData.hasChildRecords) { 
      args.cancel = true; //prevent editing for parent records 
    } 
  } 
  contextMenuClick(args): void { 
    var i = 100; 
    var data = { 
      taskID: i + 1, 
      taskName: 'test', 
      progress: 100, 
    }; 
 
    var treegridInst = this.treeGridObj; 
    var selectedRecord = this.selectedRecord; 
    if (args.item.id === 'addchildrow') { 
      this.treeGridObj.addRecord(data, this.rowIndex, 'Child'); //add child row on custom contextmenu item 
    } 
  } 
} 
 
 
It will be applicable for Cell ‘mode’ by using condition args.type as “edit” in actionBegin event. And also we don’t have addRecord method  
 
            We don’t have support “For adding new records dyanamically with newRowPostion with Batch mode. Please get back to us if you need any further assistance. 
 
Regards, 
Farveen sulthana T 


Loader.
Up arrow icon