Question

Normally in a jqGrid edit form, every field is on a separate line, label on the left, field input on the right. However, in some of our grids, we have fields which the users would like to appear next to each other in the edit form, because they are logically related, e.g. quarter and year in one line with one label on the left.

The only way I see this being possible is by using a custom formatter with edittype:'custom' in which case the two or more fields will have to be split/merged when loading/saving respectively.

Sort of resorting to this horrendous and tedious approach, is there a better/easier way to do this?

Answer 1

You can use beforeShowForm or afterShowForm to modify the form.

You should take in considerations, that the form data will be placed in the <table> having id like "TblGrid_"+grid_id. The rows of the table has ids like tr_myCol where the name 'myCol' is the value of the name property from the corresponding grid column from colModel. So you can append the <tr> element with new <td> element with an additional information which you need. Of cause you should probably increase the value of the width property of the form.

The old answer could be probably helpful for you.

UPDATED: If you examine the code of jqGrid you will find the following code fragments in the getFormData of grid.formedit.js:

$("#"+frmtb+" > tbody > tr > td > .FormElement").each(function(i) {
    ...
    switch ($(this).get(0).type) {
        ...
        case "text":
            postdata[this.name] = $(this).val();
    ...
}

So it is only important that the input, select and other input elements stay somewhere inside of and <td> cell of the same table of the form. The input element for the "invdate" column for example will have (in simplified form)

 <input class="FormElement" name="invdate" type="text">

So it has already all fields which you need. You can reorder the input field like you as want. You can add additional <tr> or <td> elements or remove it. You can for example reduce the table to one <tr> and one <td> cell and place all input fields and labels inside the cell. It seems to me that the Edit form will stay working without any problem.

So you can really make a lot of modifications in the Edit/Add forms.