I'm building an application which needs to handle very large amounts of text, and where screen space for viewing it is at a premium. Being able to resize and/or minimize a table with jqGrid seems an ideal solution...only I have not been able to get it to work. I can do one or the other, but not both. With both options enabled, after the first resize event, the minimize will only blank out, leaving a border behind which occupies the prior dimensions of the table.
I'm new to jQuery and jqGrid, so I have not been able to grasp the concepts enough to understand what is going wrong. I found a similar issue discussed HERE where a work-around was posted, but I have not gotten the workaround to work for me. (It's probably something super simple, but I just can't see it yet.)
Thanks so much for helping.
Here's the workaround (that I haven't gotten to work):
//
// Make the grid resizable.
//
$("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150,
stop: function (grid, ev, ui) {
$(grid.srcElement).parent ().css ("height", null);
}
});
And here's my code so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Source-Info" content="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules" />
<title>My Grid One</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui-1.8.1.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.multiselect.css" />
<style>
html, body {
margin: 0px;
padding: 0px;
font-size: 75%;
}
.ui-jqgrid tr.jqgrow td {
white-space: normal !important;
height:auto;
vertical-align:text-top;
padding-top:2px;
}
</style>
<script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="grid.loader.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="./js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="./js/jquery.tablednd.js" type="text/javascript"></script>
<script src="./js/jquery.contextmenu.js" type="text/javascript"></script>
<script src="./js/jquery.layout.js" type="text/javascript"></script>
<script src="./js/grid.formedit.js" type="text/javascript"></script>
<script src="./js/ui.multiselect.js" type="text/javascript"></script>
</head>
<body>
<script src="celledit.js" type="text/javascript"> </script>
<table id="repost"></table>
<div id="prepost"></div>
<input type="BUTTON" id="bedata" value="Edit Selected" />
<div id="hiddenDivId"></div>
<script type="text/javascript">
jQuery("#repost").jqGrid({
url:'example.php',
editurl: 'jqGridCrud.php', // 'update_mysql.php'
mtype: 'GET',
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
beforeSaveCell: function() {
//rowid, cellname, value, iRow, iCol
//alert(arguments[0]+' '+arguments[1]+' '+arguments[2])
$.post("jqGridCrud.php", {id: arguments[0], col: arguments[1], query: arguments[2]},
function(data){
});
},
onclickSubmit: function (params) {
var ajaxData = {};
var list = $("#repost");
var selectedRow = list.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
ajaxData = { invid: rowData.invid };
alert("GOT IT");
return ajaxData;
},
colNames:['Inv No','Date','Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55,editable:false},
{name:'invdate', index:'invdate', width:60,editable:true},
{name:'amount', index:'amount', width:60, align:'right',editable:true},
{name:'tax', index:'tax', width:60, align:'right',editable:true},
{name:'total', index:'total', width:60, align:'right',editable:true},
{name:'note', index:'note', width:350, edittype:'textarea', editoptions: {rows:"10"},sortable:false,editable:true}
],
rowNum:10,
width:700,
rowList:[10,20,30],
multiselect: false,
pager: '#prepost',
viewrecords: true,
sortname: 'invid',
sortorder: "desc",
caption:"My Own Grid",
stop: function (grid, ev, ui) {
$(grid.srcElement).parent().css ("height", null);
},
onHeaderClick: function (grid, ev, ui) {
$(grid.srcElement).parent().css ("height", null);
}
});
$("#bedata").click(function(){ var gr = jQuery("#repost").getGridParam('selrow'); //getSelectedRow();
//if( gr != null ) jQuery("#repost").delGridRow(gr,{reloadAfterSubmit:false}); else alert("Please Select Row to delete!");
var rows= jQuery("#repost").jqGrid('getRowData');
var paras=new Array();
for(var i=0;i<rows.length;i++){
var row=rows[i];
paras.push($.param(row));
}
alert (paras);
$.ajax({
type: "POST",
url: "jqGridCrud.php",
data: paras.join(),
success: function(msg){ alert('MESS:'+msg+" END:\n\n"+paras); }
});
//get total rows in the grid
var numberOfRecords = $("#repost").getGridParam("invid");
for(i=1;i<=numberOfRecords;i++)
{
var rowId = $("#repost").getRowData(i);
var name = rowId['name'];
//put all rows for the grid
$('<input type="hidden" />').attr('name', i+'_name').attr('value',ime).appendTo('#hiddenDivId');
};
});
jQuery("#repost").jqGrid('navGrid','#prepost',{edit:false,add:false,del:false,drag:true});
jQuery("#repost").jqGrid('gridResize',{minWidth:350,maxWidth:800,minHeight:80, maxHeight:350});
//
// Make the grid resizable.
//
jQuery("#repost").jqGrid('gridResize',{minWidth:350,minHeight:150,
stop: function (grid, ev, ui) {
$(grid.srcElement).parent ().css ("height", null);
}
});
//$('#gbox_repost').draggable (); // Drags from anywhere in the grid, not just title bar :(
$('#gbox_' + 'repost').draggable ({handle:"div.ui-jqgrid-titlebar"});
// $(document).ready(function() {
// $('#repost').editable('jqGridCrud.php');
// });
</script>
</body>
</html>
EDIT: AS OF 23 May, I'm still looking for answers on this one! If anyone has solved this riddle, please provide the rest of us the solution. Thank you!
