deleteRecord does not remove records when there are childred under it

Hi,

Basically I have a simple treeGrid where I need to delete a row (and its children). I want to do it programmatically, via external button.

Tree has a primaryKey on a field called "primaryId"

When executing this method on treeGrid:

this.treegrid.deleteRecord(' primaryId ', { primaryId: 1234 });

it works, only if given id does not have children. If there is anything under this node, it fails to delete node (but it changes the focused row).

Question 2.
After node removal - I want to control which row is selected, how to do it. because when I do it like that:
this.treegrid.deleteRecord(' primaryId ', { primaryId: 1234 });

this.treegrid.selectRow(0);

It moves to top row just for a fraction of second and then it gets back to some random node.


11 Replies

JR Jagadesh Ram Raajkumar Syncfusion Team October 28, 2021 01:34 PM UTC

Hi Michal, 

Greetings from Syncfusion Support.

Query1 : How to delete parent row and child together.
Query2: Maintain the selection after the parent and child are deleted.

Based on your queries we have prepared a sample to delete a parent along with its children. After selecting a row when we click on the button DeleteParent, using deleteRecord method without any arguments, we can delete the selected parent from the treegrid. To maintain the selection after the deletion you can use selectRow method.

Please refer to the below sample.
https://stackblitz.com/edit/angular-mq3akj?file=app.component.ts

Please refer to the below documentation,
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#deleterecord
https://ej2.syncfusion.com/angular/documentation/api/treegrid/#selectrow

Kindly get back to us for further assistance. 
Regards,
Jagadesh Ram 



MS Michal Szkudlarek October 28, 2021 02:22 PM UTC

Thank you.

Unfortunately I do not want to delete selected record, I want to delete a record, which not necessarily is selected (rarely it will be the selected record). So deleteRecord is not an option for me.

In your example, if you do:

this.treegrid.deleteRecord('taskID', {taskID:1});


Only one row is deleted, not all children ( although deleteRecord() deleted all children). I'm looking for a way to delete arbitrary record with children regardless of selection.

Also, when I call:


this.treegrid.deleteRecord();
this.treegrid.selectRow(0);


Top row is not selected, it blinks for a fraction of a second and then goes to other row



JR Jagadesh Ram Raajkumar Syncfusion Team October 29, 2021 01:08 PM UTC

Hi Michal, 

Thanks for the update.

Based on your query, to delete a record with its children without selecting any records you can use the below code. To select a row after the deletion operation, use a small time delay as mentioned in the below code.

Code: 
[app.component.ts] 
 
    click(){ 
        this.treegrid.deleteRecord('taskID',this.treegrid.getCurrentViewRecords()[0]); 
        setTimeout(() => { 
            this.treegrid.selectRow(0); 
        },2); 
     
    } 


Regards,
Jagadesh Ram 



MS Michal Szkudlarek October 29, 2021 01:13 PM UTC

Timeout is not an option, because:
 - tree will select a different row for a fraction of a second. Selecting a different row for a fraction of a second triggers a backend action in my system and changes UI view for a user. I want to void this.

Any way to disable this auto focus change which comes with delete record?

About deletion itself - what is:
this.treegrid.getCurrentViewRecords()[0]

I want to delete row with children based on primaryKey, not by index.



JR Jagadesh Ram Raajkumar Syncfusion Team November 1, 2021 01:07 PM UTC

Hi Michal, 

Thanks for the update.

Query 1: Any way to disable this auto focus change which comes with delete record? 

Based on your query, kindly share with us upon which action do you disable auto focus change on deleting the record. Please be specific in the order of actions done in treegrid to get your desired output(Share any replication steps or Video demo about the specific scenario).

Query 2: delete row with children based on primaryKey. 

To delete the parent and children records using PrimaryKey please use the following code to delete the parent row and a child row. To delete multiple children you need to add their PrimaryKey field with its value as an array of objects to the arguments of deleteRecord method.

Code:  
[app.component.ts] 
….
this.treegrid.deleteRecord('taskID',[{taskID:1},{taskID:2}]); 

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

Kindly get back to us for further assistance. 
Regards,
Jagadesh Ram 



MS Michal Szkudlarek November 3, 2021 08:02 AM UTC

Thanks.

I understand that I can delete many records, but traversing the tree just to get all children nodes (it can have multiple levels) is cumbersome. I might end up with a deleteRecord with an array of 1k elements. Please raise an improvement request in the backlog - option to use deleteRecord with primaryKey which would delete node + all children.

On the second subject, you do not need a video, you can use your own stackblitz example.


Changes to make:

click() {
this.treegrid.deleteRecord('taskID', [{ taskID: 6 }, { taskID: 7 }]);
setTimeout(() => {
this.treegrid.selectRow(0);
},2);
}

onSelectionChanged(event): void {
console.log(event.rowIndex);
}



and in ejs-treegrid add

(rowSelected)="onSelectionChanged($event)"


Reproduce steps 1:
- select node Design
- click delete parent button
- observe the console

It will write to console id 5 then id 0. This means that selecting row 5 was triggered. Selection of row with id 5 is not wanted. In my case selecting a row triggers backend call and UI changes.

Reproduce steps 2 (this one is not always visible, but give it a try few times;
- select node 'Plan timeline'
- click delete parent button
- observe the console

Sometime you will see:
0 and 1 being triggered
and sometimes
1 and then 0 being triggered.











JR Jagadesh Ram Raajkumar Syncfusion Team November 3, 2021 08:46 AM UTC

Hi Michal, 

Thanks for the update.

Query 1: To deleteRecord with primaryKey which would delete node + all children.

We are currently validating your requirement and will provide details by November 8th,2021. Until then we appreciate your patience.

Query 2: Disable the autofocus that happens when deleting a row 
 
When a row is selected and deleted, the treegrid will reselect the row which now has the same index as the previously selected and deleted row. This is the default behavior of the treegrid. To disable this you can use actionComplete and rowSelecting event to prevent the treegrid from again reselecting the row. 

And as per your requirement we have selected the row with 0th Index using selectRow method. 

Please refer to the below sample.
Sample: https://stackblitz.com/edit/angular-mq3akj?file=app.component.ts

Kindly get back to us for further assistance. 

Regards,
Jagadesh Ram 



JR Jagadesh Ram Raajkumar Syncfusion Team November 8, 2021 12:50 PM UTC

Hi Michal, 

Thanks for your patience. 

Further analyzing, we have confirmed this as Bug  “Deleting parent and child using deleteRecord method with primaryKey doesn't delete all children” and logged it as Bug at our end. At Syncfusion, we are committed to fixing all validated defects (subject to technical feasibility and Product Development Life Cycle ) and will promise to include the fix in our weekly patch release which is expected to be rolled out on November 24th, 2021. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.    

Regards,
Jagadesh Ram 



JR Jagadesh Ram Raajkumar Syncfusion Team November 24, 2021 01:14 PM UTC

Hi Michal, 
Due to unforeseen circumstances, we are unable to include the fix as promised in the current patch release. We would include the fix in the upcoming patch release which is scheduled to be rolled out on December 1st, 2021. Until then we appreciate your patience.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.
https://www.syncfusion.com/feedback/30159/deleting-parent-and-child-using-deleterecord-method-with-primarykey-doesnt-delete 

Regards,
Jagadesh Ram 



PS Pon Selva Jeganathan Syncfusion Team December 2, 2021 02:42 PM UTC

Hi Michal,  
 
We deeply regret for the inconvenience caused.   
 
We have internally fixed the below issue  “Deleting parent and child using deleteRecord method with primaryKey doesn't delete all children”. The fix for this issue will be included in our Volume 4 release. We will update once the patch is rolled out. 

Please get back to us if you need any further assistance. 
 
Regards, 
Pon selva 



FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 20, 2021 02:15 PM UTC

Hi Michal,  
 
We appreciate your patience. 
 
We are glad to announce that we have provided support for “Deleting parent and child using deleteRecord method with primaryKey doesn't delete all children”” in our Volume 4 2021 Main release ("v19.4.0.38"). and is available for download under the following link. 
  
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 
Farveen sulthana T 


Loader.
Up arrow icon