title: How to both resize and minimize a jqGrid table
body: <p>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.</p>
  
  <p>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 <a href="https://stackoverflow.com/questions/2870463/make-a-jqgrid-moveable">HERE</a> 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.)</p>
  
  <p>Thanks so much for helping.</p>
  
  <p>Here's the workaround (that I haven't gotten to work):</p>
  
  <pre><code>//
  // Make the grid resizable.
  //
  $("#treegrid2").jqGrid('gridResize',{minWidth:350,minHeight:150,
    stop: function (grid, ev, ui) {
      $(grid.srcElement).parent ().css ("height", null);
    }
  });
  </code></pre>
  
  <p>And here's my code so far:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="Source-Info" content="http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules" /&gt;
  &lt;title&gt;My Grid One&lt;/title&gt;
  
  &lt;link rel="stylesheet" type="text/css" media="screen" href="./css/jquery-ui-1.8.1.custom.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="./css/ui.multiselect.css" /&gt;
  
  &lt;style&gt;
  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;
  }
  &lt;/style&gt; 
  
  
  &lt;script src="./js/jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="grid.loader.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/jquery.tablednd.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/jquery.contextmenu.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/jquery.layout.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/grid.formedit.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="./js/ui.multiselect.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;script src="celledit.js" type="text/javascript"&gt; &lt;/script&gt; 
  
  &lt;table id="repost"&gt;&lt;/table&gt; 
  &lt;div id="prepost"&gt;&lt;/div&gt; 
  &lt;input type="BUTTON" id="bedata" value="Edit Selected" /&gt; 
  &lt;div id="hiddenDivId"&gt;&lt;/div&gt; 
  
  &lt;script type="text/javascript"&gt;
  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&lt;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&lt;=numberOfRecords;i++)
  {
  
      var rowId = $("#repost").getRowData(i);
      var name = rowId['name'];
  
                //put all rows for the grid
      $('&lt;input type="hidden" /&gt;').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');
  // });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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!</p>