CODEWITHSUNDEEP
jqgrid
Sarath
Sarath

Reputation: 2844

Resize last column in jqgrid

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.

Upvotes: 3

Views: 3421

Answers (5)

linnewbear
linnewbear

Reputation: 1

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.

Upvotes: 0

Jurijs Kastanovs
Jurijs Kastanovs

Reputation: 685

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.

Upvotes: 1

Ilya Kr.
Ilya Kr.

Reputation: 31

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#

Upvotes: 3

ted
ted

Reputation: 57

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.

Upvotes: 0

Justin Ethier
Justin Ethier

Reputation: 134275

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.

Upvotes: 0

Related Questions