how to make jqgrid responsive on hidden of left menu panel in bootstrap

Question

I want to make jqgrid responsive with bootstrap, but how to resize jqgrid when left menu panel is hidden because when left menu is hidden on button click, window.resize function is not getting called only when we change browser size resize function is called .For reference please visit this site Jqrid demo

In this example if we hide left menu jqgrid will simply move to left instead of covering whole window screen and if you check datatables example it will move to left and occupy whole area datatables

Button in reference http url is next to text search for something

My example

html code

Left panel hide when click on anchor tag

<!-- Left panel code start to hide unhide left panel-->
<div class="navbar-header">
     <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
</div>

<!-- Left panel code end to hide unhide left panel-->

<!-- Left Panel Start --> 
<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li>
                <a href="index-2.html"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
                <ul class="nav nav-second-level collapse">
                    <li><a href="index-2.html">Dashboard v.1</a></li>
                    <li><a href="dashboard_2.html">Dashboard v.2</a></li>
                    <li><a href="dashboard_3.html">Dashboard v.3</a></li>
                    <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
                    <li><a href="dashboard_5.html">Dashboard v.5 <span class="label label-primary pull-right">NEW</span></a></li>
                </ul>
            </li>
        </ul>
   </div>
</nav>
<!-- Left Panel End-- > 

<!-- Jqgrid div -->
<div class="container-fluid">
    <table id="table_list_1"></table>
</div>

Java Script

<script>
    $(document).ready(function () {

        // Examle data for jqGrid
        var mydata = [
            { "Id": "1", IsActive:"N", CategoryName: "Name 1", "ComboDuration": "83123a" },
            { "Id": "2", IsActive:"N", CategoryName: "Name 3", "ComboDuration": "83432a" },
            { "Id": "3", IsActive:"N", CategoryName: "Name 2", "ComboDuration": "83566a" }
        ];

        // Configuration for jqGrid Example 1
        $grid = $("#table_list_1");
        $grid.jqGrid({
            data: mydata,
            datatype: "local",
            autowidth: true,
            rowList: [10, 20, 30],
            colNames: ["", "Active", "Name", "Duration"],
            colModel: [
                { name: "act", template: "actions" },
                { name: "IsActive", align: "center", sortable: false},
                { name: "CategoryName", sortable: false },
                { name: "ComboDuration", align: "center", sortable: false,
                    classes: "hidden-xs", labelClasses: "hidden-xs" }       
            ],
            autoResizing: { compact: true },
            cmTemplate: { editable: true, autoResizable: true },
                iconSet: "fontAwesome",
            jsonReader: {
                id: "Id",
                repeatitems: false
            },
            autowidth: true,
            rownumbers: true,
            sortname: "Id",
            caption: "Categories",
            viewrecords: true
        }).jqGrid("filterToolbar");

        $(window).bind("resize", function () {
            $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
        }).triggerHandler("resize");
});

jquery method called on left menu hide/unhide

   $('.navbar-minimalize').click(function () {

    // how to resize grid from here below code do not resize jqgrid
$("#table_list_1").jqGrid("setGridWidth", $("#table_list_1").closest(".container-fluid").width());
$("#table_list_1").triggerHandler('resize')
    $("body").toggleClass("mini-navbar");
    SmoothlyMenu();

});
</script>

Answer 1

There are many different definition of "responsive" element. Even bootstrap allows you different variations. In general you need just call setGridWidth on some event, which it important for you: hiding some element on the page or resize of the window. Look the answer with the demo which uses Bootstrap class "hidden-xs" do define that the column should be hidden on small grid.

To make wrapping of column headers you need to add the CSS rule white-space: pre-wrap; on .ui-th-column>div, described in the answer. If you need to add wrapping of the text inside of the grid body then you can add the same rule on .ui-jqgrid-btable .jqgrow>td too:

.ui-th-column>div,
.ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

See the modified demo http://jsfiddle.net/OlegKi/andm1299/26/