Made the larger grid resizable

Author: rdworth

grid-markup/grid.css

@@ -5,6 +5,9 @@
 /*
 Functional
 */
+.ui-grid .ui-grid-body {
+	overflow: auto;
+}
 .ui-grid .ui-grid-head-table, .ui-grid .ui-grid-body-table {
 	border-collapse: collapse;
 	table-layout: fixed;

grid-markup/grid.html

@@ -9,17 +9,17 @@
 	<script src="../jquery-1.4.4.js"></script>
 	<script src="../ui/jquery.ui.core.js"></script>
 	<script src="../ui/jquery.ui.widget.js"></script>
+	<script src="../ui/jquery.ui.mouse.js"></script>
+	<script src="../ui/jquery.ui.resizable.js"></script>
 	<script src="grid.js"></script>
-	<style>
-	.ui-grid-body {
-		height: 150px;
-		overflow: auto;
-	}
-	</style>
 	<script>
 	$(function() {
 		$( "#dataTable1" ).grid();
-		$( "#dataTable2" ).grid();
+		$( "#dataTable2" ).grid().grid("widget").resizable({
+			resize: function() {
+				$(this).find(".ui-grid-body").height( $(this).height() - $(this).find(".ui-grid-head").height() - 20 );
+			}
+		}).find(".ui-grid-body").height(300);
 	});
 	</script>
 </head>

grid-markup/grid.js

@@ -77,6 +77,11 @@ $.widget( "ui.grid", {
 		this.refresh();
 
 	},
+
+	widget: function() {
+		return this.uiGrid;
+	},
+
 	refresh: function() {
 		// Adjust head in case of visible scrollbar on body to keep columns aligned
 		var vertScrollbar = ( this.uiGridBody[0].scrollHeight !== this.uiGridBody[0].clientHeight );