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:

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:

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.

Fabio

hmm.. maybe some absolute positioning and z-index could solve this.. – Nurmi

Tried playing about with that, but no luck. I wouldn't call myself a CSS expert tho :P – Fabio

@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)? – Irena

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 – Fabio

@Cocowalla: I still don't full understand the problem which you have. Look at the demo 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? – Irena

@Irena 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 – Fabio

@Irena I just hacked together an image that demonstrates (hopefully) what I want to achieve (in the edited question) – Fabio

Answer 1

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

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:

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

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.

Irena

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 – Fabio

@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") then call dataInit. Later it set some additional attributes (like here) add "editable" class (see here... – Irena

@Cocowalla: It placed the control inside of the cell after all of that (see here). 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. – Irena

@Cocowalla: I posted the feature request after writing the previous comments and wrote UPDATED part to my answer. – Irena