Take the 2-minute tour ×

jqGrid edit and add forms render every field in separate row. If there are more fields than fit to screen, edit form height is greater than screen. Bottom edit fields are not visible and cannot edited. Form cannot resized since resizer in lower right corner is outside screen.

How to allow editing of all fields ? Is it possible to render more than one field in row, add horizontal scrollbar to edit form or other idea ?

        grid.navGrid("#pager", { }, { url: '<%= Url.Action( "Edit", "Grid") %>',
            savekey: [true, 13],
            recreateForm: true, // required for textarea datainit
            closeOnEscape: true,
            closeAfterEdit: true,
            errorTextFormat: function (response) { return response.responseText; },
        }, ...
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

You can try to use Edit/Add option like

afterShowForm: function($form) {
    $form.css({overflow: 'scroll'});

to force the usage of the scroll bar in the form or to change the CSS for form.FormGrid with the same overflow: scroll value.

You can try to use different values of height and width property of the Edit/Add option (see the documentation).

Probably you can solve the problem just by setting of the cols and rows attributes:

edittype:'textarea', editoptions: {rows:"10",cols:"80"}

for the corresponding column (see the documentation)

share|improve this answer
thank you very much. I was able to solve the issue by using dataheight: screen.height-200, –  Andrus Jul 7 '11 at 8:34
@Andrus: You are welcome! –  Oleg Jul 7 '11 at 8:57
What if I want to change the CSS of the ADD form other then the css of the JQGrid ? –  Bhavik Ambani Aug 13 '12 at 5:06
add comment

Your Answer


