Display form controls above table when inline editing with jqGrid

Question

I'm using jqGrid with inline editing enabled. Problem is that the contents of some of the fields are quite long, and by default the field is not large enough to be usable:

jqGrid textarea - how it is now

What I want to do is set a fixed width for the textarea, and have it expand to be visible above the table when it gets focus. Something like this:

jqGrid textarea - how I want it to look

I can set the CSS for the textarea in editoptions:dataInit, but if I just increase the width, the right hand side of the textarea gets clipped off at the end of the table cell. I guess I can fix this with some clever CSS?

BTW, I know that a popup editor would probably make more sense for this, but the client is insisting that it remains an inline editor.

hmm.. maybe some absolute positioning and z-index could solve this.. — ffffff01, Sep 04 '12 at 15:36
Tried playing about with that, but no luck. I wouldn't call myself a CSS expert tho :P — Cocowalla, Sep 04 '12 at 15:49
@Cocowalla: Do you have a live demo which demonstrate the problem? Which web browser you used for the tests? What behavior you want to have in the textarea? Would be enough if you set fixed height of the textarea (like to hold 5 rows or to be 50px)? — Oleg, Sep 04 '12 at 16:05
I don't have a live demo (I'm using Lib.Web.Mvc, which would make such a thing tricky on the web, as this is an internal web app). Problem is the same in IE and FF. It's not enough to set the height of the text area, it must be wider too — Cocowalla, Sep 04 '12 at 16:40
@Cocowalla: I still don't full understand the problem which you have. Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/textareaedit.htm) for example. I set the height of the editing row to 5 rows. By the way you can resize the height of the textarea in Chrome and the row height will be automatically adjusted. Is the problem which you have exist on the demo too? What behavior you want to have in the textarea from the editing row? — Oleg, Sep 04 '12 at 18:27
@Oleg The problem is more the *width* than the height. We are displaying a lot of columns in the table, and so the width of the column is quite narrow. When we click on the field it opens the textarea at the same width as the column - but I want the textarea to be displayed *wider* than the column, without resizing the column — Cocowalla, Sep 04 '12 at 18:35
@Oleg I just hacked together an image that demonstrates (hopefully) what I want to achieve (in the edited question) — Cocowalla, Sep 04 '12 at 18:43

score 3 · Accepted Answer · edited May 23 '17 at 12:19

If I understand your requirements correctly you want to have textarea which are larger as the corresponding cell of the grid. In the case I could suggest you to change position of textarea to "absolute". In the case one can resize to textarea and have results like

enter image description here

How you can see the large textarea will overlap the other input controls. To make able to modify all input fields and to make the input in textarea more comfortable I suggest additionally to use jQuery.resizable(). So one will be able to resize the textarea:

enter image description here

You will find the corresponding demo here. The most important part of the code is below:

onSelectRow: function (rowid, status, e) {
    var $this = $(this);
    if (rowid !== lastSel) {
        if (lastSel) {
            $(this).jqGrid('saveRow', lastSel);
        }
        lastSel = rowid;
    }
    $this.jqGrid('editRow', rowid, {
        keys: true,
        oneditfunc: function(id) {
            var $textareas = $("#" + id + " textarea");
            $textareas.each(function() {
                var $textarea = $(this);
                $textarea.css({position: "absolute", zIndex: "auto", width: "200px"});
                $textarea.position({
                    of: $textarea.parent(),
                    my: "left top",
                    at: "left top",
                    offset: "1 1"
                });
                $textarea.resizable();
                // now we fix position of the resizable wrapper which is
                // the parent of the textarea after calling of .resizable()
                $textarea.parent().css({
                    "padding-bottom": "0px",
                    "padding-right": "0px"
                });
                // change focus to the control from the clicked cell
                $("input,select,textarea", e.target).focus();
            });
        }
    });
    return true;
}

In the above code I used additionally the trick with setting focus on the clicked cell like I described originally in the answer.

To make the differences of my suggestions to the standard jqGrid behavior more clear I suggest to compare the above demo with the following one which display

enter image description here

UPDATE: After writing of the answer I posted the feature request to trirand. One of the most problems in the implementation of the above suggestion was that one can't move the code which set position of textarea to "absolute" full into dataInit. The suggestion in the feature request will make it possible.

Perfect! I'm sure I tried setting position to absolute before, but must have been doing something wrong. BTW, I set this in editoptions:dataInit instead of `editRow` — Cocowalla, Sep 05 '12 at 09:20
@Cocowalla: The problem of `dataInit` is that it will be called **before** the control will be placed on the page. So first jqGrid just create the control with [document.createElement("textarea")](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L299) then call [dataInit](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L269). Later it set some additional attributes (like [here](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.common.js#L308)) add `"editable"` class (see [here](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.inlinedit.js#L79)... — Oleg, Sep 05 '12 at 09:42
@Cocowalla: It placed the control inside of the cell after all of that (see [here](https://github.com/tonytomov/jqGrid/blob/v4.4.1/js/grid.inlinedit.js#L81)). So You can'd do many things inside of `dataInit` directly. One uses `setTimeout` as the workaround in many cases. I find the problem as the common design problem of jqGrid. In the demo I used `oneditfunc` callback which will be called *after the control is full initialized*. Inside of `dataInit` you will get `null` as the parent of the `element` and can't execute the required code. — Oleg, Sep 05 '12 at 09:42
@Cocowalla: I posted [the feature request](http://www.trirand.com/blog/?page_id=393/feature-request/calling-of-datainit-and-dataevents-after-the-control-are-placed-on-the-page/#p27265) after writing the previous comments and wrote **UPDATED** part to my answer. — Oleg, Sep 05 '12 at 10:25

Display form controls above table when inline editing with jqGrid

1 Answers1

Linked