View Full Version : Performance issue: deleting several rows on a grid

25 May 2007, 7:52 AM

I have a grid of 100+ rows with 2 string columns and 6 specific renderer columns.
When I delete several lines (~20) in same time I have a big performance issue ... CPU 100% and time script delay pb.

I delete rows using this:

var rows = myGridSelectionModel.getSelections();
var nb = rows.length;
for(var i=0;i<nb;i++)

To improve performance I thought "to stop the renderer display" of the grid until the end of the update. But is it possible ? Is there another way ?


25 May 2007, 9:20 AM
There are a couple issues. If you delete like that it's possible you'll get an array index out of bounds b/c you can run past the end of your array as it shrinks. You should delete in reverse index order.

The gridview listens for remove and gets called each time to manipulate the table, essentially removing the TR and readjusting - this could be slow. You could experiment with a couple things.

1- Unhook the view's remove listener, delete the rows, then call view.refresh to repaint the grid.
2- The other possibility would be to directly remove rows from grid.data, then call view.refresh. This would also improve performance b/c you can delete from the array by index and not do the record lookup.

Both of these are untested and may have other side effects - you'll have to study the code to see what else might need to be tweaked.

25 May 2007, 11:09 AM
What you need exactly?

I removed many rows at once, but I use Grid.getDataSource().reload() to apply this to view layer.

25 May 2007, 12:39 PM
Yep I do the same as Davis here.

I send the selected ID array to the server side with a XHR call and refresh the dataStore once that is done.

25 May 2007, 11:30 PM
using ds.remove removes each Record seperately, and each remove notifies the Grid's View which has to update. As we know, rendering the current GridView is quite heavy.

If you don't have to notify any server-side component, you can remove them all directly from the Store's "data" MixedCollection, and then fire the Store's "datachanged" event. Possibly the remove() method should take an Array or Records to do batch removes and just fire "datachanged" at the end of the batch. That would be an enhancement request.

But if the server needs to know to actually change the database, do as Bernad suggested and just pass the id's back, have the server do it's stuff, then reload the store from the server.

28 May 2007, 5:24 AM
Thank you Animal. I do what you suggest and it works fine.

My code looks like that now:

var rows = myGridSelectionModel.getSelections();
var nb = rows.length;
for(var i=0;i<nb;i++) myGridDataStore.data.remove(rows[i]);
myGridDataStore.fireEvent("datachanged", myGridDataStore);