使用Bootstrap在ASP.NET MVC中布局jQGrid

Question

I have this line of code in _Layout.cshtml

<div class="row">
    <div class="col-md-10">
        @RenderBody()
    </div>
</div>

Every view in the project uses that file and they all render fine.

There an issue with one particular view which uses DataTables and jQGrid and it has this code in it:

<div style="margin-bottom: 10px">
    <h3 style="display: inline">Blah ...</h3>
</div>

<div>
    <table style="width:100%" id="updateHistoryTable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>
                    Id
                </th>
                <th>
                    Name
                </th>
                <th>
                    Join Date
                </th>
                <th>
                    End Date
                </th>
                <th>
                    Status
                </th>
                <th>
                    History
                </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>
<br />
<br />
<div id="statusHistoryDiv">
        <table id="statusHistoryTable"></table>
    </div>
</div>

JS to setup the jQGrid:

$("#statusHistoryTable").jqGrid(
        {
            datatype: "local",
            data: statusHistoryData,
            colNames: ["Id", "Name", "Date Time", "Status"],
            colModel: [
                { name: "Id", key: true },
                { name: "Name" },
                { name: "DateTime" },
                { name: "Status", width: "150px" }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager2',
            sortname: 'Id',
            viewrecords: true,
            sortorder: "desc",
            caption: "Status History",
             ....
}

I tried width: null but that makes the grid show nothing.

The DataTables grid renders fine but the jQGrid renders leaving out a negative space towards the right.

How do I get the second grid the same size as the first one without the -ve space?

Answer 1

First of all you use wrong value width: "150px" for Status column. The width value should number. So the correct value will be width: 150 . On the other side the default value for width is already 150 (see the value in "Default" column in the table ). So you can see that the width of the grid which you created is 650px (4*150 for 4 columns and 30 for the column created because of using rownumbers: true option). To increase the width you can use autowidth: true option additionally. It will get the width of outer div (div#statusHistoryDiv) and extend the width of columns proportionally to width values of columns (the same 150 value in your case). You can add resize event handler which calls setGridWidth if you like to make the grid responsive. See the answer for the simplest implementation. If you need support IE8 then you would write the code a little longer, but I'm not sure whether you need it.