3

There seems to be a bug in jqgrid, where one can not resize the last column.

This seems to be a quite old issue raised in 2009. I had a look and the latest jqGrid sample seems to have this issue... What I found however was that last column can be dragged to resize the grid itself. See here Go to section what is new in 3.6. Any pointers if this is already fixed.

Sarath
  • 2,719
  • 1
  • 31
  • 39

5 Answers5

3

Seems I found a solution. Resizing of the last column can be done only within the area of the header wrapper (div.ui-jqgrid-hbox). In the outer space resizing process losing focus. Because of existing some padding-right area with default 20 pixels, increasing the size can be done in this small part only. In addition, we need to temporarily cancel table wrapper influence, because he also cause to stop resizing process.

Here is my solution. I assume, that your table wrapper id is gbox_DataTable_u:

1: CSS: define new wide padding-right area:

.ui-jqgrid .ui-jqgrid-hbox {float: left; padding-right: 10000px;}

2: Append 2 events to your grid:

resizeStart:function(event, index){ $('#gbox_DataTable_u').width($('#gbox_DataTable_u').outerWidth() + 10000);}

resizeStop: function(width, index) {$('#gbox_DataTable_u').width($('#DataTable_u').outerWidth());}

Example of working table: http://www.design.atplogic.co.il/aman/philips/users.htm#

Ilya Kr.
  • 31
  • 2
1

I found that the best way is to add an empty unresizable column in the end of the grid. I'm just doing it manually, by extending the colModel right before the execution of jqgrid constructor. Only problem being - I wasn't able to make it not draggable so far.

Here's an example:

colModel.push({align: "left", editable: false, hidden: false, index: "ghostCol", label: " ", name: "ghostCol", resizable: false, sortable: false, type: "text", width: 50});

Hope this helps.

Jurijs Kastanovs
  • 685
  • 1
  • 15
  • 35
0

It is resizing fine for me as well, although you have to resize from the right on the "RTL Support" example, which seems to make sense.

Also be aware that if you are using Chrome, there is a jqGrid bug that causes horizontal scroll bars to appear - see jqgrid-does-not-render-correctly-in-chrome-chrome-frame. This issue has since been resolved, but the demo page has not been updated yet. And it certainly gives the appearance of the last column's resizing not working because you have to scroll all the way over to the right before you can resize the last column.

Community
  • 1
  • 1
Justin Ethier
  • 131,333
  • 52
  • 229
  • 284
  • On further investigation I seem to get what you guys are saying. The last column still does not increase in size. So What I have to do is to increase the last column is reduce the size of other columns. This leaves some space to the right of the grid, which gives me room to increase the last column. I think what this means is that last column can only be increased till the grid width while all other column kind of adjusts the grid width... – Sarath May 30 '12 at 03:45
  • Actually, if you try you will find that you can increase the width of the last column by about a pixel each time. The problem is that the horizontal scrollbar does not scroll with the width increase, so then you have to stop and scroll over by a pixel. You can repeat the process to slowly increase the width of the grid. It is much quicker to do what you suggested though and decrease the width of a column in the middle, adjust the width of the last column, and then resize the middle column again. I agree that all of this is tedious and inconvenient. – Justin Ethier May 30 '12 at 13:30
  • Thanks for taking time and look into this issue.Yes! It is a very tedious. I will try and investigate if I can come up with something neat for the user. – Sarath May 30 '12 at 14:55
0

I have tried to resize the last column with resizeStop, i do some trick like the other guy said. hope it help.

resizeStop(width, index) { var amGrid = $("#jsonmap"), colModel = $("#jsonmap").jqGrid('getGridParam','colModel'); var oW = $oldWidths[index]; var cW = colModel[index+1].width+ downCalSize(oW,width); $oldWidths[index+1] = cW; $oldWidths[index] = width;

$('.ui-jqgrid-labels > th:eq('+(index+1)+')').css('width',cW); $('#jsonmap .jqgfirstrow > td:eq('+(index+1)+')').css('width',cW); var w = amGrid.jqGrid('getGridParam', 'width'); $('.ui-jqgrid-htable').css("width",w); $('.ui-jqgrid-btable').css("width",w); }

i still looking for a common way, can do on more tables in one page and don't affect to each other.

ted
  • 57
  • 2
  • 12
0

After 2 days of struggling...I finally found a way to work around. It seems that jqGrid calculates the resizing object in the dragMove event, where it uses passed event object to get the position of mouse and calculates the new width of resizing column. However when dragging exceeds the grid's boundry, the dragMove event stop shooting... So my work around is simply modifying jqGrid to calculates resizing object again in the dragEnd event. Here's the modified code

first find the dragEnd event.

...
dragEnd: function(e) { // add a new input parameter
this.hDiv.style.cursor = "default";
if(this.resizing) {
    this.dragMove(e); // call dragMove event to calculate resize object 
...

then find the mouseup event where dragEvent is triggerd...

...
$(document).mouseup(function (e) { //  get the event object
if(grid.resizing) { grid.dragEnd(e); return false;}// pass event to dragEnv
    return true;
});
...

Then columns should be able to resize to wherever mouse points.
Hope this would help.

linnewbear
  • 1