Question

Before I dive deep into using jqGrid I have a few questions that others who have already invested a lot of their time into it might answer.

1. Does it support easy/simple hidding of certain columns, like for instance, in an application users have the option to choose their own settings, and they might set some column to hidden? Does this require conditional rendering of JS, HTML and data preparation (in MVC controllers)?
2. Is it possible to use it without the AJAX POSTing functionality, for instance, when we edit a row (inplace or dialog) we just update the HTML (to be exact, the DOM) but we don’t AJAX POST anything yet until doing the “full” postback?
3. In general, is it suitable for cases where our data does not yet exist in the datastore (we are creating it on the fly and the data will be inserted after postback)?

You might consider the scenario where we have a create new invoice form and as a part of the invoice there are multiple invoice items. These of course cannot be saved prior to saving the invoice (we need the invoice to attach the items to it). So what I do now is postback the entire form, create the invoice and then enumerate table items to insert invoice items.

Hopefully someone who already worked heavily with jqGrid will know the answers.

Answer 1

1) jqGrid column definition support hidden:true proprty which hide the corresponding column. You can use setColProp method to set the column dynamicaly. If you want allow the user to choose the order of columns or hide some columns you can use columnChooser for this.

2) You can use jqGrid to display or modify the local data. Inline editing and cell editing support this. You should use editurl:'clientArray' in case of inline editing and cellsubmit:'clientArray' in case of cell editing (see example from this answer for example). Form editing has not full local editing support without any AJAX requests to the server, but use can use dummy server url to implement local editing also with the form editing (see the jqGrid demo, select on the left size “New in version 3.7” and then “Add/edit/delete on local data”).

3) You can use jqGrid to display or modify the local data and not only for the data loaded from the database. To do this use use datatype parameter set to "local", "jsonstring", "xmlstring" and use data or datastr option to fill the data. I prefer to use datatype:"local" and initialize the grid contain with the data parameter.