jqgrid - resize columns doesn't work in bootstrap modal - jqgrid

Question

based of this answer
I have a bootstrap modal that I used that function for that.
Here is the code:
Modal view file:
<div class="modal modal-wide fade" id="mo-selector-dialog" title="<bean:message key="add.ex"/>">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Add</h4>
</div>
<div class="modal-body">
<table id="moTable"></table>
<!-- <div id="pager"></div>-->
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Modal call in js file:
$('#add-link').click(function(){
$('#mo-selector-dialog').css("display", "block");
$('.mo-backdrop').css("display", "block");
mc$('#mo-selector-dialog').modal({show:true});
$('body').css("overflow-y", "hidden");
});
jqgrid:
$moGrid.bind("jqGridAfterLoadComplete jqGridRemapColumns", function () {
var $this = $(this),
$cells = $this.find(">tbody>tr.jqgrow>td"),
$colHeaders = $($.map(this.grid.headers, function (item) { return item.el; })).find(">div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
cellLayout = $this.jqGrid("getGridParam", "cellLayout"),
iCol,
iRow,
rows,
row,
n = $.isArray(colModel) ? colModel.length : 0,
cm,
colWidth,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
if (cm.hidden) {
continue;
}
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth(true) + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth(true));
}
}
$this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));
}
});
$moGrid.jqGrid({
height: 400,
url: 'ex/list',
sortname: 'bDt',
colNames: IS.mo.columnDisplayNames,
colModel: IS.mo.colModelDef,
beforeSelectRow: shiftSelect,
gridview: true,
rowattr: function (rd) {
return rowStyle(rd);
},
beforeRequest: IS.filter.applyFilter($moGrid, $('input, select', filterForm), IS.mo.listFilterValues),
onSelectRow: function(id, status) {
$('#messageBox ul').empty();
if (status){
var ids= $moGrid.jqGrid('getGridParam','selarrrow');
for (var i = 0; i < ids.length; i++)
{
var rowId = ids[i];
var rowData = $moGrid.jqGrid ('getRowData', rowId);
global_selectedGroupMRowData.push(rowData);
}
}else{
global_selectedGroupMRowIds.splice($.inArray(id, global_selectedGroupMRowIds), 1);
for(var i=0; i<global_selectedGroupMRowData.length; i++){
if (global_selectedGroupMRowData[i].id==id){
global_selectedGroupMRowData.splice(i, 1);
}
}
//global_selectedGroupMRowData.splice($.inArray($("#moTable").jqGrid('getRowData',id), global_selectedGroupMRowData), 1);
}
},
onSelectAll: function(aRowids, status) {
$('#messageBox ul').empty();
if (status){
for (var i = 0; i < aRowids.length; i++)
if ($.inArray(aRowids[i], global_selectedGroupMRowIds) == -1) {
global_selectedGroupMRowIds.push(aRowids[i]);
global_selectedGroupMRowData.push($("#moTable").jqGrid('getRowData',aRowids[i]));
}
} else {
for (var i = 0; i < aRowids.length; i++) {
global_selectedGroupMRowIds.splice($.inArray(aRowids[i], global_selectedGroupMRowIds), 1);
global_selectedGroupMRowData.splice($.inArray(aRowids[i], global_selectedGroupMRowData), 1);
}
}
},
loadComplete: function() {
var arraysize = global_selectedGroupMRowIds.length;
if (arraysize>0){
for (var i=0; i<arraysize; i++) {
$("#moTable").setSelection(global_selectedGroupMRowIds[i], false);
}
}
getEditPage('#moTable');
$("#moTable").find('#pager_left,#pager_center,#pager_right').hide();
}
});
It works to other pages that aren't modal. Just inside the modal it doesn't work.
Any idea?

Answer 1

I suppose that the problem can be fixed by changing the line
$this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));
so that colWidth will be increased to this.p.cellLayout (cellLayout parameter which equal to 5) if $.jgrid.cell_width is true:
$grid.on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
var $this = $(this),
$cells = $this.find(">tbody>tr.jqgrow>td"),
$colHeaders = $($.map(this.grid.headers, function (item) { return item.el; })).find(">div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
cellLayout = $this.jqGrid("getGridParam", "cellLayout"),
iCol,
iRow,
rows,
row,
n = $.isArray(colModel) ? colModel.length : 0,
cm,
colWidth,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
if (cm.hidden) {
continue;
}
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth(true) + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth(true));
}
}
$this.jqGrid("setColWidth", iCol, colWidth + ($.jgrid.cell_width? cellLayout: 0));
}
});
The demo uses Bootstrap 3.2 and Font Awesome 4.2. Another demo uses the same code to autowidth of columns and it works too.
UPDATED: See one more demo.