Grid with checkbox selection how to clean persisted state?

[Cesar Smerling]

Hi!

I have a grid with the combo box selection and the persisted state set to true, because I have sorting and filtering in that grid.

But I add and removes rows dynamically, I want that the rows removed also be removed from the selection persisted state.

Is there a way to access that persisted state?

Thanks.

[Balaji Sekar]

Hi Cesar, 

 

Thanks for your valuable patience. 

 

We have created a sample with provided the information but we did not face the mentioned issue at our end.   

 

please refer the below sample for more information. 

 

Sample: https://stackblitz.com/edit/angular-msunrc  

 

If you still facing same problem in your end, please share the below details to us that will help to validate further. 

 

1. Share the complete Grid rendering code. 

 

2. Replicate the reported problem in above sample. 

 

3. Ensure the Syncfusion package version. 

 

4. Share the video demonstration of the problem. 

 

Regards, 

Balaji Sekar 

[Cesar Smerling]

Hi!

https://stackblitz.com/edit/angular-msunrc-lewqjl-rupkyo-usm7au-2rxjuc-ckgkz7?file=app.component.ts

I added to the example two buttons that represents my use case.

My use case is that my grid I add/remove rows refreshing all the grid (changin an array in the data source).

When a row is removed then the user could add it again (is an external component that modifies the array data source), the row have the same id so the persistedState maintain that the row is selected.

To test it in the example above:

1- Select the row with order id 10248

2-Press remove button -> the row is removed

3-Press add row button -> the row with order id 10248 is added again an it's selected. (I want it to remove it from the persistedState too)

Because I have filters, sorting and so, I need to use the persistedState to true, so I was asking is there is a way to access that persistedState to remove the selected row when the row is removed?

Anyway I managed to apply my own checkbox column that works better, that also solves a problem mentioned in another ticket about weird selection with arrows ands keys.

Ticket link: https://www.syncfusion.com/forums/reply/160520

[Cesar Smerling]

Here is the link to the example, the other doens't work:

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

[Balaji Sekar]

Hi Cesar, 

 

Thanks for your update. 

 

We have validated your query with provided the information and we suspect that you have faced selection retaining while add new row with removed data value but we are unable to replicated report problem in our end so please video demonstration of the problem and share to us that will help to validate further. 

 

Regards, 

Balaji Sekar 

[Cesar Smerling]

Hi, sorry I pass the wrong link example.

https://stackblitz.com/edit/angular-msunrc-qmwj9n?file=app.component.html

To test it in the example above:

1- Select the row with order id 10248

2-Press remove button -> the row is removed

3-Press add row button -> the row with order id 10248 is added again an it's selected. (I want it to remove it from the persistedState too)

[Rajapandi Ravi]

Hi Cesar, 

By default in our Grid, we have Crud actions like add, edit, delete. We have the inbuilt methods to handle the Crud actions. You can Perform the CRUD actions with toolbar buttons, or you can perform the CRUD action programmatically by calling the edit service methods. So we suggest you to use our inbuilt methods for performing Crud to resolve your problem. For your convenience we have attached the video demo so please refer them for your reference. 

Video demo: https://www.syncfusion.com/downloads/support/forum/160521/ze/160521-1283934502.zip 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/ 

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

    

        https://ej2.syncfusion.com/angular/documentation/api/grid/#deleterecord 

        https://ej2.syncfusion.com/angular/documentation/api/grid/#startedit 

        https://ej2.syncfusion.com/angular/documentation/api/grid/#endedit 

        https://ej2.syncfusion.com/angular/documentation/api/grid/edit/ 

Regards, 

Rajapandi R 

[Cesar Smerling]

Hi!

The Add Order and Remove Order buttons in the example is a simulatin of how our grid works, refreshing the entering dataSource array.

Add/Remove doensn't help, it makes the creation of the rows more complicated because I have to check between the current dataSource and the new array that is coming wich row will have to be remove, wich one to add. And the Add/Remove method in the grid do a "refresh" so is that same for me.

The problem is not the Add/Remove, the problem is the persistedState that I cannot clean it.

Thanks

[Balaji Sekar]

Hi Cesar, 

 

To prevent the checkbox selection in the added record we suggest you to use updatePersistDelete internal method from Grid’s selectionModule. 

We have called updatePersistDelete method by passing the primaryKey value of deleted record while delete action in the Grid through external button click so please refer the below code example and sample for more information. 

[app.component.ts] 

 removeOrder() { 

    //Simulates removing the row refreshing all the rows 

    const filteredOrders = [...orderDetails].filter( 

      order => order["OrderID"] !== 10248 

    ); 

    this.grid.dataSource = filteredOrders; 

    this.grid.selectionModule.updatePersistDelete(10248); // you can ignore the persistence of deleted record using this method with pass PrimaryKey value 

  } 

Sample link: https://stackblitz.com/edit/angular-msunrc-hchtlg  

 

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

 

Regards, 

Balaji Sekar