Remove row after successful delete on view bound datagrid

I've created page with a DataGrid set to get data from a view and I've enabled deleting of rows on the grid. When an item gets successfully deleted, the row stays in the datagrid instead of being removed.

This works fine when the DataGrid is bound directly to the table. Just for test purposes, I've created the view to have the same schema as the table because if I get the same data directly from a table, deleting works as expected.

For now, I've made a workaround to retrieved the data again after a successful delete by invoking the datasource again, but that takes an extra request that may be unnecessary. Am I missing something?


Indeed Radzen handles this automatically when a DataGrid is bound to a data source method which returns a table e.g. getXXX where XXX is the name of the table e.g. for GET /odata/Northwind/Products the key is Products. This works behind the scenes by using an internal cache - the cache key is that XXX (table name). I suspect your method uses a different key hence the automatic item deletion doesn't work.

Getting the items is a viable workaround. To avoid the extra request you can try removing the data item from the page property to which your data-grid is bound. After invoking the deleteXXX data source method add a new action with Type: Set property and Value: ${yourProperty.filter(item => item.Id != event.Id)} where yourProperty is the page property which the DataGrid's Data is set to and Id is the primary key of the table.

Thanks for a quick reply. This works great!
I just changed:

${yourProperty.filter(item => item.Id !== event.Id)}

:frowning: of course, you are right. It should have been != - I will update my original response to avoid confusing anybody else.

What if it is a View and not a table with a Key, will it still work ?

You have to somehow filter out the deleted item. Or just invoke the load() method of the datagrid so it fetches the latest data from the database - use Execute Code action with this.grid0.load() (where grid0 is the Name property of the DataGrid) - similar to the code in the Load event of the page.

With lots of data this would be not that desirable, it would be a nice feature to mark a grid as not bound to a datatable and just invoke a remove from grid cache .

With lots of data this would be not that desirable,

The Radzen DataGrid always retrieves a single page of data.

just invoke a remove from grid cache .

This is done automatically when one uses a datatable. Radzen uses the key to find the removed data item. For views this obviously can't be done easily - there is no key to identify the record by.

By the way how are you deleting the data item if it doesn't have an id? Perhaps you can use the same approach to filter the data..

Well, I have derived the view from the actual database table containing the data with other database tabels to extend the data to tabels without a database relation .
I’m just calling the delete CRUD generated page with te column containing the key field

Does that mean that the key field is part of the view? If this is the case then my original reply should work.

Yes the key :key: is part of the view, but the solution you suggested does not work.

Do you have plans to improve the IDE to have more space for the code part ? The new column editor is by the way a huge step in improving the productivity,
Bigger or movable debug console would also improve on productivity and troubleshooting .

Yes the key :key: is part of the view, but the solution you suggested does not work.

What happens when you run that code? It should work as long as everything is spelled right and the key column is present.

When executed : the row is deleted from the database : and a notification is given on screen : the row remains in the grid however.
the id column is included in the grid columns but hidden, could this be the issue ?

No, this shouldn't be an issue. The code filters the actual data. Are you sure it actually runs? You can use Execute Code with console.log(event) to see what the event argument is. Also a similar action can be use to see what the property your DataGrid is bound-to contains.

For me, filter delete row didn't work. I had a dto collection as grid source, in order to solve the RadzenGrid.Reload() problem, I had to fetch data from database (into dto collection) each time I add or delete a row. I don't know why, edit row worked without problem.