JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css">
<script src="http://cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<div id="widget">
<div id="header">ssss</div>
<div id="content">
<div id="grid-container" style="width:100%">
<table id="mygrid"></table>
</div>
</div>
</div>
CSS
#widget {
min-height:200px;
height:400px;
width:300px;
border:1px solid black;
}
#header {
width:100%;
height:25px;
background:#C0C0C0;
}
#content {
height:375px;
}
#grid-container {
height:100%;
}
JavaScript
$(function () {
var colNames = [
"One", "Two", "Three", "Four"];
var colModel = [];
for (index = 0; index < colNames.length; ++index) {
colModel.push({
name: "col" + index,
id: "col" + index,
width: 75
});
}
console.log($('#grid-container').height());
$('#mygrid').jqGrid({
datatype: 'local',
data: getData(),
height: $('#grid-container').height(),
autowidth: true,
shrinkToFit: false,
colNames: colNames,
colModel: colModel,
rownumbers: true,
rownumWidth: 10,
scroll: 1
});
$('#widget').resizable({
handles: "s",
distance: 5,
alsoResize: "#content",
resize: function () {
var $grid = $('#mygrid'),
$gbox = $grid.find(".ui-jqgrid"),
outerHeight = $gbox.height() - $grid.jqGrid('getGridParam', 'height') + 24;
$grid.jqGrid('setGridHeight', $('#grid-container').height() - outerHeight);
},
stop: function (event, ui) {
//that._trigger('resize');
}
});
});
function getData() {
//fake data from http://www.ok-soft-gmbh.com/jqGrid/T.J.Crowder.htm
//thx Oleg
return [{
"col0": 200,
"col1": "PTZYW",
"col2": "UBFZRDN",
"col3": "CGIU",
"col4": "ZMENLRPHMIK",
"col5": 200,
"col6": "MTDJLE",
"col7": "MLHIPBCJ",
"col8": "SDKZWXAZFJ",
"col9": "ADECXHUA",
"col10": 200,
"col11": "WVEUA",
"col12": "ENKKE",
"col13": "NMOFGKEVSU",
"col14": "EKQC",
"col15": 200,
"col16": "WGXZK",
"col17": "XIRWOIBGC",
"col18": "ELMNUYRF",
"col19": "FOSD",
"col20": 100,
"col21": "DDPYMQOZ",
"col22": "PHXLDMRHN",
"col23":...