jQuery Grid Plugin - jqGridForum

Topic RSS

Making a MultiColumn Form for Edit

07/10/2009
10:27

Nathan

Member

Members

Forum Posts: 37

Member Since:
20/03/2009

Offline

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

08/10/2009
01:59

Rumen[Trirand]

Moderator

Members

Moderators

Forum Posts: 81

Member Since:
08/10/2009

Offline

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.

Trirand ASP.NET WebForms & MVC components based on jQuery & ThemeRoller

http://www.trirand.net

08/10/2009
03:18

Rumen[Trirand]

Moderator

Members

Moderators

Forum Posts: 81

Member Since:
08/10/2009

Offline

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.

Trirand ASP.NET WebForms & MVC components based on jQuery & ThemeRoller

http://www.trirand.net

08/10/2009
19:50

Nathan

Member

Members

Forum Posts: 37

Member Since:
20/03/2009

Offline

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

08/10/2009
21:41

markw65

Member

Members

Forum Posts: 179

Member Since:
30/07/2009

Offline

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

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
174 Guest(s)

Currently Browsing this Page:
1 Guest(s)