jQuery Grid Plugin - jqGrid

Hi Tony,

I have a more or less simple suggestion how to achive real 100% input width when doing inline/cell editing. Currently, you set input width to 98%, as a dirty/partial workaround for a input width issue (when set to 100% it stretches out of cell boundaries). I say partial, because depending on user's CSS inputs may still pierce out of the cell or simply look unaligned.

So, I suggest to wrap text input in a div, and move input's borders, padding and background to this parent div (all issues disappear). I've made the following modifications:

grid.common.js

jQuery(elem).css({width:"98%"});

changes into

elem =  $('<div class="twrap"></div>').append(elem).get(0);

 grid.inlinedit.js

$(elc).addClass("editable")

changes into

if (elc.tagName=='DIV') $(elc).children().addClass("editable"); else $(elc).addClass("editable");

and in the CSS I've added the following (for example):

Voila! Tested in FF3, IE6/7, everything works... In grid.celledit.js a small fix is also necessary for

window.setTimeout(function () { $(elc).focus();},0);

for example,

window.setTimeout(function () { $(':input',cc).focus();},0);

dunno about other places, I guess you can know better.

Generally, 100% width of an input inside %-width table cell can be a really pain-in-the-ass problem in IE6/7, which I learnt how to cure via usage of multiple wrappers and positioning, but here in the jqGrid it's not a big deal because of the fixed column widths.

my 0.02 euro 😉