jQgrid Inside Tabs - Solution2

Set parent container display to block before plotting and then reset the same.

by Dipak1991

HTML

<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Nav tabs -->
<div class="main-wrapper">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a>

        </li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a>

        </li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a>

        </li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a>

        </li>
    </ul>
    <!-- Tab panes -->
    <div class="tabs-content-wrapper">
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <table id="grid1"></table>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">
                <table id="grid2"></table>
            </div>
            <div role="tabpanel" class="tab-pane" id="messages">
                <table id="grid3"></table>
            </div>
        </div>
    </div>
</div>

CSS

.main-wrapper {
    width: 50%;
}
.hidden-wrapper {
    /* same width as main-wrapper. */
    width: 50%;
    visibility: hidden;
}

JavaScript

var data = [{
    status: "<div class='editable-control'><a class='username nopadleft'>Pending</a></div>",
    name: "<div class='editable-control'><a class='username nopadleft'>MMR</a></div>",
    given: "<div class='editable-control'><a class='username nopadleft'>Robert Atkinson</a></div>",
    location: "<div class='editable-control'><a class='username nopadleft'>Left Arm</a></div>",
    date: "<div class='editable-control'><a class='username nopadleft'>12/12/2014</a></div>",
    trash: "<span class='icon icon-trash'></span>"
}, {
    status: "<div class='editable-control'><a class='username nopadleft'>Refused</a></div>",
    name: "<div class='editable-control'><a class='username nopadleft'>Varicella</a></div>",
    given: "<div class='editable-control'><a class='username nopadleft'>Cathy Lee</a></div>",
    location: "<div class='editable-control'><a class='username nopadleft'></a></div>",
    date: "<div class='editable-control'><a class='username nopadleft'>12/12/2014</a></div>",
    trash: "<span class='icon icon-trash'></span>"
}, {
    status: "<div class='editable-control'><a class='username nopadleft'></a></div>",
    name: "<div class='editable-control'><a class='username nopadleft'>Influenza</a></div>",
    given: "<div class='editable-control'><a class='username nopadleft'>Ronold Bolken</a></div>",
    location: "<div class='editable-control'><a class='username nopadleft'>Right Arm</a></div>",
    date: "<div class='editable-control'><a class='username nopadleft'>12/12/2014</a></div>",
    trash: "<span class='icon icon-trash'></span>"
}, {
    status: "<div class='editable-control'><a class='username nopadleft'>Refused</a></div>",
    name: "<div class='editable-control'><a class='username nopadleft'>Help B</a></div>",
    given: "<div class='editable-control'><a class='username nopadleft'>Jonny Desouza</a></div>",
    location: "<div class='editable-control'><a class='username nopadleft'></a></div>",
    date: "<div class='editable-control'><a...