JQGrid - Dynamically changing column widths

Question

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

Answer 1

You can set a new column width using two methods: setColProp and setGridWidth.

Here is an example of setting a new column width:

 $("#mygrid").jqGrid('setColProp','amount',{width:new_width}); var gw = $("#mygrid").jqGrid('getGridParam','width'); $("#mygrid").jqGrid('setGridWidth',gw); 

PS Note that in order to work with this, shrinkToFit must be true, or you must call setGridWidth with the second parameter true

Answer 2

Hi, this can be done in two steps:

a) Change the width of the header cell:

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

b) Change the cell width in the column:

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

Answer 3

This code does not affect the presentation of the table, just change the width property of the column in colModel :

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

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

 $('#[grid_id]_[column_name], #[grid_id] tr.jqgfirstrow td:nth-child([column_index])').width([new_width]) 

Answer 4

For example, if you have many columns to change:

In this case, after creating the jqgrid, you can simply go to the generated table and manually change all the column heading column widths and the corresponding 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]);}) } } 

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 encountered the same problem as in shrinkFit = true, I have two horizontal scrollbars and this solution works, instead of 1300 you can use the window width

my table id is list_requisitos and page pager_requisitos