JQGrid - Changing the width of a column dynamically

Question

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?

Candlemas

This answer gives a nice plugin to do that : #20012865 – Morceau

Answer 1

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

Poyssick

This solution works, except that I needed to use "widthOrg" instead of "width" in the call to 'setColProp'. – Catalano

this solution wont work in jqgrid 4.5.2... in the source it explicty says that. – Wilsonwilt

This solution and telb's remark on widthOrg still work for jqGrid 4.5.4 (the current version). – Ratable

Answer 2

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');})

Ritenuto

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. – Push

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 – Einkorn

Answer 3

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])

Altonaltona

Answer 4

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]);})
        }
}

Lola

Answer 5

$('#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

Einkorn