how to split no of fields in add/edit form into leftside and right jqgrid when number of fields are more

Question

Please check the table to understand requirement.Since number of fields are more i want to shift few fields in right side of add form.

 **label field.**
 <table>
      <tr><td>label</td><td>input field</td></tr>
     </table>

  What i am expecting is in format:

  **label field label2 field2**

     <table>
      <tr>
       <td>label</td><td>field</td>
       <td>lablel2</td><td>field2</td>
     </tr>
     </table>

Could any one please assist me . Thanks in advance

Answer 1

The trick is the usage of rowpos and colpos properties of formoptions. In the answer you can find the demo which demonstrate the technique.

If you have really many columns it could be not enough place on the screen even after the usage of multiple columns. In the case you can restrict the height of the Add/Edit form by usage of dataheight option. The disadvantage of the approach is the setting of explicit value of height CSS style on the data part of the editing form. The better way is setting of max-height which value you can calculate based on the screen resolution. For example you can make the changes inside of beforeShowForm callback

beforeShowForm: function ($form) {
    $form.css({"max-height": 0.70*screen.height + "px"});
}

The demo demonstrate the approach. In the same way you can set max-width too.

To show the results I used both dataheight and beforeShowForm. In the final solution you should remove the dataheight part of the settings.