How can I have multiple fields on the same line in a jqGrid edit form?

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?

score 1 · Accepted Answer · edited May 23 '17 at 12:19

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.

Thanks for your answer, I am already using beforeShowForm and afterShowForm for other reasons, but I didn't think of using it to manipulate the positions of the elements and such. The problem is, all the elements are mapped to my colModel, so if every tr has an id like you suggested, and jqGrid expects to find these in separate rows, wouldn't it complain if I moved another input field on the same row? — AsGoodAsItGets, Jul 26 '11 at 08:35
@AsGoodAsItGets: I updated my answer with additional information. — Oleg, Jul 26 '11 at 09:06
It worked fine, although in my case it was a bit more complicated. Thanks again! — AsGoodAsItGets, Jul 27 '11 at 08:50
@AsGoodAsItGets: You are welcome! It's always so that the reality are more complex as demos. I wanted to show you only the approach how you can implement your requirements. — Oleg, Jul 27 '11 at 09:06

How can I have multiple fields on the same line in a jqGrid edit form?

1 Answers1