JQGrid problem with tabs and frozen columns
two grids in jqueryui tabs, if using frozen columns the headers on the hidden tab are overwritten by the first row of data.
by danypd69
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<div id="tabs">
<ul>
<li><a href="#tab1">Grid 1</a></li>
<li><a href="#tab2">Grid 2</a></li>
</ul>
<div id="tab1">
<table id="grid1"></table>
</div>
<div id="tab2">
<table id="grid2"></table>
</div>
</div>
JavaScript
$(document).ready(function () {
$("#tabs").tabs();
$("#grid1").jqGrid({
datatype: 'local',
colNames: ['Header1', 'Header2', 'nf1', 'nf2', 'nf3', 'nf4', 'nf5', 'nf6'],
colModel: [
{ 'name': 'frozen1', width: 50, frozen: true},
{ 'name': 'frozen2', width: 50, frozen: true},
{ 'name': 'nf1', width: 80},
{ 'name': 'nf2', width: 80},
{ 'name': 'nf3', width: 80},
{ 'name': 'nf4', width: 80},
{ 'name': 'nf5', width: 80},
{ 'name': 'nf6', width: 80}
],
width: 400,
height: 200,
shrinkToFit: false
});
$("#grid1").jqGrid('setFrozenColumns');
fillGrid("#grid1");
$("#grid2").jqGrid({
datatype: 'local',
colNames: ['Header1', 'Header2', 'nf1', 'nf2', 'nf3', 'nf4', 'nf5', 'nf6'],
colModel: [
{ 'name': 'frozen1', width: 50, frozen: true},
{ 'name': 'frozen2', width: 50, frozen: true},
{ 'name': 'nf1', width: 80},
{ 'name': 'nf2', width: 80},
{ 'name': 'nf3', width: 80},
{ 'name': 'nf4', width: 80},
{ 'name': 'nf5', width: 80},
{ 'name': 'nf6', width: 80}
],
width: 400,
height: 200,
shrinkToFit: false
});
$("#grid2").jqGrid('setFrozenColumns');
fillGrid("#grid2");
});
function fillGrid(id) {
for (var idx = 1; idx < 10; idx++) {
$(id).jqGrid("addRowData", idx, { frozen1: 'Frozen1', frozen2: 'Frozen2', nf1: 'Free1', nf2: 'Free2', nf3: 'Free3'});
}
}