Action Complete Event does not trigger in TreeGrid

[PDev]

I have treegrid. which has a add button (outside grid) through which i am adding new Rows in the treegrid. While it adds new rows nicely. and also highlights and colors rows based on condition. However, I have actioncomplete event which is responsible for some of the calculations in TreeGrid. 

After adding new Rows actioncomplete event does not trigger but it triggers for the rows which are present at the time of page load (From Database) 

How do i trigger actioncomplete event for newly added rows.

Below is mycode which adds rows in my grid.

addChild(args){

let maxId=Math.max.apply(Math, this.dsPAR2.map(function(o) { return o['ID']; }));

var tree = (document.getElementsByClassName("e-treegrid")["gridPAR2"] as any).ej2_instances[0];

var temp:any = tree.dataSource.slice();

let templateData=Config.template(maxId);

templateData=this.populateInitialData(templateData,this.timelineCols);

templateData.forEach(d=>{

temp.push(d);

});

tree.dataSource=temp;

this.dsPAR2=temp;

this.gridPAR2.refresh();

return false;

}

Below is my code in actioncomplete event, which is responsible for setting some of the values in Cell

let parentRecord=this.gridPAR2.flatData.find(_=>_['ID']==args.data.parentItem.ID);

let childrens=findChildrenRecords(parentRecord);

let currentcol=parseInt(args.column.field);

let qty=childrens.find(_=>_['name'].toLowerCase()=="quantity")[currentcol];

let std=childrens.find(_=>_['name'].toLowerCase().indexOf("standard")>-1)[currentcol];

let CostId=childrens.find(_=>_['name'].toLowerCase().indexOf("costs")>-1)['ID'];

this.gridPAR2.setCellValue(CostId, currentcol.toString(), qty*std);

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal, 

Query#:- How do i trigger actioncomplete event for newly added rows. 

 

We have checked your reported problem and added the new record by assigning the newly added data into TreeGrid dataSource property but we are unable to replicate the problem at our end(ActionComplete event get triggers).  

Refer to the sample Link:- 

https://stackblitz.com/edit/angular-g8j1el?file=app.component.ts 

 

Screenshot:- 

 

 

So we need some more additional details to find the exact cause of the issue. Share us the following details. 

1. Screenshot/Video demo while adding the records.
2. Complete TreeGrid code example.
3. If possible replicate it in the above sample and revert us back.
4. Action you need to perform in Elaborate? Also for adding new records by default we have addRecord method of the TreeGrid.

Regards, 

Farveen sulthana T 

 

[PDev]

Thanks. Sorry there was an issue with my code. It is working as expected. 

Can you please, help me with adding childs in grid at specific location. I have modified the code here https://stackblitz.com/edit/angular-g8j1el-jrahjz?file=app.component.ts Please have a look I have 2 parents P1 and Summary. Once you click on "Add" button it adds set of records at the end of grid. but i would like it to be added before summary.

How d 

[Farveen Sulthana Thameeztheen Basha]

Hi Parth Rawal, 

We are working on your query with high Priority and update you further details by on or before 18^th January 2022. 

Regards, 

Farveen sulthana T 

[Farveen Sulthana Thameeztheen Basha]

 Hi Parth Rawal,  

We appreciate your patience. 

Query#:- Once you click on "Add" button it adds set of records at the end of grid. but i would like it to be added before summary. 

 

As per your requirement we have added the records at specific location(i.e. before summary). If you want to add the specific records as Child you need to use addRecord method. But Currently we don’t have multiple records addition support in TreeGrid. 

 

Refer to the modified code below:- 

App.Component.ts 

 

add(args) { 

            let maxId = Math.max.apply( 

                Math, 

                this.data.map(function (o) { 

                    return o['ID']; 

                }) 

            ); 

            var tree = (document.getElementsByClassName('e-treegrid')[0] as any) 

                .ej2_instances[0]; 

            console.log(tree); 

            const idx = tree.dataSource.findIndex((data) => data.ID === 20); 

            let templateData = this.template(maxId); 

            var temp: any = [ 

                ...tree.dataSource.slice(0, idx + 1), 

                ...templateData, 

                ...tree.dataSource.slice(idx + 1), 

            ]; 

            tree.dataSource = temp; 

            this.data = temp; 

           tree.refresh(); 

            return false; 

        } 

 

 

Modified sample link:- https://stackblitz.com/edit/angular-g8j1el-4muhvb?file=app.component.ts 

 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T