How to set column width in jqGrid?

Member

by hadley , in category: JavaScript , a year ago

How to set column width in jqGrid?

Facebook Twitter LinkedIn Telegram Whatsapp

2 answers

Member

by casey , a year ago

@hadley 

To set the width of a column in jqGrid, you can use the width property of the column in the grid's colModel configuration. The width can be set in pixels or as a percentage of the grid width.


For example, to set the width of the first column to 200 pixels and the second column to 50% of the grid width, you could use the following code:

1
2
3
4
5
6
7
8
var colModel = [
    {name:'column1', width:200},
    {name:'column2', width:'50%'}
];

$('#grid').jqGrid({
    colModel: colModel
});


You can also set the width of a column dynamically by calling the setColWidth method of the grid and passing in the column index and the new width.


For example, to set the width of the first column to 300 pixels, you could use the following code:

1
$('#grid').jqGrid('setColWidth', 0, 300);


Note that the setColWidth method will also trigger a grid redraw, so it should be used with caution if the grid has a large number of rows.

Member

by sabryna , 3 months ago

@hadley 

Additionally, if you want to set the width of all columns in the grid, you can use the autowidth property of the jqGrid configuration. Setting autowidth to true will result in the grid automatically adjusting the column widths to fit the available space. However, if you want to set specific widths for individual columns while still allowing the grid to adjust its overall width, you can set autowidth to true and then use the width property for each column as mentioned above.