This example show the new feature of jqGrid forceFit. Try to resize a column.
We can see that the adjacent column (to the right) resizes so that the overall grid width is maintained
Again with this we can set the width and height dynamically.
Another feature here is that we can apply a sort to a certain column instead of clicking on
another one. Click on date colummn. The sort is not by date, but of client name.
HTML
...
<table id="gwidth"></table>
<div id="pgwidth"></div>
<br/>
<input id="setwidth" type="text" /><input type="button" id="snw" value="Set New Width"/>
<br/>
<input id="setheight" type="text" /><input type="button" id="snh" value="Set New Height"/>
<script src="gridwidth.js" type="text/javascript"> </script>
Java Scrpt code
...
jQuery("#gwidth").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pgwidth',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Dynamic height/width Example",
forceFit : true,
onSortCol :function (nm,index) {
if (nm=='invdate') {
jQuery("#gwidth").jqGrid('setGridParam',{sortname:'name'});
}
},
onHeaderClick: function (status){
alert("My status is now: "+ status);
}
});
jQuery("#gwidth").jqGrid('navGrid','#pgwidth',{edit:false,add:false,del:false});
jQuery("#snw").click(function (){
var nw = parseInt(jQuery("#setwidth").val());
if(isNaN(nw)) {
alert("Value must be a number");
} else if (nw<200 || nw > 700) {
alert("Value can be between 200 and 700")
} else {
jQuery("#gwidth").jqGrid('setGridWidth',nw);
}
});
jQuery("#snh").click(function (){
var nh = jQuery("#setheight").val();
jQuery("#gwidth").jqGrid('setGridHeight',nh);
});
PHP with MySQL
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
echo json_encode($responce);
...