CODEWITHSUNDEEP
javascriptjqgrid
Jemp
Jemp

Reputation: 351

JQGrid - Changing the width of a column dynamically

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?

Upvotes: 6

Views: 36335

Answers (5)

Arun Pratap Singh
Arun Pratap Singh

Reputation: 3646

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

Upvotes: 2

Chintan Gor
Chintan Gor

Reputation: 1072

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

Upvotes: 0

Temka
Temka

Reputation: 108

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

Upvotes: 4

Piyush Sardana
Piyush Sardana

Reputation: 1758

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

Upvotes: 13

r.piesnikowski
r.piesnikowski

Reputation: 2951

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

Upvotes: 5

Related Questions