jQuery Grid Plugin - jqGrid - Topic: Making a MultiColumn Form for Edit

markw65 on Making a MultiColumn Form for Edit

Thu, 08 Oct 2009 21:41:13 +0300

Nathan said:

On a side note, can a field span two columns ? For example a large memo field with two columns worth of input fields listed above?

There doesnt seem to be builtin support for this, but its quite easy to do it yourself using eg beforeShowForm. Here's what Im using:

"beforeShowForm" : function(form) {
                form = $(form);
                $("tr", form).each(function() {
                    var inputs = $(">td.DataTD:has(input,select)",this);
                    if (inputs.length == 1) {
                        var tds = $(">td", this);
                        tds.eq(1).attr("colSpan", tds.length - 1);
                        tds.slice(2).hide();
                    }
                });

My form is layed out so that each row either has a single element, which I want to be the full width of the form, or it has multiple elements, which I want to leave alone.

So I check for exactly one input or select in the row, if found, I set the colspan of td 1 to be equal to the number of tds-1 (ie, the rest of the row), and hide the following tds. You would need to adapt the above to your own layout...

Mark

Nathan on Making a MultiColumn Form for Edit

Thu, 08 Oct 2009 19:50:42 +0300

Thanks for the reply. I was using version 3.4 which does not support colpos/rowpos. I have subsequently updated my version for this project, rather seemlessly I might add 🙂 Good work !

On a side note, can a field span two columns ? For example a large memo field with two columns worth of input fields listed above?

Nathan

Rumen[Trirand] on Making a MultiColumn Form for Edit

Thu, 08 Oct 2009 03:18:32 +0300

Tony just messaged me that there could be an easier way to do it, that is built-in into jqGrid. Please, take a look at this Wiki article

http://www.trirand.com/jqgridw.....mmon_rules

and the formoptions part of it in particular. rowpos and colpos might be exactly what you need.

Hope this helps.

Rumen[Trirand] on Making a MultiColumn Form for Edit

Thu, 08 Oct 2009 01:59:24 +0300

Out of the box no, but you could probably modify the javascript source to at least provide scrollbar. If you use FireBug, you will see that the Edit Dialog Window is essentially a div with id "editmodeeditgrid" and has overflow:hidden. Overflow:hidden essentially hide the scrollbar, so just modifying this in javascript sources will address this.

<div class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1" id="editmodeditgrid" style="overflow: hidden

Of course, you could probably create another layout (2, 3 columns, etc) but it will require more tweaking.

Hope this helps.

Nathan on Making a MultiColumn Form for Edit

Wed, 07 Oct 2009 10:27:34 +0300

Hi:

I have a form for editting data posted to a grid. Works great except that the form is really long and scrolling the window does not scroll the form. The way to see the bottom of the form is to drag it up more and finish the data entry. Tedious and annoying to say the least.

Is there means to make the form controls appear in more than one column ?

ie:

Name: __________________ Date: ________________

.... lots of other fields

Submit Cancel

Any help here would be great !

Thanks,

Nathan