I don’t know if you managed to find a solution, however here is my approach to variable column widths based on column contents.

Add this to the gridComplete event :

$(this).parent().append(‘‘);

gridName = this.id;

$(‘#gbox_’ + gridName + ‘ .ui-jqgrid-htable,#’ + gridName).css(‘width’, ‘inherit’);
$(‘#’ + gridName).parent().css(‘width’, ‘inherit’);

var columnNames = $(“#” + gridName).jqGrid(‘getGridParam’, ‘colModel’);
var thisWidth;

// Loop through Cols
for (var itm = 0, itmCount = columnNames.length; itm < itmCount; itm++) {

var curObj = $(‘[aria-describedby=’ + gridName + ‘_’ + columnNames[itm].name + ‘]’);

var thisCell = $(‘#’ + gridName + ‘_’ + columnNames[itm].name + ‘ div’);
$(‘#widthTest’).html(thisCell.text()).css({
‘font-family’: thisCell.css(‘font-family’),
‘font-size’: thisCell.css(‘font-size’),
‘font-weight’: thisCell.css(‘font-weight’)
});
var maxWidth = Width = $(‘#widthTest’).width() + 24;
//var maxWidth = 0;

// Loop through Rows
for (var itm2 = 0, itm2Count = curObj.length; itm2 < itm2Count; itm2++) {
var thisCell = $(curObj[itm2]);

$(‘#widthTest’).html(thisCell.html()).css({
‘font-family’: thisCell.css(‘font-family’),
‘font-size’: thisCell.css(‘font-size’),
‘font-weight’: thisCell.css(‘font-weight’)
});

thisWidth = $(‘#widthTest’).width();
if (thisWidth > maxWidth) maxWidth = thisWidth;
}

$(‘#’ + gridName + ‘ .jqgfirstrow td:eq(‘ + itm + ‘), #’ + gridName + ‘_’ + columnNames[itm].name).width(maxWidth).css(‘min-width’, maxWidth);

}

$(‘#widthTest’).remove();

 

Here’s a working example : http://jsfiddle.net/Ba5yK/17/

Regards,

 

Paul

I know this question is old, but the reply is a clunky and slow.

Here’s a CSS approach:

http://jsfiddle.net/Ba5yK/11/

Add this to the grid definition (change the name of gridName to that of your grid)

beforeRequest: function () {
  setTimeout(function () {
    var gridName = ‘grid’;
    $(‘#gbox_’ + gridName).css({
      position: ‘absolute’,
      top: 0,
      bottom: $(‘#gbox_’ + gridName + ‘ .ui-pager-control’).outerHeight() + ‘px’,
      width: ‘100%’,
      height: ‘100%’
    });
    $(‘#gbox_’ + gridName + ‘ .ui-jqgrid-view’).css({ ‘height’: ‘100%’ });

    $(‘#gbox_’ + gridName + ‘ .ui-jqgrid-bdiv’).css({
      position: ‘absolute’,
      top: $(‘#gbox_’ + gridName + ‘ .ui-jqgrid-titlebar’).outerHeight() + $(‘#gbox_’ + gridName + ‘ .ui-jqgrid-hbox’).outerHeight() + ‘px’,
      bottom: 0,
      left: 0,
      right: 0,
      height: ”,
      width: ”
    });

  }, 100);
}