JqGrid - grouping fields in an edit form
Can some fields be grouped in an edit form?
I would like to group multiple fields together, give them a generic name, and give the group some different background color and maybe even a border so the user can navigate easily.
Suppose I have 4 entries in colModel:
name
address
title
income
I would like to show it in an edit form like:
Personal:----------
| name [ ] |
| address [ ] |
-------------------
Business:----------
| title [ ] |
| income [ ] |
-------------------
where fields belonging to a Personal Group / Category would have - say, a light green background and fields in a Business Group would have a light red background.
The difficulty is that there are many fields, and I would not want them to display the background color individually. And if there are groups, then I could even use some jQuery anti-aliasing plugin to allow the user to hide some of the groups.
I am currently struggling with a custom_element creating some table around the group, but have no success yet.
Decision
As Tony pointed out to the jQuery Grid help forum:
This feature is not currently available or is finally adding features like this to take advantage of fsome events and knowledge of the edit form structure.
In the next major release, we plan to introduce a template in form editing.
So there is no other solution like Oleg's suggestion (thanks for the quick answer :).
I solved (partially) my problem using his idea. Adding a hrule containing the table rows in the edit form and finally styling the rows one by one.
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 *******
are the names of the columns from colModel.
Adding borders and smoothing them is too difficult, so now it will be skipped.
source to share
What you can do is almost free modification of the add or edit form inside the beforeShowForm callback. I am showing an idea with a demo which I quickly did for you. This example shows an example of what you can do:
Corresponding code
$.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 have set $.jgrid.edit
only to change beforeShowForm
for both "Add" in the "Edit" forms. 'amount'
and 'closed'
used in .insertBefore('#tr_amount'))
and insertBefore('#tr_closed')
are column names from colModel
.
source to share