First of all, you should probably use other values of width
for all columns. You current values will be expanded to 2000px
. It is better to directly set the correct value.
It seems to me that you should use shrinkToFit: false
parameter of jqGrid. You should take into consideration some bugs in the width calculation of jqGrid (this and this). If you use the developer version of jqGrid you can use the corresponding bug fixes which I posted: this or this. If you use standard minimized version of jqGrid you can fix the problem just by setting the correct width
of the jqGrid.
In your example with character wrapping you forgot to use !important
after the height: auto
setting.
I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.
The new demo with the word wrapping is here. the code is the following:
var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;
grid.jqGrid({
...
});
// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var ts = $(this);
ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});
It use the following CSS
th.ui-th-column div {
white-space: normal !important;
height: auto !important;
padding: 2px;
}
and produce the following picture
(I included <br/>
after every character in the first column to make the text "Inv No" by placed on many rows).
Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):
You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>
) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div
to the following
th.ui-th-column div {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
we will receive the following results (see the demo here)
By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as
So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/>
inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.
Best Answer
I personally find the question very good. I make many suggestions how to improve the algorithm of calculation of the grid width. Twice I included the behavior like you want in my suggestions, but Tony (the developer of jqGrid) removed the part of the changes.
To implement your requirements in the current version of jqGrid is very easy, but the code uses some internal grid structures. So you should verify whether the same trick will work in the next versions too. The code of the
resizeStop
callback can be the following:The demo shows live how it works.
The complexity of the common solution for the jqGrid is higher because one needs sometimes to hold specified width of the grid. My point of view here is the following: if the user specify the
width
option during the grid initialization (creating) then he want to hold the width. On the other side if nowidth
option are specified during creating of the grid one wish (like you as wish) the calculation of the total width of the grid based on the sum of the widths of all columns. In the case if some column width will be changed, the grid width should be adjusted (recalculated) too. The problem is only that the original emptywidth
option will be overwritten during the grid creating. My suggestion would be to save the original value ofwidth
option in thewidthOrg
option during the grid creating. So one will be able to test the original value ofwidth
option and to choose the best behavior of the grid resizing after the column resizing.UPDATED: After some discussion with you in comments and debugging of jqGrid code I hope that I found the solution which works correctly independent from the value of
shrinkToFit
parameter. The solution consists from changing the code ofresizeStop
to the followingand changing of two lines of internal
showHideCol
method of jqGrid. It's first changing of the lineto
and changing of another line
to
You can get modified version of jqGrid here. The first demo uses the code with
shrinkToFit: true
and the second demo uses the same code, but without the optionshrinkToFit: true
.I though in the next day how to make the fix working also in case of the usage fixed
width
option of jqGrid at the creating time and will post my suggestion to the trirand forum.If you want uses minimized version of jqGrid you can either minimize it yourself or use the original jqGrid minimized version and overwrite only the
showHideCol
method with respect of$.jgrid.extend
. See the demo.UPDATED: After changes of the value of
this
in later versions of jqGrid one should change the above code ofresizeStop
callback to about the following: