6

I understand that the width of each column of jqgrid is defined using colModel parameter. Assuming I want to resize a column after I click a button, how can I perform this?

Jemp
  • 351
  • 3
  • 7
  • 18
  • This answer gives a nice plugin to do that : http://stackoverflow.com/questions/20012365/how-to-adjust-the-column-width-of-jqgrid-after-the-data-is-loaded/20030652#20030652 – ezaeza Apr 02 '14 at 12:50

5 Answers5

13

You can set the new width of the column using two methods – setColProp and setGridWidth.

Here is example of setting new width of the column amount:

$("#mygrid").jqGrid('setColProp','amount',{width:new_width});

var gw = $("#mygrid").jqGrid('getGridParam','width');

$("#mygrid").jqGrid('setGridWidth',gw);

P.S. Note that in order to work this a shrinkToFit should be true, or you should call setGridWidth with second parameter true

Piyush Sardana
  • 1,748
  • 4
  • 19
  • 33
  • 2
    This solution works, except that I needed to use "widthOrg" instead of "width" in the call to 'setColProp'. – telb Oct 04 '13 at 16:16
  • 1
    this solution wont work in jqgrid 4.5.2... in the source it explicty says that. – jorrebor Nov 18 '13 at 15:44
  • This solution and telb's remark on `widthOrg` still work for jqGrid 4.5.4 (the current version). – Alexey Dec 24 '13 at 23:20
5

Hello this can be done in two steps:

a) Change width of header cell:

$('.ui-jqgrid-labels > th:eq(0)').css('width','200px')

b) Change width of cells in column:

$('#grid tr').find("td:eq(0)").each(function(){$(this).css('width','200px');})

r.piesnikowski
  • 2,911
  • 1
  • 26
  • 32
  • 3
    Using something like this `$('#grid').parents('.ui-jqgrid-view').find('.ui-jqgrid-labels > th:eq(0)').css('width','200px');` will only change a specified grid [eg: $('#grid')] instead off all grids if you have more than one. – Micah Oct 26 '12 at 23:33
  • 1
    Awsome , in my case these two lines are Woking `$('#list_requisitos tr').find("td:eq(4)").each(function(){$(this).css('width','200px');}) $('.jqg-first-row-header').find("th:eq(4)").each(function(){$(this).css('width','200px');})` this is because I tried lot but in shrinkFit = ON this is the only way for spacific column width – Chintan Gor Nov 26 '15 at 09:47
4

This code doesn't affect on table view, only change width property of column in colModel: 

$("#[grid_id]").jqGrid('setColProp','[column_name]',{width:[new_width]});

Yo can change column width dynamically with this ([column_index] starts from 1): 

$('#[grid_id]_[column_name], #[grid_id] tr.jqgfirstrow td:nth-child([column_index])').width([new_width])
Temka
  • 108
  • 1
  • 4
2

Example, if you have many columns to change:

In this case, after the jqgrid is getting built, you can just go to the table getting generated and manually change all the column widths of column header and the respective data without writing tedious code.

        var tabColWidths ='70px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px|125px';

function reDefineColWidth(){
        var widthsArr = tabColWidths.split('|');

    for(var j=0; j < widthsArr.length ; j++ ){
            $('.ui-jqgrid-labels > th:eq('+j+')').css('width',widthsArr[j]);
            $('#grid tr').find('td:eq('+j+')').each(function(){$(this).css('width',widthsArr[j]);})
        }
}
Matt
  • 25,467
  • 18
  • 120
  • 187
Arun Pratap Singh
  • 3,428
  • 30
  • 23
0
$('#gbox_list_requisitos').css('width','1300px');
$('#gview_list_requisitos').css('width','1300px');
$('#gview_list_requisitos').css('width','1300px');
$('.ui-state-default').css('width','1300px');
$('.ui-jqgrid-hdiv').css('width','1300px');
$('.ui-jqgrid-bdiv').css('width','1300px');
$('#pager_requisitos').css('width','1300px');

Here is my answer It can be fixed I was facing same problem like in shrinkFit = true, I got 2 horizontal scroll bars and this solution is working, instead of 1300 you can use window width

my table id is list_requisitos and pageer id is pager_requisitos

Chintan Gor
  • 1,062
  • 2
  • 15
  • 35