9

We are using the jQuery('#grid').editRow() feature of jqGrid, that allows you to edit fields in a row inline.

Does jqGrid support inline editing of multiple rows at once, where I can make changes on multiple rows and then submit all at once?

We are trying to avoid having to make changes to each row one by one and do a separate "round trip" to the server to commit each time, for cases were we want to bulk edit a number of fields for a number of records and have a single "commit".

Cœur
  • 37,241
  • 25
  • 195
  • 267
leora
  • 188,729
  • 360
  • 878
  • 1,366

3 Answers3

8

Inline editing of multiple rows is not implemented by jqGrid. You can use local editing and post all the changes to the server manually, but you will have to implement the submit of all changes yourself.

I personally would not implement such behavior in my projects. The reason is that I think that the web site should always support concurrency (optimistic concurrency have the most sense). In the case if one person try to submit the changes to the server, the server can answer with the concurrency error: some other person have already modified the data. In the case the grid data should be refreshed and the editing of row should be repeated. I see problems with implementing of editing of multiple rows in case of the usage of optimistic concurrency. How would the error messages look like? If many rows are changed how the error message should look like? What should the user do in case of error? Should he/she repeat the full changing of the data? Where are the benefit from the users point of view?

The submitting of the editing of one row was almost immediately in all jqGrid implementations which I had. So I see no need to do multiple rows at once in the projects. Disadvantages for the user in case of concurrency errors are larger as advantages from "round trip" reduction. Because of very good connection to the server the sending of the data is not a problem in environments of my customers.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I like your answer. If it is absolutely required to change batches of rows at once, I would rather do an SQLite local storage and data synchronization with merging. It is, of course, a bit of a challenge to write, but fun :) – Alex Pakka May 17 '11 at 19:48
  • There is also http://stackoverflow.com/questions/3373103/using-jqgrid-with-html5-local-database/ for some pointers... interestingly, there is not much info on using local data with jqGrid – Alex Pakka May 17 '11 at 20:01
  • @Alex Pakka: Thanks for your assistance. I agree, that the problem can be much more database problem as jqGrid only. The solution way can be depend on the customer environment. About the question http://stackoverflow.com/questions/3373103/using-jqgrid-with-html5-local-database/ I am not quite agree with you. Local sorting and filtering of jqGrid is pure JavaScript solution and it is very slow already starting with about 1000 rows. Web SQL Database/Indexed DB or any other **native** database implementation on the client side can have much better performance. – Oleg May 17 '11 at 21:35
  • oh yeah, sure, "local" was only meant to stop jqGrid from hitting the network. All the sorting and searching/querying should be done outside of the jqGrid via event binding. Not sure how it will play out though, some jqGrid code hacking is probably required... interesting project on itself. – Alex Pakka May 20 '11 at 05:58
1

Inline editing of multiple rows is not possible in original JQGrid implementation. What the original implementation does is, every row which you edit and lose focus will be submitted.

Instead, create a custom implementation like this: 1. Override(Extend) the existing grid.inline.js and write your own edit rows and save rows. 2. In the edit rows function, configure in such a way as to add the dirty rows (edited) to be collected separately. 3. In the save rows function, you can submit only the dirty rows to the server.

And for preventing the concurrent updation of same data, you can have version control mechanism in either of the following ways: 1. Have a version field (hidden) for all the rows. When a row becomes dirty, increment the version field. 2. When submitting the rows, check for the version number existing and the new one. If there is a mismatch, intimate to the user/ update the existing. (This, you can implement quite easily)

That's it! Hope that was useful! :-)

Satish Kumar
  • 331
  • 2
  • 7
  • 3
    For the optimistic concurrency will be typically use additional column with `rowversion` or `timestamp` type which will be updated automatically (at least in MS SQL) or per trigger. The problem which I see is not to detect the concurrency error, but to display the error for the user. Let us the user updated 10 rows at once and you detect that the rows number 2, 7 and 10 were modified by another user. Which action should be done? Changes in other rows could be committed. The contain of rows 2, 7 and 10 should be reloaded and the user should repeat the changes on the rows. How you plan to do it? – Oleg May 13 '11 at 10:25
  • It would be nice to show the differences in what the user modified and what changes exist in the modified rows. It can be that by the other user **other row field** were modified so the changes can **do** committed. It could be real conflicts exists. How to display (to mark) exactly the rows with conflicts for the user? Mark it red? How to display the fields with conflicts? If one just discard the changes and display the error message only one can have hard problem. The user could not be able to reproduce the changes or could think that some work is done, but it isn't. Such problems I'm afraid – Oleg May 13 '11 at 10:31
1

I don't know very much jqGrid, however I made this simple test (I might be missing something):

  1. Go to jqGrid demo page http://www.trirand.com/blog/jqgrid/jqgrid.html
  2. Load Road editing / Basic example page.

  3. Run this code manually:

    jQuery("#rowed1").jqGrid('editRow', '11');
jQuery("#rowed1").jqGrid('editRow', '12');
jQuery("#rowed1").jqGrid('editRow', '13')

  4. Edit the three rows

  5. Run this code manually:

    jQuery("#rowed1").jqGrid('saveRow', '11');
jQuery("#rowed1").jqGrid('saveRow', '12');
jQuery("#rowed1").jqGrid('saveRow', '13');

Of course the url parameter is required and I think you could use the callback option to gather all the edited rows.

Hope this helps

marcosfromero
  • 2,853
  • 17
  • 17