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?

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

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

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

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