jQuery Grid Plugin - jqGrid

So I've been playing with jqGrid for the last several evenings and would like to share what I've done in case others are interested in this feature.

EDIT:  I removed my caution about not working with IE.  This does appear to work with IE8 (at least).

I'm building an application that has a standard style interface that allows a user to edit data; the data is a natural fit for a tree-grid view.  However, the users should have the ability to have multiple windows open at the same time and should be able to switch between them like any normal windowing interface.  At first I thought to put the jqGrid inside of a jQuery dialog — but it didn't really "look that good" (for lack of a better description).  The problem was partially because the grid "IS" the whole document.  It's the focal point for where editing is performed.  Therefore, I decided that I would make the jqGrid the UI element that should be draggable, sizable, etc.  At first I thought I could just add the jQuery ui-dialog class to the object and be done with it.  This had other adverse side effects that manifested themselves in very odd behavior (which I'm still researching).  With that said, here's a solution I came up with.

First I had to fix what appeared to be a bug in the resize code of jqGrid (which I've posted elsewhere).  There's odd behavior where a thin blue line surrounds the grid when you minimize it (but only if you minimize it AFTER resizing it).

//
// Make the grid resizable.
//
$(this).jqGrid('gridResize', {
	minWidth:   350,
	minHeight:  150,
	stop:
		function (grid, ev, ui) {
			//
			// There seems to be an issue with resizing the grid so I added
			// this code to remove the "height" style.
			//
			$(grid.srcElement).parent ().css ("height", null);
		}
});

Next challenge was making it so they could overlap once I was able to instantiate more than one grid.  I did this with this style (notice my comment about WHY I picked a z-index of 1002):

/*
 * Had to make the z-index 1002 because the resize handle on the jquery
 * windows seems to be at 1001... go figure.
 */
.ui-jqgrid-active {
	z-index: 1002;
}

Next, I needed a way to initialize information pertaining to a grid; but only ONCE.  I wanted to encapsulate as MUCH information as possible inside of the actual jqGrid definition, but I was not able to find any type of "one-time-initialization" function that I could override.  Therefore, I overloaded the gridComplete() function and added an attribute to the dialog to mark it as "initialized."  This code is as follows:

gridComplete:
function () {
  if ($(this).attr ('initialized') == undefined) {
    $(this).attr ('initialized', true);
  }

I needed to make the window draggable.  I added this block of code to my initialization code:

//
// Make the window draggable.
//
$('#gbox_' + id).draggable ({
	handle:"div.ui-jqgrid-titlebar",
	start: function () {
		$(".ui-jqgrid").removeClass ('ui-jqgrid-active');
		$(this).addClass ('ui-jqgrid-active');
	}
}).click (function () {
		$(".ui-jqgrid").removeClass ('ui-jqgrid-active');
		$(this).addClass ('ui-jqgrid-active');
}).css ('position', 'absolute');

I had to make the position absolute because it kept putting new grids at the bottom of the browser and continued to grow downward.  Finally, I wanted to have a "close" button on the title bar.  I wasn't able to find any particular "hooks" to provide this capability, so I fired up Firebug, plowed through the jqGrid code & css, and came up with the following solution (also added to my one-time-initialization code block):

temp = $("")
         .addClass('ui-jqgrid-titlebar-close HeaderButton')
         .click (function () {
           $(this).parents ('.ui-jqgrid').remove ();
	 })
	 .hover(
	   function() {$(this).addClass('ui-state-hover');},
           function() {$(this).removeClass('ui-state-hover');}
         ).append (" ");
$('#gbox_'+ id + ' .ui-jqgrid-title').before (temp);

Part of this code was "borrowed" from the jqGrid code that creates the minimize button.  Finally, I wrapped up the code that actually instantiated the dialog into a javascript function such as:

function setupJQGrid (treeTabeId, treePagerId) {

  … grid initialization …

}

gridId is the id of the table to wrap the jqGrid around.  Then I put an anchor and a div on the page to create the dialog that looked like this:

    <div id="test">div</div>    <a href="#" id="testGrid">Test</a>

and the javascript to actually create the div.

$('#testGrid').click (function () {
	var rnd = Math.floor(Math.random()*10001);
	$('#test').append ('');
	setupJQGrid ('treegrid' + rnd, 'ptreegrid' + rnd);
});

This function just created some random number to make SURE that every window had its own unique ids (thus avoiding namespace clashes).

VOILA!  Worked perfectly!  So I think I put all my steps here correctly.  Ideally, I'd still like to make the ui-dialog class trick work (as I described above).  I'm sure I'm not taking something into account for it, but the exercise I went through to make this method work was very valuable in understanding some of the inner workings of how jqGrid functions.  Of course, even WITH the ui-dialog class added to the grid, I would have to do the z-index trick because they would not overlap correctly.

Thanks for writing a really nice plugin.

EDIT:

Upon further testing, I had to make a couple minor changes.  For one, I had to "deactivate" ALL opened jqGrid windows in my initialization code like this:

                  $(".ui-jqgrid").removeClass ('ui-jqgrid-active');

Then I had to add the ui-jqgrid-active class to the newly opened one.  I tacked onto the end of the code above that setup the draggable() feature.  Just add this after .css ('position', 'absolute'):

                 .addClass ('ui-jqgrid-active');

That fixes it up nicely.  The major issue now has to do with deleting records.  Because I had to force the window to be z-index of 1002, the dialog box for deleting now appears BEHIND the active window.  Big problem.  I may have to go back and change the z-index of the drag handle to be less than 1001 thus alleviating my original css hack to set the active window to z-index 1002.