I find your question interesting, but you should not expect a simple solution. There are many reasons why no simple solution exist.
First of all jqGrid is jQuery plugin and not jQuery UI Widget. It uses just jQuery UI CSS Framework. So jqGrid uses no jQuery Widgets like Tabs, Dialog, Button, Tooltips, Datepicker, Autocomplete and so on. Even Effects or Position utility will be not used. One can integrate jqGrid in solutions which uses the Widgets, but it don't uses there internally.
The second reason: the structure of editing forms of jqGrid is table oriented. The function getFormData
used by jqGrid internally for getting the results of form editing uses table oriented selectors (see the line and the line)
$("#"+"TblGrid_"+$.jgrid.jqID($t.p.id)+">tbody>tr>td>.FormElement").each(function() {
So you can't just move some input elements in another tab inside of afterShowForm callback for example. In the case getFormData
will work incorrectly and no editing results will be send to the server.
What you can do pragmatically instead is the usage of grouping of data by interesting additional information in the form. See the answer for more details.
Another way would be the usage of colpos
and rowpos
properties of formoptions. See the answer for details.
You can of case combine both from above mentioned approaches.