- Reverted to an older way of disabling selection when dragging rows.…

… Still getting some weird behavior on textboxes - need to find out why. - Implemented (pseudo)background post-rendering for the cases when you just absolutely HAVE to have a reference to the cell DOM node or want to do some heavier rendering. See the new example page - example10-async-post-render.html. - Added the Sparklines library.
Narretz · Dec 15, 2009 · 5553767 · 5553767
1 parent 890c062
commit 5553767
Show file tree

Hide file tree

Showing 5 changed files with 567 additions and 5 deletions.
diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html
@@ -0,0 +1,134 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
+		<title>SlickGrid example</title>
+		<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
+		<link rel="stylesheet" href="../css/custom-theme/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" />
+		<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
+		<style>
+		.cell-title {
+			font-weight: bold;
+		}
+
+		.cell-effort-driven {
+			text-align: center;
+		}
+
+		.description * {
+			font-size: 11pt;
+		}
+	</style>
+	</head>
+	<body>
+		<script language="JavaScript" src="../lib/firebugx.js"></script>
+		<script language="JavaScript" src="../lib/jquery-1.3.2.min.js"></script>
+		<script language="JavaScript" src="../lib/jquery-ui-1.7.2.custom.min.js"></script>
+		<script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script>
+		<script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script>
+		<script language="JavaScript" src="../lib/jquery.event.drag.custom.js"></script>
+		<script language="JavaScript" src="../lib/jquery.sparkline.min.js"></script>
+
+		<script language="JavaScript" src="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+
+		<div style="width:600px;float:left;">
+			<div class="grid-header" style="width:100%">
+				<label>Scores:</label>
+			</div>
+			<div id="myGrid" style="width:100%;height:500px;"></div>
+		</div>
+
+		<div style="margin-left:650px;margin-top:40px;" class="description">
+			<h2>Demonstrates:</h2>
+			<p>
+			With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving the speed and responsiveness.
+			This is achieved through async background post-rendering.  
+			SlickGrid exposes a <u>onPostProcessRowNode(rowNode,row,context)</u> event which you can subscribe to and implement your own rendering there.
+			The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI responsiveness.
+			You should still make sure that post-processing one row doesn't take too long though.
+			SlickGrid will figure out what and when needs to be updated for you.
+			</p>
+			<p>
+			The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of these integers.
+			The graph is drawn using a CANVAS element in the background.  
+			The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph.
+			The graph cell behaves just like an ordinary cell and can be resized/reordered.
+			The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/" target="_blank">jQuery Sparklines</a> library.
+			</p>			
+		</div>
+
+
+
+		<script>
+		function requiredFieldValidator(value) {
+			if (value == null || value == undefined || !value.length)
+				return {valid:false, msg:"This is a required field"};
+			else	
+				return {valid:true, msg:null};
+		}
+
+		function waitingFormatter(value) {
+			return "wait...";
+		}	
+
+
+		var grid;
+
+		var data = [];
+
+		var columns = [
+			{id:"title", name:"Title", field:"title", sortable:false, width:120, cssClass:"cell-title"},
+			{id:"n1", name:"1", field:"n1", sortable:false, editor:IntegerCellEditor, width:40, validator:requiredFieldValidator},
+			{id:"n2", name:"2", field:"n2", sortable:false, editor:IntegerCellEditor, width:40, validator:requiredFieldValidator},
+			{id:"n3", name:"3", field:"n3", sortable:false, editor:IntegerCellEditor, width:40, validator:requiredFieldValidator},
+			{id:"n4", name:"4", field:"n4", sortable:false, editor:IntegerCellEditor, width:40, validator:requiredFieldValidator},
+			{id:"n5", name:"5", field:"n5", sortable:false, editor:IntegerCellEditor, width:40, validator:requiredFieldValidator},
+			{id:"chart", name:"Chart", sortable:false, width:60, formatter:waitingFormatter, rerenderOnResize:true}
+
+		];
+
+		var options = {
+			editable: true,
+			enableAddRow: false,
+			enableCellNavigation: true,
+			asyncEditorLoading: false
+		};	
+
+
+
+		$(function()
+		{
+			for (var i=0; i<500; i++) {
+				var d = (data[i] = {});
+
+				d["title"] = "Record " + i;
+				d["n1"] = Math.round(Math.random() * 10);
+				d["n2"] = Math.round(Math.random() * 10);
+				d["n3"] = Math.round(Math.random() * 10);
+				d["n4"] = Math.round(Math.random() * 10);
+				d["n5"] = Math.round(Math.random() * 10);
+			}
+
+
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+
+
+			grid.onPostProcessRowNode = function(rowNode, row, dataContext) {
+				var vals = [
+					dataContext["n1"],
+					dataContext["n2"],
+					dataContext["n3"],
+					dataContext["n4"],
+					dataContext["n5"]
+				];
+
+				$(rowNode).children().eq(grid.getColumnIndex("chart")).sparkline(vals, {width:"100%"});
+			}			
+		})
+
+		</script>
+
+	</body>
+</html>