Question

It is possible to group some fields in the edit form?

I would like to group some fields together, give them a summarizing name and give the group some different background color and maybe even border so the user can navigate more easily.

Suppose I have 4 entries in the colModel:

name
address
title
income

I would like to show it in the edit form like:

Personal:----------
| name     [    ] |
| address  [    ] |
-------------------
Business:----------
| title    [    ] |
| income   [    ] |
-------------------

where the fields belonging to the Personal group/category would have – let’s say – light green background and fields in the Business group would have light red background.

The difficulty is that there are lots of fields and I wouldn’t want to give them background color on a one-by-one basis.
And if there are groups then I could even use some collapse jQuery plugin to let the user to hide some of the groups.

Right now I’m struggling with custom_element creating some table around the group but no success yet.

---

Solution

As Tony pointed out on the jQuery Grid help forum:

Currently this feature is not available or at last adding such functionality requiere to use fsome events and knowledge of the structure of the edit form.

We plan in the next major release to introduce a templating in form editing.

So now there is no other solution like the one proposed by Oleg (thanks for the quick reply:).

I solved (partially) my task using his idea. Adding hrule containing table rows in the edit form, and finally styling the lines one-by-one.

The relevant parts:

$('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2"><hr/></td></tr>').insertBefore('#tr_********,');
$("#tr_*******,#tr_*******").css("background-color","#def");

Where the ******* are the column names from the colModel.

Adding borders and making it collapsible is way too much fuss this way, so that will be skipped for now.

Answer 1

What you can do is almost free modifying of Add or Edit form inside of beforeShowForm callback. I demonstrate the idea on the demo which I quickly made for you. The example shows just an example of what you can do:

The corresponding code is

$.extend($.jgrid.edit, {
    recreateForm: true,
    beforeShowForm: function($form) {
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Invice information (all about money):</b></div></td></tr>')
           .insertBefore('#tr_amount');
       $('<tr class="FormData"><td class="CaptionTD ui-widget-content" colspan="2">' +
           '<hr/><div style="padding:3px" class="ui-widget-header ui-corner-all">' +
           '<b>Delivery information:</b></div></td></tr>')
           .insertBefore('#tr_closed');
    }
});

I set $.jgrid.edit only to change beforeShowForm for both “Add” in “Edit” forms. The 'amount' and 'closed' used in .insertBefore('#tr_amount')) and insertBefore('#tr_closed') are the column names from the colModel.