jqueryjqgridfree-jqgrid

Delete multiple rows in Free-jqGrid with local grid (4.15)


I see many reference implementations here for achieving the ability to delete more than 1 selected rows in jqGrid.

However, all these implementation eventually do an iteration over a list of row ids and call delRowData in each of them.

when one is selecting say 1000 rows, this is not scaling well, as it seems we are waiting o(n) for every row deletion, resulting on o(n^2) for the entire operation.

is there a way to delete ALL selected rows with one single o(n)?

(One post I read was to send it over to the server and simply reload the all thing from scratch, as the overall saving in time is dramatically high. I'm looking for a built in method within the jqGrid itself)

Thanks,

Tal.


Solution

  • I start with common remark. It's not recommended to display more rows on the page as it will be possible to display at once. The performance of the grid with, for example, 10000 rows and 25 rows per page is essential better comparing with the usage 1000 row per page.

    In any way, common changing of multiple rows of data in the local grid is not usage delRowData or addRowData. It's much more effective to replace the whole data. Typical code will be

    var grid = $("#grid"),
        p = grid.jqGrid("getGridParam"); // get reference to all parameters
    
    p.data = newdata; // replace data parameter
    grid.trigger("reloadGrid");
    

    So I'd suggest you to get the copy of the data (or you have the data outside the grid already), remove the items with the ids, which need be removed, set new value of p.data and trigger reloadGrid to display the first page of modified data.

    By the way, usage of delRowData is much slowly as you described. The reason is web browser reflow. If you have the page with for example 1000x10 elements and you delete only the first row (you change 10 elements), then web browser have to recalculate css styles (for example position) of practically all existing elements on the page. Then deleting of the second row would be almost exactly so complex. Thus, the usage of delRowData or addRowData in the loop would be very ineffective. During reloading the grid jqGrid build the whole grid body as one HTML fragment and place it on DOM of the page in one operation. Because of that reloading of the grid could be very quickly.