jqgrid - resize columns doesn't work in bootstrap modal

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?

The description "inside the modal it doesn't work" is not clear enough. What exactly "doesn't work"? You posted only my old code in the text of the question. It would be more helpful if you post *your* code with the bootstrap modal instead. The demo (in jsfiddle for example) which demonstrates the problem could clear many questions. I recommend you additionally update the code of `setColWidth` from [here](https://github.com/OlegKi/jqGrid-plugins). Look at other plugins and demos (like [this one](https://github.com/OlegKi/jqGrid-plugins/blob/master/demos/FontAwesome4_Bootstrap3_1.htm)). — Oleg, Oct 18 '14 at 22:37

Oleg · Answer 1 · 2014-10-21T06:50:27.587

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.

Thank you very much for the answer. I added my code to this question. I also changed the the code as you mentioned to this answer. It still doesn't work. The modal open but the columns are not re-size. I am really stuck on this page. — amanda chaw, Oct 21 '14 at 04:54
@amandachaw: You are welcome! I can't reproduce your problem. See [one more demo](http://www.ok-soft-gmbh.com/jqGrid/FontAwesome4_Bootstrap3_3.htm). — Oleg, Oct 21 '14 at 06:51

jqgrid - resize columns doesn't work in bootstrap modal

1 Answers1

Linked