13 files changed, 2344 insertions, 2344 deletions
diff --git a/examples/example1-simple.html b/examples/example1-simple.html
index 4f73269..2c1f93f 100644
--- a/examples/example1-simple.html
+++ b/examples/example1-simple.html
@@ -1,89 +1,89 @@
-<!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>
-		</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>basic grid with minimal configuration</li>
-					<li>grid handles container resizing</li>
-				</ul>
-				
-			</td>
-		</tr>
-		</table>
-
-		
-		<script>
-		
-		var grid;
-		
-		var data = [];
-
-		var columns = [
-			{id:"title", name:"Title", field:"title"},
-			{id:"duration", name:"Duration", field:"duration"},
-			{id:"%", name:"% Complete", field:"percentComplete"},
-			{id:"start", name:"Start", field:"start"},
-			{id:"finish", name:"Finish", field:"finish"},
-			{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
-		];
-
-		var options = {
-			editable: false,
-			enableAddRow: false,
-			enableCellNavigation: false
-		};	
-
-
-	
-		$(function()
-		{
-			for (var i=0; i<500; i++) {
-				var d = (data[i] = {});
-
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["effortDriven"] = (i % 5 == 0);
-			}
-
-
-					
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-			
-			$("#myGrid").resizable();
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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>
+		</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>basic grid with minimal configuration</li>
+					<li>grid handles container resizing</li>
+				</ul>
+				
+			</td>
+		</tr>
+		</table>
+
+		
+		<script>
+		
+		var grid;
+		
+		var data = [];
+
+		var columns = [
+			{id:"title", name:"Title", field:"title"},
+			{id:"duration", name:"Duration", field:"duration"},
+			{id:"%", name:"% Complete", field:"percentComplete"},
+			{id:"start", name:"Start", field:"start"},
+			{id:"finish", name:"Finish", field:"finish"},
+			{id:"effort-driven", name:"Effort Driven", field:"effortDriven"}
+		];
+
+		var options = {
+			editable: false,
+			enableAddRow: false,
+			enableCellNavigation: false
+		};	
+
+
+	
+		$(function()
+		{
+			for (var i=0; i<500; i++) {
+				var d = (data[i] = {});
+
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["effortDriven"] = (i % 5 == 0);
+			}
+
+
+					
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+			
+			$("#myGrid").resizable();
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example10-async-post-render.html b/examples/example10-async-post-render.html
index 9cc9eb2..2d072e0 100644
--- a/examples/example10-async-post-render.html
+++ b/examples/example10-async-post-render.html
@@ -1,134 +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>
+<!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>
diff --git a/examples/example2-formatters.html b/examples/example2-formatters.html
index e26dd4d..10c3538 100644
--- a/examples/example2-formatters.html
+++ b/examples/example2-formatters.html
@@ -1,99 +1,99 @@
-<!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;
-		}
-	</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
-					<li>custom column formatters</li>
-					
-				</ul>
-				
-			</td>
-		</tr>
-		</table>
-		
-
-		
-		<script>
-		var grid;
-		
-		var data = [];
-
-		var columns = [
-			{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
-			{id:"duration", name:"Duration", field:"duration"},
-			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter},
-			{id:"start", name:"Start", field:"start", minWidth:60},
-			{id:"finish", name:"Finish", field:"finish", minWidth:60},
-			{id:"effort-driven", name:"Effort Driven", sortable:false, width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter}
-		];
-
-		var options = {
-			editable: false,
-			enableAddRow: false,
-			enableCellNavigation: false
-		};	
-
-
-
-		$(function()
-		{
-			for (var i=0; i<500; i++) {
-				var d = (data[i] = {});
-
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["effortDriven"] = (i % 5 == 0);
-			}
-
-					
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-			
-			grid.onHeaderContextMenu = function() {
-				console.log(1)
-				
-			}
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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;
+		}
+	</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>width, minWidth, maxWidth, resizable, cssClass column attributes</li>
+					<li>custom column formatters</li>
+					
+				</ul>
+				
+			</td>
+		</tr>
+		</table>
+		
+
+		
+		<script>
+		var grid;
+		
+		var data = [];
+
+		var columns = [
+			{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title"},
+			{id:"duration", name:"Duration", field:"duration"},
+			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter},
+			{id:"start", name:"Start", field:"start", minWidth:60},
+			{id:"finish", name:"Finish", field:"finish", minWidth:60},
+			{id:"effort-driven", name:"Effort Driven", sortable:false, width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter}
+		];
+
+		var options = {
+			editable: false,
+			enableAddRow: false,
+			enableCellNavigation: false
+		};	
+
+
+
+		$(function()
+		{
+			for (var i=0; i<500; i++) {
+				var d = (data[i] = {});
+
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["effortDriven"] = (i % 5 == 0);
+			}
+
+					
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+			
+			grid.onHeaderContextMenu = function() {
+				console.log(1)
+				
+			}
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example3-editing.html b/examples/example3-editing.html
index 71d89bb..298a6fc 100644
--- a/examples/example3-editing.html
+++ b/examples/example3-editing.html
@@ -1,103 +1,103 @@
-<!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;
-		}
-	</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>adding basic keyboard navigation and editing</li>
-					<li>custom editors and validators</li>
-				</ul>
-				
-			</td>
-		</tr>
-		</table>
-		
-
-		
-		<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};
-		}
-					
-			
-			
-		var grid;
-		
-		var data = [];
-
-		var columns = [
-			{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator},
-			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
-			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor},
-			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor},
-			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor},
-			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor}
-		];
-
-		var options = {
-			editable: true,
-			enableAddRow: false,
-			enableCellNavigation: true,
-			asyncEditorLoading: false
-		};	
-
-
-
-		$(function()
-		{
-			for (var i=0; i<500; i++) {
-				var d = (data[i] = {});
-
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["effortDriven"] = (i % 5 == 0);
-			}
-
-					
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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;
+		}
+	</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>adding basic keyboard navigation and editing</li>
+					<li>custom editors and validators</li>
+				</ul>
+				
+			</td>
+		</tr>
+		</table>
+		
+
+		
+		<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};
+		}
+					
+			
+			
+		var grid;
+		
+		var data = [];
+
+		var columns = [
+			{id:"title", name:"Title", field:"title", width:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator},
+			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
+			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor},
+			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor},
+			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor},
+			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor}
+		];
+
+		var options = {
+			editable: true,
+			enableAddRow: false,
+			enableCellNavigation: true,
+			asyncEditorLoading: false
+		};	
+
+
+
+		$(function()
+		{
+			for (var i=0; i<500; i++) {
+				var d = (data[i] = {});
+
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["effortDriven"] = (i % 5 == 0);
+			}
+
+					
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example4-model.html b/examples/example4-model.html
index 9b7fdc2..31b6466 100644
--- a/examples/example4-model.html
+++ b/examples/example4-model.html
@@ -1,297 +1,297 @@
-<!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="../slick.pager.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" />
-		<link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
-		<style>
-		.cell-title {
-			font-weight: bold;
-		}
-		
-		.cell-effort-driven {
-			text-align: center;
-		}
-	</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		<script language="JavaScript" src="../slick.model.js"></script>
-		<script language="JavaScript" src="../slick.pager.js"></script>		
-		<script language="JavaScript" src="../slick.columnpicker.js"></script>
-
-		
-		<div style="width:600px;float:left;">
-			<div class="grid-header" style="width:100%">
-				<label>SlickGrid</label>
-			</div>
-			<div id="myGrid" style="width:100%;height:500px;"></div>
-			<div id="pager" style="width:100%;height:20px;"></div>
-		</div>
-		
-		<div class="options-panel" style="width:320px;margin-left:650px;">
-			<b>Search:</b>
-			<hr/>
-			<div style="padding:6px;">
-				<label style="width:200px;float:left">Show tasks with % at least: </label>
-				<div style="padding:2px;">
-					<div style="width:100px;display:inline-block;" id="pcSlider"></div>
-				</div>
-				<br/>
-				<label style="width:200px;float:left">And title including:</label>
-				<input type=text id="txtSearch" style="width:100px;">
-				<br/><br/>
-				<button id="btnSelectRows">Select first 10 rows</button>
-			</div>
-		</div>
-
-				
-		<div style="margin-left:650px;margin-top:40px;;">
-			<h2>Demonstrates:</h2>
-			
-			<ul>
-				<li>a filtered Model (DataView) as a data source instead of a simple array</li>
-				<li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
-				<li>
-					<b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>
-					The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
-				</li>
-				<li>adding new rows, bidirectional sorting</li>
-				<li>column options:  setValueHandler, cannotTriggerInsert</li>
-				<li><font color=red>NOTE:</font>  all filters are immediately applied to new/edited rows</li>
-				<li>Handling row selection against model changes.</li>
-				<li>Paging.</li>
-			</ul>
-		</div>
-
-		
-		<script>
-		var dataView;
-		var grid;
-		var data = [];
-		var selectedRowIds = [];
-
-		var columns = [
-			{id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, sortable:false, unselectable:true },
-			{id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem},
-			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem},
-			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem},
-			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
-			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
-			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true}
-		];
-
-		var options = {
-			editable: true,
-			enableAddRow: true,
-			enableCellNavigation: true,
-			asyncEditorLoading: true,
-			forceFitColumns: true
-		};	
-
-		var sortcol = "title";
-		var sortdir = 1;
-		var percentCompleteThreshold = 0;
-		var searchString = "";
-
-		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 myFilter(item) {
-			if (item["percentComplete"] < percentCompleteThreshold) 
-				return false;
-			
-			if (searchString != "" && item["title"].indexOf(searchString) == -1)
-				return false;
-				
-			return true;
-		}
-		
-		function percentCompleteSort(a,b) {
-			return a["percentComplete"] - b["percentComplete"];
-		}
-
-		function comparer(a,b) {
-			var x = a[sortcol], y = b[sortcol];
-			return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
-		}
-		
-		function updateItem(value,columnDef,item) {
-			item[columnDef.field] = value;
-			dataView.updateItem(item.id,item);
-		}
-		
-		function addItem(columnDef,value) {
-			var item = {"id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
-			item[columnDef.field] = value;
-			dataView.addItem(item);
-		}
-
-
-
-
-		$(function()
-		{
-			// prepare the data
-			for (var i=0; i<50000; i++) {
-				var d = (data[i] = {});
-				
-				d["id"] = "id_" + i;
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["effortDriven"] = (i % 5 == 0);
-			}
-			
-
-			dataView = new DataView();
-			grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options);
-			var pager = new SlickGridPager(dataView, grid, $("#pager"));
-			var columnpicker = new SlickColumnPicker(columns, grid);
-			
-			grid.onAddNewRow = addItem;
-			
-			grid.onKeyDown = function(e) {
-				// select all rows on ctrl-a
-				if (e.which != 65 || !e.ctrlKey) 
-					return false;
-				
-				var rows = [];
-				selectedRowIds = [];
-				
-				for (var i=0; i<dataView.rows.length; i++) {
-					rows.push(i);
-					selectedRowIds.push(dataView.rows[i].id);
-				}
-				
-				grid.setSelectedRows(rows);	
-				
-				return true;			
-			}
-			
-			grid.onSelectedRowsChanged = function() {
-				selectedRowIds = [];
-				var rows = grid.getSelectedRows();
-				for (var i=0, l=rows.length; i<l; i++) {
-					selectedRowIds.push(rows[i].id);
-				}
-			}
-			
-			grid.onSort = function(sortCol,sortAsc) {
-				sortdir = sortAsc?1:-1;
-				sortcol = sortCol.field;
-				dataView.sort(comparer);
-			}
-			
-			// wire up model events to drive the grid
-			dataView.onRowCountChanged.subscribe(function(args) {
-				grid.updateRowCount();
-			});
-			
-			dataView.onRowsChanged.subscribe(function(rows) {
-				grid.removeRows(rows);
-				grid.render();
-				
-				if (selectedRowIds.length > 0) 
-				{
-					// since how the original data maps onto rows has changed,
-					// the selected rows in the grid need to be updated
-					var rows = [];
-					for (var i = 0; i < selectedRowIds.length; i++) 
-					{
-						var idx = dataView.getRowById(selectedRowIds[i]);
-						if (idx != undefined) 
-							rows.push(idx);
-					}
-					
-					grid.setSelectedRows(rows);
-				}
-			});
-			
-			dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
-				var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
-				grid.setOptions({enableAddRow:isLastPage||pagingInfo.pageSize==0});
-			});
-			
-			
-			
-			var h_runfilters = null;
-			
-			// wire up the slider to apply the filter to the model
-			$("#pcSlider").slider({
-				"range":	"min",
-				"slide":	function(event,ui) {
-					if (GlobalEditorLock.isEditing()) 
-						GlobalEditorLock.cancelCurrentEdit();
-					
-					if (percentCompleteThreshold != ui.value) 
-					{
-						window.clearTimeout(h_runfilters);
-						h_runfilters = window.setTimeout(dataView.refresh, 10);
-						percentCompleteThreshold = ui.value;
-					}
-				}
-			});
-			
-			
-			// wire up the search textbox to apply the filter to the model
-			$("#txtSearch").keyup(function(e) {
-				if (GlobalEditorLock.isEditing()) 
-					GlobalEditorLock.cancelCurrentEdit();
-							
-				// clear on Esc			
-				if (e.which == 27) 
-					this.value = "";
-				
-				searchString = this.value;
-				dataView.refresh();
-			});
-			
-			$("#btnSelectRows").click(function() {
-				var rows = [];
-				selectedRowIds = [];
-				
-				for (var i=0; i<10 && i<dataView.rows.length; i++) {
-					rows.push(i);
-					selectedRowIds.push(dataView.rows[i].id);
-				}
-				
-				grid.setSelectedRows(rows);
-			});
-			
-			
-			
-			
-			// initialize the model after all the events have been hooked up
-			dataView.beginUpdate();
-			dataView.setItems(data);
-			dataView.setFilter(myFilter);
-			//dataView.setPagingOptions({pageSize:25});
-			dataView.endUpdate();	
-			
-			$("#gridContainer").resizable();		
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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="../slick.pager.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" />
+		<link rel="stylesheet" href="../slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
+		<style>
+		.cell-title {
+			font-weight: bold;
+		}
+		
+		.cell-effort-driven {
+			text-align: center;
+		}
+	</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		<script language="JavaScript" src="../slick.model.js"></script>
+		<script language="JavaScript" src="../slick.pager.js"></script>		
+		<script language="JavaScript" src="../slick.columnpicker.js"></script>
+
+		
+		<div style="width:600px;float:left;">
+			<div class="grid-header" style="width:100%">
+				<label>SlickGrid</label>
+			</div>
+			<div id="myGrid" style="width:100%;height:500px;"></div>
+			<div id="pager" style="width:100%;height:20px;"></div>
+		</div>
+		
+		<div class="options-panel" style="width:320px;margin-left:650px;">
+			<b>Search:</b>
+			<hr/>
+			<div style="padding:6px;">
+				<label style="width:200px;float:left">Show tasks with % at least: </label>
+				<div style="padding:2px;">
+					<div style="width:100px;display:inline-block;" id="pcSlider"></div>
+				</div>
+				<br/>
+				<label style="width:200px;float:left">And title including:</label>
+				<input type=text id="txtSearch" style="width:100px;">
+				<br/><br/>
+				<button id="btnSelectRows">Select first 10 rows</button>
+			</div>
+		</div>
+
+				
+		<div style="margin-left:650px;margin-top:40px;;">
+			<h2>Demonstrates:</h2>
+			
+			<ul>
+				<li>a filtered Model (DataView) as a data source instead of a simple array</li>
+				<li>grid reacting to model events (onRowCountChanged, onRowsChanged)</li>
+				<li>
+					<b>FAST</b> DataView recalculation and <b>real-time</b> grid updating in response to data changes.<br/>
+					The grid holds <b>50'000</b> rows, yet you are able to sort, filter, scroll, navigate and edit as if it had 50 rows.
+				</li>
+				<li>adding new rows, bidirectional sorting</li>
+				<li>column options:  setValueHandler, cannotTriggerInsert</li>
+				<li><font color=red>NOTE:</font>  all filters are immediately applied to new/edited rows</li>
+				<li>Handling row selection against model changes.</li>
+				<li>Paging.</li>
+			</ul>
+		</div>
+
+		
+		<script>
+		var dataView;
+		var grid;
+		var data = [];
+		var selectedRowIds = [];
+
+		var columns = [
+			{id:"sel", name:"#", cssClass:"cell-selection", width:40, cannotTriggerInsert:true, resizable:false, sortable:false, unselectable:true },
+			{id:"title", name:"Title", field:"title", width:120, minWidth:120, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem},
+			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem},
+			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem},
+			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
+			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
+			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true}
+		];
+
+		var options = {
+			editable: true,
+			enableAddRow: true,
+			enableCellNavigation: true,
+			asyncEditorLoading: true,
+			forceFitColumns: true
+		};	
+
+		var sortcol = "title";
+		var sortdir = 1;
+		var percentCompleteThreshold = 0;
+		var searchString = "";
+
+		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 myFilter(item) {
+			if (item["percentComplete"] < percentCompleteThreshold) 
+				return false;
+			
+			if (searchString != "" && item["title"].indexOf(searchString) == -1)
+				return false;
+				
+			return true;
+		}
+		
+		function percentCompleteSort(a,b) {
+			return a["percentComplete"] - b["percentComplete"];
+		}
+
+		function comparer(a,b) {
+			var x = a[sortcol], y = b[sortcol];
+			return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
+		}
+		
+		function updateItem(value,columnDef,item) {
+			item[columnDef.field] = value;
+			dataView.updateItem(item.id,item);
+		}
+		
+		function addItem(columnDef,value) {
+			var item = {"id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
+			item[columnDef.field] = value;
+			dataView.addItem(item);
+		}
+
+
+
+
+		$(function()
+		{
+			// prepare the data
+			for (var i=0; i<50000; i++) {
+				var d = (data[i] = {});
+				
+				d["id"] = "id_" + i;
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["effortDriven"] = (i % 5 == 0);
+			}
+			
+
+			dataView = new DataView();
+			grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options);
+			var pager = new SlickGridPager(dataView, grid, $("#pager"));
+			var columnpicker = new SlickColumnPicker(columns, grid);
+			
+			grid.onAddNewRow = addItem;
+			
+			grid.onKeyDown = function(e) {
+				// select all rows on ctrl-a
+				if (e.which != 65 || !e.ctrlKey) 
+					return false;
+				
+				var rows = [];
+				selectedRowIds = [];
+				
+				for (var i=0; i<dataView.rows.length; i++) {
+					rows.push(i);
+					selectedRowIds.push(dataView.rows[i].id);
+				}
+				
+				grid.setSelectedRows(rows);	
+				
+				return true;			
+			}
+			
+			grid.onSelectedRowsChanged = function() {
+				selectedRowIds = [];
+				var rows = grid.getSelectedRows();
+				for (var i=0, l=rows.length; i<l; i++) {
+					selectedRowIds.push(rows[i].id);
+				}
+			}
+			
+			grid.onSort = function(sortCol,sortAsc) {
+				sortdir = sortAsc?1:-1;
+				sortcol = sortCol.field;
+				dataView.sort(comparer);
+			}
+			
+			// wire up model events to drive the grid
+			dataView.onRowCountChanged.subscribe(function(args) {
+				grid.updateRowCount();
+			});
+			
+			dataView.onRowsChanged.subscribe(function(rows) {
+				grid.removeRows(rows);
+				grid.render();
+				
+				if (selectedRowIds.length > 0) 
+				{
+					// since how the original data maps onto rows has changed,
+					// the selected rows in the grid need to be updated
+					var rows = [];
+					for (var i = 0; i < selectedRowIds.length; i++) 
+					{
+						var idx = dataView.getRowById(selectedRowIds[i]);
+						if (idx != undefined) 
+							rows.push(idx);
+					}
+					
+					grid.setSelectedRows(rows);
+				}
+			});
+			
+			dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
+				var isLastPage = pagingInfo.pageSize*(pagingInfo.pageNum+1)-1 >= pagingInfo.totalRows;
+				grid.setOptions({enableAddRow:isLastPage||pagingInfo.pageSize==0});
+			});
+			
+			
+			
+			var h_runfilters = null;
+			
+			// wire up the slider to apply the filter to the model
+			$("#pcSlider").slider({
+				"range":	"min",
+				"slide":	function(event,ui) {
+					if (GlobalEditorLock.isEditing()) 
+						GlobalEditorLock.cancelCurrentEdit();
+					
+					if (percentCompleteThreshold != ui.value) 
+					{
+						window.clearTimeout(h_runfilters);
+						h_runfilters = window.setTimeout(dataView.refresh, 10);
+						percentCompleteThreshold = ui.value;
+					}
+				}
+			});
+			
+			
+			// wire up the search textbox to apply the filter to the model
+			$("#txtSearch").keyup(function(e) {
+				if (GlobalEditorLock.isEditing()) 
+					GlobalEditorLock.cancelCurrentEdit();
+							
+				// clear on Esc			
+				if (e.which == 27) 
+					this.value = "";
+				
+				searchString = this.value;
+				dataView.refresh();
+			});
+			
+			$("#btnSelectRows").click(function() {
+				var rows = [];
+				selectedRowIds = [];
+				
+				for (var i=0; i<10 && i<dataView.rows.length; i++) {
+					rows.push(i);
+					selectedRowIds.push(dataView.rows[i].id);
+				}
+				
+				grid.setSelectedRows(rows);
+			});
+			
+			
+			
+			
+			// initialize the model after all the events have been hooked up
+			dataView.beginUpdate();
+			dataView.setItems(data);
+			dataView.setFilter(myFilter);
+			//dataView.setPagingOptions({pageSize:25});
+			dataView.endUpdate();	
+			
+			$("#gridContainer").resizable();		
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example5-collapsing.html b/examples/example5-collapsing.html
index 6c883fc..4c820a7 100644
--- a/examples/example5-collapsing.html
+++ b/examples/example5-collapsing.html
@@ -1,294 +1,294 @@
-<!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;
-		}
-		
-		.sort-asc {
-			background: silver url('../images/sort-asc.png') no-repeat right center !important;
-		}
-		
-		.sort-desc {
-			background: silver url('../images/sort-desc.png') no-repeat right center !important;
-		}
-		
-		.toggle {
-			height: 9px;
-			width: 9px;
-			display: inline-block;
-		}		
-		
-		.toggle.expand {
-			background: url(../images/expand.gif) no-repeat center center;
-		}
-	
-		.toggle.collapse {
-			background: url(../images/collapse.gif) no-repeat center center;
-		}
-		
-	</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		<script language="JavaScript" src="../slick.model.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				
-				<div style="border:1px solid gray;background:wheat;padding:6px;">
-				
-					<label>Show tasks with % at least: </label>
-					<div style="padding:4px;">
-						<div style="width:100px;" id="pcSlider"></div>
-					</div>
-					
-					<br/>
-					
-					<label>And title including:</label>
-					<input type=text id="txtSearch">
-				</div>
-				
-				<br/>
-				
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>implementing expand/collapse as a filter for DataView</li>
-				</ul>
-				
-			</td>
-		</tr>
-		</table>
-		
-
-		
-		<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};
-		}
-				
-				
-		var TaskNameFormatter = function(row, cell, value, columnDef, dataContext) {
-		    var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
-		    var idx = dataView.getIdxById(dataContext.id);
-			if (data[idx+1] && data[idx+1].indent > data[idx].indent) {
-				if (dataContext._collapsed)
-					return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
-				else
-					return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
-			}				
-			else
-				return spacer + " <span class='toggle'></span>&nbsp;" + value;
-		};					
-			
-		var dataView;
-		var grid;
-		
-		var data = [];
-
-		var columns = [
-			{id:"title", name:"Title", field:"title", width:220, cssClass:"cell-title", formatter:TaskNameFormatter, editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem},
-			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem},
-			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem},
-			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
-			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
-			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true}
-		];
-
-		var options = {
-			editable: true,
-			enableAddRow: true,
-			enableCellNavigation: true,
-			asyncEditorLoading: false
-		};	
-
-
-		var percentCompleteThreshold = 0;
-		var searchString = "";
-
-		function myFilter(item) {
-			if (item["percentComplete"] < percentCompleteThreshold) 
-				return false;
-				
-			if (searchString != "" && item["title"].indexOf(searchString) == -1)
-				return false;
-				
-			var idx = dataView.getIdxById(item.id);
-		
-			if (item.parent != null) {
-				var parent = data[item.parent];
-				
-				while (parent) {
-					if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1) ) 
-						return false;
-					
-					parent = data[parent.parent];
-				}
-			}
-				
-			return true;
-		}
-		
-		function percentCompleteSort(a,b) {
-			return a["percentComplete"] - b["percentComplete"];
-		}
-
-	
-		function updateItem(value,columnDef,item) {
-			item[columnDef.field] = value;
-			dataView.updateItem(item.id,item);
-		}
-		
-		function addItem(columnDef,value) {
-			var item = {"id": "new_" + (Math.round(Math.random()*10000)), "indent":0, "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
-			item[columnDef.field] = value;
-			dataView.addItem(item);
-		}
-
-
-		$(function()
-		{
-			var indent = 0;
-			var parents = [];
-			
-			// prepare the data
-			for (var i=0; i<1000; i++) {
-				var d = (data[i] = {});
-				var parent = null;
-				
-				if (Math.random() > 0.8) {
-					indent++;
-					parent = i - 1;
-					parents.push(parent);
-				}
-				else if (Math.random() < 0.3 && indent > 0) {
-					indent--;
-					parent = parents.pop();
-				}
-				else if (parents.length > 0)
-					parent = parents[parents.length-1];
-				
-				if (indent == 0)
-					parent = null;	
-				
-				d["id"] = "id_" + i;
-				d["indent"] = indent;
-				d["parent"] = parent;
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["effortDriven"] = (i % 5 == 0);
-			}
-			
-
-			// initialize the model
-			dataView = new DataView();
-			dataView.beginUpdate();
-			dataView.setItems(data);
-			dataView.setFilter(myFilter);
-			dataView.endUpdate();
-			
-			
-			// initialize the grid
-			grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options);
-			
-			grid.onAddNewRow = addItem;
-					
-			grid.onClick = function(e,row,cell) {
-				if ($(e.target).hasClass("toggle")) {
-					
-					var item = dataView.rows[row];
-					if (item) {
-						if (!item._collapsed)
-							item._collapsed = true;
-						else 
-							item._collapsed = false;
-						
-						dataView.updateItem(item.id,item);						
-					}
-					
-					return true;
-				}
-				
-				return false;
-			}
-			
-			
-			// wire up model events to drive the grid
-			dataView.onRowCountChanged.subscribe(function(args) {
-				grid.updateRowCount();
-			});
-			
-			dataView.onRowsChanged.subscribe(function(rows) {
-				grid.removeRows(rows);
-				grid.render();
-			});
-			
-			
-			var h_runfilters = null;
-			
-			// wire up the slider to apply the filter to the model
-			$("#pcSlider").slider({
-				"range":	"min",
-				"slide":	function(event,ui) {
-					if (GlobalEditorLock.isEditing()) 
-						GlobalEditorLock.cancelCurrentEdit();
-					
-					if (percentCompleteThreshold != ui.value) 
-					{
-						window.clearTimeout(h_runfilters);
-						h_runfilters = window.setTimeout(dataView.refresh, 10);
-						percentCompleteThreshold = ui.value;
-					}
-				}
-			});
-			
-			
-			// wire up the search textbox to apply the filter to the model
-			$("#txtSearch").keyup(function(e) {
-				if (GlobalEditorLock.isEditing()) 
-					GlobalEditorLock.cancelCurrentEdit();
-							
-				// clear on Esc			
-				if (e.which == 27) 
-					this.value = "";
-				
-				searchString = this.value;
-				dataView.refresh();
-			})
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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;
+		}
+		
+		.sort-asc {
+			background: silver url('../images/sort-asc.png') no-repeat right center !important;
+		}
+		
+		.sort-desc {
+			background: silver url('../images/sort-desc.png') no-repeat right center !important;
+		}
+		
+		.toggle {
+			height: 9px;
+			width: 9px;
+			display: inline-block;
+		}		
+		
+		.toggle.expand {
+			background: url(../images/expand.gif) no-repeat center center;
+		}
+	
+		.toggle.collapse {
+			background: url(../images/collapse.gif) no-repeat center center;
+		}
+		
+	</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		<script language="JavaScript" src="../slick.model.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				
+				<div style="border:1px solid gray;background:wheat;padding:6px;">
+				
+					<label>Show tasks with % at least: </label>
+					<div style="padding:4px;">
+						<div style="width:100px;" id="pcSlider"></div>
+					</div>
+					
+					<br/>
+					
+					<label>And title including:</label>
+					<input type=text id="txtSearch">
+				</div>
+				
+				<br/>
+				
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>implementing expand/collapse as a filter for DataView</li>
+				</ul>
+				
+			</td>
+		</tr>
+		</table>
+		
+
+		
+		<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};
+		}
+				
+				
+		var TaskNameFormatter = function(row, cell, value, columnDef, dataContext) {
+		    var spacer = "<span style='display:inline-block;height:1px;width:" + (15 * dataContext["indent"]) + "px'></span>";
+		    var idx = dataView.getIdxById(dataContext.id);
+			if (data[idx+1] && data[idx+1].indent > data[idx].indent) {
+				if (dataContext._collapsed)
+					return spacer + " <span class='toggle expand'></span>&nbsp;" + value;
+				else
+					return spacer + " <span class='toggle collapse'></span>&nbsp;" + value;
+			}				
+			else
+				return spacer + " <span class='toggle'></span>&nbsp;" + value;
+		};					
+			
+		var dataView;
+		var grid;
+		
+		var data = [];
+
+		var columns = [
+			{id:"title", name:"Title", field:"title", width:220, cssClass:"cell-title", formatter:TaskNameFormatter, editor:TextCellEditor, validator:requiredFieldValidator, setValueHandler:updateItem},
+			{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor, setValueHandler:updateItem},
+			{id:"%", name:"% Complete", field:"percentComplete", width:80, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, setValueHandler:updateItem},
+			{id:"start", name:"Start", field:"start", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
+			{id:"finish", name:"Finish", field:"finish", minWidth:60, editor:DateCellEditor, setValueHandler:updateItem},
+			{id:"effort-driven", name:"Effort Driven", width:80, minWidth:20, maxWidth:80, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, setValueHandler:updateItem, cannotTriggerInsert:true}
+		];
+
+		var options = {
+			editable: true,
+			enableAddRow: true,
+			enableCellNavigation: true,
+			asyncEditorLoading: false
+		};	
+
+
+		var percentCompleteThreshold = 0;
+		var searchString = "";
+
+		function myFilter(item) {
+			if (item["percentComplete"] < percentCompleteThreshold) 
+				return false;
+				
+			if (searchString != "" && item["title"].indexOf(searchString) == -1)
+				return false;
+				
+			var idx = dataView.getIdxById(item.id);
+		
+			if (item.parent != null) {
+				var parent = data[item.parent];
+				
+				while (parent) {
+					if (parent._collapsed || (parent["percentComplete"] < percentCompleteThreshold) || (searchString != "" && parent["title"].indexOf(searchString) == -1) ) 
+						return false;
+					
+					parent = data[parent.parent];
+				}
+			}
+				
+			return true;
+		}
+		
+		function percentCompleteSort(a,b) {
+			return a["percentComplete"] - b["percentComplete"];
+		}
+
+	
+		function updateItem(value,columnDef,item) {
+			item[columnDef.field] = value;
+			dataView.updateItem(item.id,item);
+		}
+		
+		function addItem(columnDef,value) {
+			var item = {"id": "new_" + (Math.round(Math.random()*10000)), "indent":0, "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
+			item[columnDef.field] = value;
+			dataView.addItem(item);
+		}
+
+
+		$(function()
+		{
+			var indent = 0;
+			var parents = [];
+			
+			// prepare the data
+			for (var i=0; i<1000; i++) {
+				var d = (data[i] = {});
+				var parent = null;
+				
+				if (Math.random() > 0.8) {
+					indent++;
+					parent = i - 1;
+					parents.push(parent);
+				}
+				else if (Math.random() < 0.3 && indent > 0) {
+					indent--;
+					parent = parents.pop();
+				}
+				else if (parents.length > 0)
+					parent = parents[parents.length-1];
+				
+				if (indent == 0)
+					parent = null;	
+				
+				d["id"] = "id_" + i;
+				d["indent"] = indent;
+				d["parent"] = parent;
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["effortDriven"] = (i % 5 == 0);
+			}
+			
+
+			// initialize the model
+			dataView = new DataView();
+			dataView.beginUpdate();
+			dataView.setItems(data);
+			dataView.setFilter(myFilter);
+			dataView.endUpdate();
+			
+			
+			// initialize the grid
+			grid = new SlickGrid($("#myGrid"), dataView.rows, columns, options);
+			
+			grid.onAddNewRow = addItem;
+					
+			grid.onClick = function(e,row,cell) {
+				if ($(e.target).hasClass("toggle")) {
+					
+					var item = dataView.rows[row];
+					if (item) {
+						if (!item._collapsed)
+							item._collapsed = true;
+						else 
+							item._collapsed = false;
+						
+						dataView.updateItem(item.id,item);						
+					}
+					
+					return true;
+				}
+				
+				return false;
+			}
+			
+			
+			// wire up model events to drive the grid
+			dataView.onRowCountChanged.subscribe(function(args) {
+				grid.updateRowCount();
+			});
+			
+			dataView.onRowsChanged.subscribe(function(rows) {
+				grid.removeRows(rows);
+				grid.render();
+			});
+			
+			
+			var h_runfilters = null;
+			
+			// wire up the slider to apply the filter to the model
+			$("#pcSlider").slider({
+				"range":	"min",
+				"slide":	function(event,ui) {
+					if (GlobalEditorLock.isEditing()) 
+						GlobalEditorLock.cancelCurrentEdit();
+					
+					if (percentCompleteThreshold != ui.value) 
+					{
+						window.clearTimeout(h_runfilters);
+						h_runfilters = window.setTimeout(dataView.refresh, 10);
+						percentCompleteThreshold = ui.value;
+					}
+				}
+			});
+			
+			
+			// wire up the search textbox to apply the filter to the model
+			$("#txtSearch").keyup(function(e) {
+				if (GlobalEditorLock.isEditing()) 
+					GlobalEditorLock.cancelCurrentEdit();
+							
+				// clear on Esc			
+				if (e.which == 27) 
+					this.value = "";
+				
+				searchString = this.value;
+				dataView.refresh();
+			})
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html
index bed8cad..c7e597a 100644
--- a/examples/example6-ajax-loading.html
+++ b/examples/example6-ajax-loading.html
@@ -1,161 +1,161 @@
-<!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-story {
-			white-space: normal!important;
-		}
-		
-		.sort-asc {
-			background: silver url('../images/sort-asc.png') no-repeat right center !important;
-		}
-		
-		.sort-desc {
-			background: silver url('../images/sort-desc.png') no-repeat right center !important;
-		}
-		
-		.loading-indicator {
-			display: inline-block;
-			padding: 12px;
-			background: white;
-			-opacity: 0.5;
-			color: black;
-			font-weight: bold;
-			z-index: 9999;
-			border: 1px solid red;
-			-moz-border-radius: 10px;
-			-webkit-border-radius: 10px;
-			-moz-box-shadow: 0px 0px 5px red;
-			-webkit-box-shadow: 0px 0px 5px red;	
-			-text-shadow: 1px 1px 1px white;			
-		}	
-		
-		.loading-indicator label {
-			padding-left: 20px;
-			background: url('../images/ajax-loader-small.gif') no-repeat center left;
-		}			
-		</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.jsonp-1.1.0.min.js"></script>
-			
-		<script language="JavaScript" src="../slick.remotemodel.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-				
-		<div style="width:700px;float:left;">
-			<div class="grid-header" style="width:100%">
-				<label>Digg stories</label>
-				<span style="float:right;display:inline-block;">
-					Search:
-					<input type="text" id="txtSearch" value="apple">
-				</span>
-			</div>
-			<div id="myGrid" style="width:100%;height:600px;"></div>
-			<div id="pager" style="width:100%;height:20px;"></div>
-		</div>
-		
-		
-		<div style="margin-left:750px;margin-top:40px;;">
-				<h2>Demonstrates:</h2>
-				<ul>
-					<li>loading data through AJAX</li>
-					<li>custom row height</li>
-				</ul>
-		</div>
-		
-		<script>
-		var grid;
-		var data = [];
-		var loader = new RemoteModel();
-
-		var storyTitleFormatter = function(row, cell, value, columnDef, dataContext) {
-		    return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"];
-		};
-
-		
-		var columns = [
-			{id:"num", name:"#", field:"index", width:40, sortable:false},
-			{id:"story", name:"Story", width:580, formatter:storyTitleFormatter, cssClass:"cell-story", sortable:false},
-			{id:"diggs", name:"Diggs", field:"diggs", width:60}
-		];
-
-		var options = {
-			rowHeight: 64,
-			editable: false,
-			enableAddRow: false,
-			enableCellNavigation: false
-		};	
-
-		var loadingIndicator = null;
-
-	
-	
-		$(function()
-		{
-			grid = new SlickGrid($("#myGrid"), loader.data, columns, options);
-			
-			grid.onViewportChanged = function() {
-				var vp = grid.getViewport();
-				loader.ensureData(vp.top, vp.bottom);
-			}
-			
-			grid.onSort = function(sortCol,sortAsc) {
-				loader.setSort(sortCol.field,sortAsc?1:-1);
-				var vp = grid.getViewport();
-				loader.ensureData(vp.top, vp.bottom);				
-			}			
-			
-			loader.onDataLoading.subscribe(function() {
-				if (!loadingIndicator)
-				{
-					loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
-					var $g = $("#myGrid");
-					
-					loadingIndicator	
-						.css("position", "absolute")
-						.css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2)
-						.css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2)
-				}
-				
-				loadingIndicator.show();
-			});
-			
-			loader.onDataLoaded.subscribe(function(args) {
-				for (var i = args.from; i <= args.to; i++) {
-					grid.removeRow(i);
-				}
-
-				grid.updateRowCount();				
-				grid.render();
-				
-				loadingIndicator.fadeOut();
-			});
-			
-			$("#txtSearch").keyup(function(e) {
-				if (e.which == 13) {
-					loader.setSearch($(this).val());
-					var vp = grid.getViewport();
-					loader.ensureData(vp.top, vp.bottom);					
-				}
-			})
-				
-			
-			
-			// load the first page
-			grid.onViewportChanged();
-		})
-		</script>
-	</body>
-</html>
+<!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-story {
+			white-space: normal!important;
+		}
+		
+		.sort-asc {
+			background: silver url('../images/sort-asc.png') no-repeat right center !important;
+		}
+		
+		.sort-desc {
+			background: silver url('../images/sort-desc.png') no-repeat right center !important;
+		}
+		
+		.loading-indicator {
+			display: inline-block;
+			padding: 12px;
+			background: white;
+			-opacity: 0.5;
+			color: black;
+			font-weight: bold;
+			z-index: 9999;
+			border: 1px solid red;
+			-moz-border-radius: 10px;
+			-webkit-border-radius: 10px;
+			-moz-box-shadow: 0px 0px 5px red;
+			-webkit-box-shadow: 0px 0px 5px red;	
+			-text-shadow: 1px 1px 1px white;			
+		}	
+		
+		.loading-indicator label {
+			padding-left: 20px;
+			background: url('../images/ajax-loader-small.gif') no-repeat center left;
+		}			
+		</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.jsonp-1.1.0.min.js"></script>
+			
+		<script language="JavaScript" src="../slick.remotemodel.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+				
+		<div style="width:700px;float:left;">
+			<div class="grid-header" style="width:100%">
+				<label>Digg stories</label>
+				<span style="float:right;display:inline-block;">
+					Search:
+					<input type="text" id="txtSearch" value="apple">
+				</span>
+			</div>
+			<div id="myGrid" style="width:100%;height:600px;"></div>
+			<div id="pager" style="width:100%;height:20px;"></div>
+		</div>
+		
+		
+		<div style="margin-left:750px;margin-top:40px;;">
+				<h2>Demonstrates:</h2>
+				<ul>
+					<li>loading data through AJAX</li>
+					<li>custom row height</li>
+				</ul>
+		</div>
+		
+		<script>
+		var grid;
+		var data = [];
+		var loader = new RemoteModel();
+
+		var storyTitleFormatter = function(row, cell, value, columnDef, dataContext) {
+		    return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"];
+		};
+
+		
+		var columns = [
+			{id:"num", name:"#", field:"index", width:40, sortable:false},
+			{id:"story", name:"Story", width:580, formatter:storyTitleFormatter, cssClass:"cell-story", sortable:false},
+			{id:"diggs", name:"Diggs", field:"diggs", width:60}
+		];
+
+		var options = {
+			rowHeight: 64,
+			editable: false,
+			enableAddRow: false,
+			enableCellNavigation: false
+		};	
+
+		var loadingIndicator = null;
+
+	
+	
+		$(function()
+		{
+			grid = new SlickGrid($("#myGrid"), loader.data, columns, options);
+			
+			grid.onViewportChanged = function() {
+				var vp = grid.getViewport();
+				loader.ensureData(vp.top, vp.bottom);
+			}
+			
+			grid.onSort = function(sortCol,sortAsc) {
+				loader.setSort(sortCol.field,sortAsc?1:-1);
+				var vp = grid.getViewport();
+				loader.ensureData(vp.top, vp.bottom);				
+			}			
+			
+			loader.onDataLoading.subscribe(function() {
+				if (!loadingIndicator)
+				{
+					loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
+					var $g = $("#myGrid");
+					
+					loadingIndicator	
+						.css("position", "absolute")
+						.css("top", $g.position().top + $g.height()/2 - loadingIndicator.height()/2)
+						.css("left", $g.position().left + $g.width()/2 - loadingIndicator.width()/2)
+				}
+				
+				loadingIndicator.show();
+			});
+			
+			loader.onDataLoaded.subscribe(function(args) {
+				for (var i = args.from; i <= args.to; i++) {
+					grid.removeRow(i);
+				}
+
+				grid.updateRowCount();				
+				grid.render();
+				
+				loadingIndicator.fadeOut();
+			});
+			
+			$("#txtSearch").keyup(function(e) {
+				if (e.which == 13) {
+					loader.setSearch($(this).val());
+					var vp = grid.getViewport();
+					loader.ensureData(vp.top, vp.bottom);					
+				}
+			})
+				
+			
+			
+			// load the first page
+			grid.onViewportChanged();
+		})
+		</script>
+	</body>
+</html>
diff --git a/examples/example7-events.html b/examples/example7-events.html
index 3a325a3..3660cc2 100644
--- a/examples/example7-events.html
+++ b/examples/example7-events.html
@@ -1,159 +1,159 @@
-<!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;
-		}
-		
-	
-		#contextMenu
-		{
-			background: #e1efc7;
-			border: 1px solid gray; 
-			padding: 2px;
-			display: inline-block;
-			min-width: 100px;
-			-moz-box-shadow: 2px 2px 2px silver;
-			-webkit-box-shadow: 2px 2px 2px silver;
-			z-index: 99999;		
-		}
-		
-		#contextMenu li
-		{
-			padding: 4px;	
-			list-style: none;
-			cursor: pointer;
-			background: url("../images/arrow_right_peppermint.png") no-repeat center left;
-			padding-left: 14px;
-		} 
-		
-		#contextMenu li:hover
-		{
-			background-color: white;
-		}
-	</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>handling events from the grid:</li>
-					<li>Right-click the row to open the context menu</li>
-					<li>Click the priority cell to toggle values</li>
-				</ul>
-				
-			</td>
-		</tr>
-		</table>
-		
-
-		
-		
-		<ul id="contextMenu" style="display:none;position:absolute">
-			<b>Set priority:</b>
-			<li data="Low">Low</li>
-			<li data="Medium">Medium</li>
-			<li data="High">High</li>
-		</ul>
-		
-		
-		
-		<script>
-		var grid;	
-		var data = [];
-		
-		var columns = [
-			{id:"title", name:"Title", field:"title", width:200, cssClass:"cell-title", editor:TextCellEditor},
-			{id:"priority", name:"Priority", field:"priority", width:80, unselectable:true, resizable:false}
-		];
-
-		var options = {
-			editable: true,
-			enableAddRow: false,
-			enableCellNavigation: true,
-			asyncEditorLoading: false,
-			rowHeight: 30
-		};	
-
-		
-
-
-		$(function()
-		{
-			for (var i=0; i<100; i++) {
-				var d = (data[i] = {});
-
-				d["title"] = "Task " + i;
-				d["priority"] = "Medium";
-			}
-
-					
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-			
-			grid.onContextMenu = function (e, row, cell) 
-			{
-				$("#contextMenu")
-					.data("row", row)
-					.css("top", e.pageY)
-					.css("left", e.pageX)
-					.show();
-				
-				$("body").one("click", function() { $("#contextMenu").hide(); })
-				
-				return true;
-			}
-			
-			grid.onClick = function (e, row, cell) 
-			{
-				if (columns[cell].id == "priority")
-				{
-					var states = { "Low": "Medium", "Medium": "High", "High": "Low" };
-					
-					data[row].priority = states[data[row].priority];
-					grid.updateRow(row);
-					
-					return true;
-				}
-			}
-		})
-		
-		
-		$("#contextMenu").click(function(e) {
-			if (!$(e.target).is("li"))
-				return;
-			
-			var row = $(this).data("row");
-			data[row].priority = $(e.target).attr("data");
-			grid.updateRow(row);
-		});
-			
-		
-		
-		</script>
-
-	</body>
-</html>
+<!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;
+		}
+		
+	
+		#contextMenu
+		{
+			background: #e1efc7;
+			border: 1px solid gray; 
+			padding: 2px;
+			display: inline-block;
+			min-width: 100px;
+			-moz-box-shadow: 2px 2px 2px silver;
+			-webkit-box-shadow: 2px 2px 2px silver;
+			z-index: 99999;		
+		}
+		
+		#contextMenu li
+		{
+			padding: 4px;	
+			list-style: none;
+			cursor: pointer;
+			background: url("../images/arrow_right_peppermint.png") no-repeat center left;
+			padding-left: 14px;
+		} 
+		
+		#contextMenu li:hover
+		{
+			background-color: white;
+		}
+	</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>handling events from the grid:</li>
+					<li>Right-click the row to open the context menu</li>
+					<li>Click the priority cell to toggle values</li>
+				</ul>
+				
+			</td>
+		</tr>
+		</table>
+		
+
+		
+		
+		<ul id="contextMenu" style="display:none;position:absolute">
+			<b>Set priority:</b>
+			<li data="Low">Low</li>
+			<li data="Medium">Medium</li>
+			<li data="High">High</li>
+		</ul>
+		
+		
+		
+		<script>
+		var grid;	
+		var data = [];
+		
+		var columns = [
+			{id:"title", name:"Title", field:"title", width:200, cssClass:"cell-title", editor:TextCellEditor},
+			{id:"priority", name:"Priority", field:"priority", width:80, unselectable:true, resizable:false}
+		];
+
+		var options = {
+			editable: true,
+			enableAddRow: false,
+			enableCellNavigation: true,
+			asyncEditorLoading: false,
+			rowHeight: 30
+		};	
+
+		
+
+
+		$(function()
+		{
+			for (var i=0; i<100; i++) {
+				var d = (data[i] = {});
+
+				d["title"] = "Task " + i;
+				d["priority"] = "Medium";
+			}
+
+					
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+			
+			grid.onContextMenu = function (e, row, cell) 
+			{
+				$("#contextMenu")
+					.data("row", row)
+					.css("top", e.pageY)
+					.css("left", e.pageX)
+					.show();
+				
+				$("body").one("click", function() { $("#contextMenu").hide(); })
+				
+				return true;
+			}
+			
+			grid.onClick = function (e, row, cell) 
+			{
+				if (columns[cell].id == "priority")
+				{
+					var states = { "Low": "Medium", "Medium": "High", "High": "Low" };
+					
+					data[row].priority = states[data[row].priority];
+					grid.updateRow(row);
+					
+					return true;
+				}
+			}
+		})
+		
+		
+		$("#contextMenu").click(function(e) {
+			if (!$(e.target).is("li"))
+				return;
+			
+			var row = $(this).data("row");
+			data[row].priority = $(e.target).attr("data");
+			grid.updateRow(row);
+		});
+			
+		
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/example8-alternative-display.html b/examples/example8-alternative-display.html
index 3a5cfe5..fdd44dd 100644
--- a/examples/example8-alternative-display.html
+++ b/examples/example8-alternative-display.html
@@ -1,178 +1,178 @@
-<!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>
-		.r .c {
-			background: white!important;
-			border-color: transparent!important;
-		}	
-		
-		/* alternating offsets */
-		.r .cell-inner {
-			margin-right: 60px;
-		}
-		
-		.r[row$="1"] .cell-inner,  .r[row$="3"] .cell-inner,  .r[row$="5"] .cell-inner,  
-		.r[row$="7"] .cell-inner, .r[row$="9"] .cell-inner {
-			margin-left: 60px;
-			margin-right: 0px;
-		}		
-		
-		.contact-card-cell {
-			border-color: transparent!important;
-		}
-		
-		.cell-inner {
-			height: 80px;
-			margin: 10px;
-			padding: 10px;
-			background: #fafafa;
-			border: 1px solid gray;
-			-moz-border-radius: 10px;
-			-webkit-border-radius: 10px;
-			-moz-box-shadow: 1px 1px 5px silver;
-			-webkit-box-shadow: 1px 1px 5px silver;
-			-webkit-transition: all 0.5s;
-		}
-		
-		.cell-inner:hover {
-			background: #f0f0f0;
-		}
-		
-		.cell-left {
-			width: 40px;
-			height: 100%;
-			float: left;
-			border-right: 1px dotted gray;
-			background: url("../images/user_identity.gif") no-repeat top center;
-		}
-		
-		.cell-main {
-			margin-left: 50px;
-		}
-	</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="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<table width="100%">
-		<tr>
-			<td valign="top" width="50%">
-				<div id="myGrid" style="width:600px;height:500px;"></div>
-			</td>
-			<td valign="top">
-				<h2>Demonstrates:</h2>
-				
-				<ul>
-					<li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" target=_blank>micro-templates</a> while still using SlickGrid's virtual rendering technology.</li>					
-				</ul>
-			</td>
-		</tr>
-		</table>
-
-
-		<!-- cell template -->		
-		<script type="text/html" id="cell_template">
-			<div class="cell-inner">
-				<div class="cell-left"></div>
-				<div class="cell-main">
-					<b><%=name%></b><br/>
-					<%=title%><br/>
-					<%=email%><br/>
-					<%=phone%>
-				</div>
-			</div>
-		</script>
-
-
-		
-		<script>
-		// Simple JavaScript Templating
-		// John Resig - http://ejohn.org/ - MIT Licensed
-		(function(){
-		  var cache = {};
-		 
-		  this.tmpl = function tmpl(str, data){
-		    // Figure out if we're getting a template, or if we need to
-		    // load the template - and be sure to cache the result.
-		    var fn = !/\W/.test(str) ?
-		      cache[str] = cache[str] ||
-		        tmpl(document.getElementById(str).innerHTML) :
-		     
-		      // Generate a reusable function that will serve as a template
-		      // generator (and which will be cached).
-		      new Function("obj",
-		        "var p=[],print=function(){p.push.apply(p,arguments);};" +
-		       
-		        // Introduce the data as local variables using with(){}
-		        "with(obj){p.push('" +
-		       
-		        // Convert the template into pure JavaScript
-		        str
-		          .replace(/[\r\t\n]/g, " ")
-		          .split("<%").join("\t")
-		          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
-		          .replace(/\t=(.*?)%>/g, "',$1,'")
-		          .split("\t").join("');")
-		          .split("%>").join("p.push('")
-		          .split("\r").join("\\'")
-		      + "');}return p.join('');");
-		   
-		    // Provide some basic currying to the user
-		    return data ? fn( data ) : fn;
-		  };
-		})();
-			
-			
-		var grid;
-		var data = [];
-
-		var columns = [
-			{id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"}
-		];
-
-		var options = {
-			rowHeight: 140,
-			editable: false,
-			enableAddRow: false,
-			enableCellNavigation: false
-		};	
-
-		var compiled_template = tmpl("cell_template");
-		
-		function renderCell(row, cell, value, columnDef, dataContext) {
-			return compiled_template(dataContext);
-		}
-
-		$(function()
-		{
-			for (var i=0; i<100; i++) {
-				var d = (data[i] = {});
-
-				d["name"] = "User " + i;
-				d["email"] = "test.user@nospam.org";
-				d["title"] = "Regional sales manager";
-				d["phone"] = "206-000-0000";
-			}
-
-					
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-		})
-		
-		</script>
-	</body>
-</html>
+<!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>
+		.r .c {
+			background: white!important;
+			border-color: transparent!important;
+		}	
+		
+		/* alternating offsets */
+		.r .cell-inner {
+			margin-right: 60px;
+		}
+		
+		.r[row$="1"] .cell-inner,  .r[row$="3"] .cell-inner,  .r[row$="5"] .cell-inner,  
+		.r[row$="7"] .cell-inner, .r[row$="9"] .cell-inner {
+			margin-left: 60px;
+			margin-right: 0px;
+		}		
+		
+		.contact-card-cell {
+			border-color: transparent!important;
+		}
+		
+		.cell-inner {
+			height: 80px;
+			margin: 10px;
+			padding: 10px;
+			background: #fafafa;
+			border: 1px solid gray;
+			-moz-border-radius: 10px;
+			-webkit-border-radius: 10px;
+			-moz-box-shadow: 1px 1px 5px silver;
+			-webkit-box-shadow: 1px 1px 5px silver;
+			-webkit-transition: all 0.5s;
+		}
+		
+		.cell-inner:hover {
+			background: #f0f0f0;
+		}
+		
+		.cell-left {
+			width: 40px;
+			height: 100%;
+			float: left;
+			border-right: 1px dotted gray;
+			background: url("../images/user_identity.gif") no-repeat top center;
+		}
+		
+		.cell-main {
+			margin-left: 50px;
+		}
+	</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="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<table width="100%">
+		<tr>
+			<td valign="top" width="50%">
+				<div id="myGrid" style="width:600px;height:500px;"></div>
+			</td>
+			<td valign="top">
+				<h2>Demonstrates:</h2>
+				
+				<ul>
+					<li>Template-based rendering using John Resig's <a href="http://ejohn.org/blog/javascript-micro-templating/" target=_blank>micro-templates</a> while still using SlickGrid's virtual rendering technology.</li>					
+				</ul>
+			</td>
+		</tr>
+		</table>
+
+
+		<!-- cell template -->		
+		<script type="text/html" id="cell_template">
+			<div class="cell-inner">
+				<div class="cell-left"></div>
+				<div class="cell-main">
+					<b><%=name%></b><br/>
+					<%=title%><br/>
+					<%=email%><br/>
+					<%=phone%>
+				</div>
+			</div>
+		</script>
+
+
+		
+		<script>
+		// Simple JavaScript Templating
+		// John Resig - http://ejohn.org/ - MIT Licensed
+		(function(){
+		  var cache = {};
+		 
+		  this.tmpl = function tmpl(str, data){
+		    // Figure out if we're getting a template, or if we need to
+		    // load the template - and be sure to cache the result.
+		    var fn = !/\W/.test(str) ?
+		      cache[str] = cache[str] ||
+		        tmpl(document.getElementById(str).innerHTML) :
+		     
+		      // Generate a reusable function that will serve as a template
+		      // generator (and which will be cached).
+		      new Function("obj",
+		        "var p=[],print=function(){p.push.apply(p,arguments);};" +
+		       
+		        // Introduce the data as local variables using with(){}
+		        "with(obj){p.push('" +
+		       
+		        // Convert the template into pure JavaScript
+		        str
+		          .replace(/[\r\t\n]/g, " ")
+		          .split("<%").join("\t")
+		          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
+		          .replace(/\t=(.*?)%>/g, "',$1,'")
+		          .split("\t").join("');")
+		          .split("%>").join("p.push('")
+		          .split("\r").join("\\'")
+		      + "');}return p.join('');");
+		   
+		    // Provide some basic currying to the user
+		    return data ? fn( data ) : fn;
+		  };
+		})();
+			
+			
+		var grid;
+		var data = [];
+
+		var columns = [
+			{id:"contact-card", name:"Contacts", formatter:renderCell, width:500, cssClass:"contact-card-cell"}
+		];
+
+		var options = {
+			rowHeight: 140,
+			editable: false,
+			enableAddRow: false,
+			enableCellNavigation: false
+		};	
+
+		var compiled_template = tmpl("cell_template");
+		
+		function renderCell(row, cell, value, columnDef, dataContext) {
+			return compiled_template(dataContext);
+		}
+
+		$(function()
+		{
+			for (var i=0; i<100; i++) {
+				var d = (data[i] = {});
+
+				d["name"] = "User " + i;
+				d["email"] = "test.user@nospam.org";
+				d["title"] = "Regional sales manager";
+				d["phone"] = "206-000-0000";
+			}
+
+					
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+		})
+		
+		</script>
+	</body>
+</html>
diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
index 8c45adc..a245f94 100644
--- a/examples/example9-row-reordering.html
+++ b/examples/example9-row-reordering.html
@@ -1,166 +1,166 @@
-<!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;
-		}
-		.cell-reorder {
-			cursor: move;
-			background-image: url("../images/bullet_blue.png");
-			background-repeat: no-repeat;
-			background-position: center center;
-		}
-	</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="../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>Santa's TODO list:</label>
-			</div>
-			<div id="myGrid" style="width:100%;height:500px;"></div>
-		</div>		
-		
-		<div class="options-panel" style="width:320px;margin-left:650px;">
-			<b>Tools:</b>
-			<hr/>
-			<div style="padding:6px;">
-				<br/><br/>
-				<button id="btnSelectRows" onclick="grid.setSelectedRows([0,1,2])">Select first 3 rows</button>
-			</div>
-		</div>
-
-		
-		<script>
-		var grid;
-		
-		var data = [];
-
-        var columns = [{
-            id: "#",
-            name: "",
-            width: 40,
-            behavior: "move",
-            unselectable: true,
-            sortable: false,
-            resizable: false,
-            cssClass: "cell-reorder"
-        }, {
-            id: "name",
-            name: "Name",
-            field: "name",
-            width: 500,
-            cssClass: "cell-title",
-            editor: TextCellEditor,
-            validator: requiredFieldValidator
-        }, {
-            id: "complete",
-            name: "Complete",
-            sortable: false,
-            width: 60,
-            cssClass: "cell-effort-driven",
-            field: "complete",
-            cannotTriggerInsert: true,
-            formatter: BoolCellFormatter,
-            editor: YesNoCheckboxCellEditor
-        }];
-
-		var options = {
-			editable: true,
-			enableAddRow: true,
-			enableCellNavigation: true,
-			forceFitColumns: true
-		};	
-
-		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()
-		{
-			data = [
-				{ name: "Make a list", complete: true},
-				{ name: "Check it twice", complete: false},
-				{ name: "Find out who's naughty", complete: false},
-				{ name: "Find out who's nice", complete: false}
-			];
-			
-			grid = new SlickGrid($("#myGrid"), data, columns, options);
-			
-			grid.onAddNewRow =  function addItem(columnDef,value) {
-				var item = {name:"New task", complete: false};
-				item[columnDef.field] = value;
-				data.push(item);
-				grid.removeRows([data.length-1]);
-				grid.updateRowCount();
-				grid.render();
-			}
-			
-			grid.onBeforeMoveRows = function(rows,insertBefore) {
-				for (var i=0; i<rows.length; i++) {
-					// no point in moving before or after itself
-					if (rows[i] == insertBefore || rows[i] == insertBefore - 1) return false;
-				}
-				
-				return true;
-			}
-			
-			grid.onMoveRows = function(rows,insertBefore) {
-				var extractedRows = [], left, right;
-				left = data.slice(0,insertBefore);
-				right = data.slice(insertBefore,data.length);
-				
-				for (var i=0; i<rows.length; i++) {
-					extractedRows.push(data[rows[i]]);
-				}
-
-				rows.sort().reverse();
-				
-				for (var i=0; i<rows.length; i++) {
-					var row = rows[i];
-					if (row < insertBefore)
-						left.splice(row,1);
-					else
-						right.splice(row-insertBefore,1);
-				}
-								
-				data = left.concat(extractedRows.concat(right));
-				
-				var selectedRows = [];
-				for (var i=0; i<rows.length; i++) 
-					selectedRows.push(left.length+i);
-				
-				grid.setData(data);
-				grid.setSelectedRows(selectedRows);
-				grid.render();
-			}
-		})
-		
-		</script>
-
-	</body>
-</html>
+<!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;
+		}
+		.cell-reorder {
+			cursor: move;
+			background-image: url("../images/bullet_blue.png");
+			background-repeat: no-repeat;
+			background-position: center center;
+		}
+	</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="../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>Santa's TODO list:</label>
+			</div>
+			<div id="myGrid" style="width:100%;height:500px;"></div>
+		</div>		
+		
+		<div class="options-panel" style="width:320px;margin-left:650px;">
+			<b>Tools:</b>
+			<hr/>
+			<div style="padding:6px;">
+				<br/><br/>
+				<button id="btnSelectRows" onclick="grid.setSelectedRows([0,1,2])">Select first 3 rows</button>
+			</div>
+		</div>
+
+		
+		<script>
+		var grid;
+		
+		var data = [];
+
+        var columns = [{
+            id: "#",
+            name: "",
+            width: 40,
+            behavior: "move",
+            unselectable: true,
+            sortable: false,
+            resizable: false,
+            cssClass: "cell-reorder"
+        }, {
+            id: "name",
+            name: "Name",
+            field: "name",
+            width: 500,
+            cssClass: "cell-title",
+            editor: TextCellEditor,
+            validator: requiredFieldValidator
+        }, {
+            id: "complete",
+            name: "Complete",
+            sortable: false,
+            width: 60,
+            cssClass: "cell-effort-driven",
+            field: "complete",
+            cannotTriggerInsert: true,
+            formatter: BoolCellFormatter,
+            editor: YesNoCheckboxCellEditor
+        }];
+
+		var options = {
+			editable: true,
+			enableAddRow: true,
+			enableCellNavigation: true,
+			forceFitColumns: true
+		};	
+
+		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()
+		{
+			data = [
+				{ name: "Make a list", complete: true},
+				{ name: "Check it twice", complete: false},
+				{ name: "Find out who's naughty", complete: false},
+				{ name: "Find out who's nice", complete: false}
+			];
+			
+			grid = new SlickGrid($("#myGrid"), data, columns, options);
+			
+			grid.onAddNewRow =  function addItem(columnDef,value) {
+				var item = {name:"New task", complete: false};
+				item[columnDef.field] = value;
+				data.push(item);
+				grid.removeRows([data.length-1]);
+				grid.updateRowCount();
+				grid.render();
+			}
+			
+			grid.onBeforeMoveRows = function(rows,insertBefore) {
+				for (var i=0; i<rows.length; i++) {
+					// no point in moving before or after itself
+					if (rows[i] == insertBefore || rows[i] == insertBefore - 1) return false;
+				}
+				
+				return true;
+			}
+			
+			grid.onMoveRows = function(rows,insertBefore) {
+				var extractedRows = [], left, right;
+				left = data.slice(0,insertBefore);
+				right = data.slice(insertBefore,data.length);
+				
+				for (var i=0; i<rows.length; i++) {
+					extractedRows.push(data[rows[i]]);
+				}
+
+				rows.sort().reverse();
+				
+				for (var i=0; i<rows.length; i++) {
+					var row = rows[i];
+					if (row < insertBefore)
+						left.splice(row,1);
+					else
+						right.splice(row-insertBefore,1);
+				}
+								
+				data = left.concat(extractedRows.concat(right));
+				
+				var selectedRows = [];
+				for (var i=0; i<rows.length; i++) 
+					selectedRows.push(left.length+i);
+				
+				grid.setData(data);
+				grid.setSelectedRows(selectedRows);
+				grid.render();
+			}
+		})
+		
+		</script>
+
+	</body>
+</html>
diff --git a/examples/examples.css b/examples/examples.css
index 089ba65..8d46143 100644
--- a/examples/examples.css
+++ b/examples/examples.css
@@ -1,221 +1,221 @@
- * {
-    font-family: arial;
-    font-size: 8pt;
-}
-
-body {
-    background: beige;
-}
-
-h2 {
-    font-size: 10pt;
-    border-bottom: 1px dotted gray;
-}
-
-ul {
-    margin-left: 0px;
-    padding: 0px;
-    cursor: default;
-}
-
-li {
-    background: url("../images/arrow_right_spearmint.png") no-repeat center left;
-    padding: 0px;
-    padding-left: 14px;
-    list-style: none;
-    margin: 0px;
-} 
-
-#myGrid {
-    background: white;
-    outline: 0px;
-    border: 1px solid gray;
-}
-
-.grid-header {
-	border: 1px solid gray;
-	border-bottom: 0px;
-	border-top: 0px;
-	background: url('../images/header-bg.gif') repeat-x center top;
-	color: black;
-	height: 24px;
-	line-height: 24px;
-}	
-
-.grid-header label {
-	display: inline-block;
-	font-weight: bold;
-	margin: auto;
-	margin-left: 6px;
-}	
-
-.grid-header #txtSearch {
-	margin: 0px 4px 0px 4px;
-	padding: 2px 2px;
-	-moz-border-radius: 2px;
-	-webkit-border-radius: 2px;
-	border: 1px solid silver;
-}
-
-.options-panel {
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	border: 1px solid silver;
-	background: #f0f0f0;	
-	padding: 4px;		
-	margin-bottom: 20px;
-}
-
-
-/* Individual cell styles */
-.grid-canvas .r .c.task-name {
-	font-weight: bold;
-	text-align: right;
-}
-
-
-.grid-canvas .r .c.task-percent {
-	text-align: right;
-}
-
-
-.grid-canvas .r .c.cell-move-handle {
-	font-weight: bold;
-	text-align: right;
-	border-right-style: solid;
-	border-right-color: gray;
-
-	background: #efefef;
-	cursor: move;
-}
-
-.grid-canvas .r .cell-move-handle:hover {
-	background: #b6b9bd;
-}
-
-.grid-canvas .r.selected .cell-move-handle {
-	background: #D5DC8D;
-}
-
-.grid-canvas .r .cell-actions {
-	text-align: left;
-}
-
-.percent-complete-bar {
-	display: inline-block;
-	height: 6px;
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;
-}
-
-
-/* TextCellEditor, DateCellEditor */
-
-.grid-canvas .r .c input.editor-text {
-	width: 100%;
-	height: 100%;
-	border: 0px;
-	margin: 0px;
-	background: transparent;
-	outline: 0px; 
-	padding: 0px;
-	padding-top: 3px;
-}
-
-.grid-canvas .r .c .ui-datepicker-trigger {
-	margin-top: 2px;
-	padding: 0px;
-	vertical-align: top;
-}
-
-/* PercentCompleteCellEditor */
-
-.grid-canvas .r .c input.editor-percentcomplete {
-	width: 100%;
-	height: 100%;
-	border: 0px;
-	margin: 0px;
-	background: transparent;
-	outline: 0px; 
-	padding: 0px;
-	padding-top: 3px;
-	float: left;
-}
-
-.grid-canvas .r .c .editor-percentcomplete-picker {
-	position: relative;
-    display: inline-block;
-    width: 16px;
-    height: 100%;
-    background: url("../images/pencil.gif") no-repeat center center;	
-	overflow: visible;
-	z-index: 1000;
-	float: right;
-}
-	
-.grid-canvas .r .c .editor-percentcomplete-helper {
-    border: 1px solid gray;
-    position: absolute;
-    top: -2px;
-    left: -9px;
-    background: url("../images/editor-helper-bg.gif") no-repeat top left;
-    padding-left: 9px;
-    border: 0px;
-    width: 120px;
-    height: 140px;
-    display: none;	
-	overflow: visible;
-}
-
-
-.grid-canvas .r .c .editor-percentcomplete-wrapper {
-	background:beige;
-	padding:8px;
-	padding-top:20px;
-	padding-bottom:20px;
-	width:100%;
-	height:98px;
-	border:1px solid gray;
-	border-left:0px;	
-}
-
-.grid-canvas .r .c .editor-percentcomplete-buttons {
-	float: right;	
-}
-
-.grid-canvas .r .c .editor-percentcomplete-buttons button {
-	width: 80px;	
-}
-
-
-.grid-canvas .r .c .editor-percentcomplete-slider {
-	float: left;	
-}
-
-.grid-canvas .r .c .editor-percentcomplete-picker:hover .editor-percentcomplete-helper {
-	display: block;
-}
-
-.grid-canvas .r .c .editor-percentcomplete-helper:hover {
-	display: block;
-}
-
-
-
-/* YesNoSelectCellEditor */
-
-.grid-canvas .r .c select.editor-yesno {
-	width: 100%;
-	margin: 0px;
-	vertical-align: middle;		
-}
-
-/* YesNoCheckboxCellEditor */
-.grid-canvas .r .c input.editor-checkbox {
-	margin: 0px;
-	height: 100%;
-	padding: 0px;
-	border: 0px;
-}
-
-
+ * {
+    font-family: arial;
+    font-size: 8pt;
+}
+
+body {
+    background: beige;
+}
+
+h2 {
+    font-size: 10pt;
+    border-bottom: 1px dotted gray;
+}
+
+ul {
+    margin-left: 0px;
+    padding: 0px;
+    cursor: default;
+}
+
+li {
+    background: url("../images/arrow_right_spearmint.png") no-repeat center left;
+    padding: 0px;
+    padding-left: 14px;
+    list-style: none;
+    margin: 0px;
+} 
+
+#myGrid {
+    background: white;
+    outline: 0px;
+    border: 1px solid gray;
+}
+
+.grid-header {
+	border: 1px solid gray;
+	border-bottom: 0px;
+	border-top: 0px;
+	background: url('../images/header-bg.gif') repeat-x center top;
+	color: black;
+	height: 24px;
+	line-height: 24px;
+}	
+
+.grid-header label {
+	display: inline-block;
+	font-weight: bold;
+	margin: auto;
+	margin-left: 6px;
+}	
+
+.grid-header #txtSearch {
+	margin: 0px 4px 0px 4px;
+	padding: 2px 2px;
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	border: 1px solid silver;
+}
+
+.options-panel {
+	-moz-border-radius: 6px;
+	-webkit-border-radius: 6px;
+	border: 1px solid silver;
+	background: #f0f0f0;	
+	padding: 4px;		
+	margin-bottom: 20px;
+}
+
+
+/* Individual cell styles */
+.grid-canvas .r .c.task-name {
+	font-weight: bold;
+	text-align: right;
+}
+
+
+.grid-canvas .r .c.task-percent {
+	text-align: right;
+}
+
+
+.grid-canvas .r .c.cell-move-handle {
+	font-weight: bold;
+	text-align: right;
+	border-right-style: solid;
+	border-right-color: gray;
+
+	background: #efefef;
+	cursor: move;
+}
+
+.grid-canvas .r .cell-move-handle:hover {
+	background: #b6b9bd;
+}
+
+.grid-canvas .r.selected .cell-move-handle {
+	background: #D5DC8D;
+}
+
+.grid-canvas .r .cell-actions {
+	text-align: left;
+}
+
+.percent-complete-bar {
+	display: inline-block;
+	height: 6px;
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+}
+
+
+/* TextCellEditor, DateCellEditor */
+
+.grid-canvas .r .c input.editor-text {
+	width: 100%;
+	height: 100%;
+	border: 0px;
+	margin: 0px;
+	background: transparent;
+	outline: 0px; 
+	padding: 0px;
+	padding-top: 3px;
+}
+
+.grid-canvas .r .c .ui-datepicker-trigger {
+	margin-top: 2px;
+	padding: 0px;
+	vertical-align: top;
+}
+
+/* PercentCompleteCellEditor */
+
+.grid-canvas .r .c input.editor-percentcomplete {
+	width: 100%;
+	height: 100%;
+	border: 0px;
+	margin: 0px;
+	background: transparent;
+	outline: 0px; 
+	padding: 0px;
+	padding-top: 3px;
+	float: left;
+}
+
+.grid-canvas .r .c .editor-percentcomplete-picker {
+	position: relative;
+    display: inline-block;
+    width: 16px;
+    height: 100%;
+    background: url("../images/pencil.gif") no-repeat center center;	
+	overflow: visible;
+	z-index: 1000;
+	float: right;
+}
+	
+.grid-canvas .r .c .editor-percentcomplete-helper {
+    border: 1px solid gray;
+    position: absolute;
+    top: -2px;
+    left: -9px;
+    background: url("../images/editor-helper-bg.gif") no-repeat top left;
+    padding-left: 9px;
+    border: 0px;
+    width: 120px;
+    height: 140px;
+    display: none;	
+	overflow: visible;
+}
+
+
+.grid-canvas .r .c .editor-percentcomplete-wrapper {
+	background:beige;
+	padding:8px;
+	padding-top:20px;
+	padding-bottom:20px;
+	width:100%;
+	height:98px;
+	border:1px solid gray;
+	border-left:0px;	
+}
+
+.grid-canvas .r .c .editor-percentcomplete-buttons {
+	float: right;	
+}
+
+.grid-canvas .r .c .editor-percentcomplete-buttons button {
+	width: 80px;	
+}
+
+
+.grid-canvas .r .c .editor-percentcomplete-slider {
+	float: left;	
+}
+
+.grid-canvas .r .c .editor-percentcomplete-picker:hover .editor-percentcomplete-helper {
+	display: block;
+}
+
+.grid-canvas .r .c .editor-percentcomplete-helper:hover {
+	display: block;
+}
+
+
+
+/* YesNoSelectCellEditor */
+
+.grid-canvas .r .c select.editor-yesno {
+	width: 100%;
+	margin: 0px;
+	vertical-align: middle;		
+}
+
+/* YesNoCheckboxCellEditor */
+.grid-canvas .r .c input.editor-checkbox {
+	margin: 0px;
+	height: 100%;
+	padding: 0px;
+	border: 0px;
+}
+
+
diff --git a/examples/grid.html b/examples/grid.html
index 6cbd746..4bf45d2 100644
--- a/examples/grid.html
+++ b/examples/grid.html
@@ -1,361 +1,361 @@
-<!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>Spreadsheet prototype</title>
-		<link rel="stylesheet" href="simpledropdown.css" type="text/css" media="screen" charset="utf-8" />
-		<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" />
-		<style>
-		*
-		{
-			font-family: arial;
-			font-size: 8pt;
-		}
-		
-		hr {
-			height: 1px;
-			border: 0;
-			background: silver;
-		}
-		
-		#grid {
-			background: white;
-			outline: 0px;
-		}
-		
-		ul {
-			padding: 0px;
-			cursor: default;
-		}
-			
-		li {
-			background: url("../images/arrow_right_spearmint.png") no-repeat 0px center;
-			padding-left: 12px;
-			list-style: none;
-			margin: 0px;
-		}
-			
-		li:hover {
-			background: url("../images/arrow_right_peppermint.png") no-repeat 0px center;
-		}
-				
-		.listview-header {
-			height: 24px;
-			line-height: 24px;
-			width: 100%;
-			background: url("../images/listview.gif") no-repeat top left;
-		}
-			
-		.listview-header .r {
-			float:right;
-			text-align: right;
-			width: 50%;
-			height: 24px;
-			background: white url("../images/listview.gif") no-repeat top right;
-			line-height: 24px;
-		}
-		
-		.listview-header input {
-			border: 1px solid silver;
-		}
-		.listview-footer {
-			height: 24px;
-			line-height: 24px;
-			width: 100%;
-			background: url("../images/listview.gif") no-repeat left -24px;
-		}
-			
-		.listview-footer .r {
-			float:right;
-			text-align: right;
-			width: 50%;
-			height: 24px;
-			background: white url("../images/listview.gif") no-repeat right -24px;
-			line-height: 24px;
-		}
-		</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="../slick.editors.js"></script>
-		<script language="JavaScript" src="../slick.grid.js"></script>
-		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
-		
-		
-		<div class="listview-header">
-			<div style="float:left;padding-left:14px;">
-			
-			<span class="simple-dropdown">
-				<em>Reload grid</em>
-				<div>
-				<a href="javascript:reinitGrid(10)">Load 10 rows</a>
-				<a href="javascript:reinitGrid(100)">Load 100 rows</a>
-				<a href="javascript:reinitGrid(500)">Load 500 rows</a>
-				<a href="javascript:reinitGrid(1000)">Load 1'000 rows</a>
-				<a href="javascript:reinitGrid(5000)">Load 5'000 rows</a>
-				<a href="javascript:reinitGrid(50000)">Load 50'000 rows</a>				
-				</div>
-			</span>					
-			
-			<span class="simple-dropdown">
-				<em>Change column styles</em>
-				<div>
-				<a href="javascript:updateModel('%', {formatter:PercentCompleteCellFormatter, cssClass:'task-percent'})">Render <b>% Complete</b> as text</a>
-				<a href="javascript:updateModel('%', {formatter:GraphicalPercentCompleteCellFormatter, cssClass:null})">Render <b>% Complete</b> as graph</a>
-				</div>
-			</span>				
-
-			<span class="simple-dropdown">
-				<em>Select rows</em>
-				<div>
-				<a href="javascript:grid.setSelectedRows([0,1,2,3,4])">0 - 5</a>
-				</div>
-			</span>	
-
-			<span class="simple-dropdown">
-				<em>Options</em>
-				<div>
-				<a href="javascript:grid.setOptions({enableAddRow:true})">enableAddRow = true</a>
-				<a href="javascript:grid.setOptions({enableAddRow:false})">enableAddRow = false</a>
-				<hr/>
-				<a href="javascript:grid.setOptions({editable:true})">editable = true</a>
-				<a href="javascript:grid.setOptions({editable:false})">editable = false</a>
-				<hr/>
-				<a href="javascript:grid.setOptions({editOnDoubleClick:true})">editOnDoubleClick = true</a>
-				<a href="javascript:grid.setOptions({editOnDoubleClick:false})">editOnDoubleClick = false</a>
-				<hr/>
-				<a href="javascript:grid.setOptions({enableCellNavigation:true})">enableCellNavigation = true</a>
-				<a href="javascript:grid.setOptions({enableCellNavigation:false})">enableCellNavigation = false</a>
-				<hr/>
-				<a href="javascript:grid.setOptions({asyncEditorLoading:true})">asyncEditorLoading = true</a>
-				<a href="javascript:grid.setOptions({asyncEditorLoading:false})">asyncEditorLoading = false</a>
-				</div>
-			</span>	
-			
-			<span class="simple-dropdown">
-				<em>Debug</em>
-				<div>
-				<a href="javascript:grid.benchmarkFn('removeAllRows')">benchmark removeAllRows</a>
-				<a href="javascript:grid.benchmarkFn('render')">benchmark render</a>
-				<a href="javascript:grid.benchmarkFn('benchmark_render_200')">benchmark render 200</a>
-				<hr/>
-				<a href="javascript:grid.stressTest()">stress test (infinite render/clear cycle)</a>
-				<hr/>
-				<a href="javascript:grid.debug()">internal state</a>
-				</div>
-			</span>				
-					
-			<span class="simple-dropdown">
-				<em style="padding-left:16px;background:url('../images/info.gif') no-repeat center left;">Quick info</em>
-				<div style="max-width:600px">
-				
-				This page demonstrate the use of a SlickGrid control.
-				<br><br>
-				<b>Key features:</b>
-				<ul>
-				<li>Virtual rendering/scrolling (hundreds of thousands of rows)</li>
-				<li>Extremely fast rendering speed</li>
-				<li>Support for a Model data source</li>
-				<li>Support for Ajax-loaded data</li>
-				<li>Multiple row selection</li>
-				<li>Edit and add new rows</li>
-				<li>Keyboard navigation for cell selection</li>
-				<li>Custom renderers for cells with conditional formatting</li>
-				<li>Formatters adaptive to column width</li>
-				<li>Custom editors for cells</li>
-				<li>Resizable and reorderable columns</li>
-				<li>Highly customizable & configurable</li>
-				<li>Built-in validators</li>
-				<li>Callbacks for events</li>
-				<li>Much much more...</li>
-				</ul>
-
-				</div>
-			</span>	
-								
-			</div>
-			
-			<div class="r">					
-				<div style="padding-right:14px;">
-					<label>Filter:</label> <input type=text>
-					&nbsp;
-				</div>
-			</div>
-		</div>
-		<div id="myGrid" style="width:100%;height:500px;"></div>
-		<div class="listview-footer">
-			<div style="float:left;padding-left:14px;">
-			</div>
-			
-			<div class="r">
-				<div style="padding-right:14px;">
-				</div>
-			</div>
-		</div>		
-
-		<br/>
-		
-		<script>
-		
-		$(".simple-dropdown a").click(function(e) {
-			var dd = $(this).closest(".simple-dropdown > div");
-			
-			dd.css("display", "none");
-			window.setTimeout(function () { dd.css("display", ""); }, 10);
-		});
-		
-			
-		function nonEmptyValidator(value) {
-			if (value == null || value == undefined || !value.length)
-				return {valid:false, msg:"This is a required field"};
-			else	
-				return {valid:true, msg:null};
-		}
-		
-		function setTaskResources(resourcesNamesArray, cellInfo, dataContext)
-		{
-			dataContext["resources"] = resourcesNamesArray.length > 0 ? resourcesNamesArray.concat() : null;
-		}
-		
-		var data = [];
-		var grid;
-		var model = [
-			{id:"#", name:"#", cssClass:"cell-move-handle", width:60, resizable:false, unselectable:true, formatter:SelectorCellFormatter},
-			{id:"title", name:"Title", field:"title", formatter:TaskNameFormatter, width:300, editor:TextCellEditor, validator:nonEmptyValidator},
-			{id:"star", name:"<img src='../images/bullet_star.png' align='absmiddle'>", field:"starred", formatter:StarFormatter, editor:StarCellEditor, width:16, resizable:false, cannotTriggerInsert:true},
-			{id:"duration", name:"Duration", field:"duration", width:80, editor:TextCellEditor},
-			{id:"%", name:"% Complete", field:"percentComplete", formatter:GraphicalPercentCompleteCellFormatter, width:60, editor:PercentCompleteCellEditor},
-			{id:"start", name:"Start", field:"start", width:100, editor:DateCellEditor},
-			{id:"finish", name:"Finish", field:"finish", width:100, editor:DateCellEditor},
-			{id:"resources", name:"Resources <img src='../images/help.png' align='absmiddle' title='This column has an adaptive formatter.  Resize to a smaller size to see alternative data representation.'>", formatter:ResourcesFormatter, rerenderOnResize:true, width:200, editor:ResourcesCellEditor, setValueHandler:setTaskResources, cannotTriggerInsert:true, minWidth:16, maxWidth:200},
-			{id:"preds", name:"Predecessors", width:100, editor:TextCellEditor, cannotTriggerInsert:true}
-			,
-			{id:"e", name:"Deliverable", field:4, formatter:YesNoCellFormatter, width:60, editor:YesNoSelectCellEditor, cannotTriggerInsert:true},
-			{id:"f", name:"Effort-driven", field:5, formatter:YesNoCellFormatter, width:50, editor:YesNoCheckboxCellEditor, cannotTriggerInsert:true}			
-		];
-		
-
-
-		function updateModel(id, args) {
-			if (GlobalEditorLock.isEditing() && !GlobalEditorLock.commitCurrentEdit()) return;
-			
-			for (var i=0; i<model.length; i++)
-			{
-				if (model[i].id == id) {
-					model[i] = $.extend(model[i], args);
-					grid.removeAllRows();
-					grid.render();
-					return;
-				}
-			}
-		}
-
-		
-		$(function()
-		{
-			$("#myGrid")[0].unselectable = true;
-					
-			reinitGrid(10);
-		})
-		
-		
-		function enterEdit() {
-			
-			GlobalEditorLock.enterEditMode({
-				commitCurrentEdit: function() { alert('validation error'); return false },
-				cancelCurrentEdit: function() {}
-			});
-			
-		}
-		
-	
-		function doSomething() {
-			
-			if (GlobalEditorLock.isEditing() && !GlobalEditorLock.commitCurrentEdit()) return;
-			
-/*
-			if (GlobalEditorLock.isEditing())
-			{
-				if (confirm("Cancel current edit?"))
-					GlobalEditorLock.cancelCurrentEdit();
-				else	
-					return;
-			}
-*/
-			
-			alert("Editor lock acquired")
-			
-		}
-		
-		
-		function reinitGrid(loadedRows,totalRows) {
-			
-			data = [];
-		
-			for (var i = 0; i < loadedRows; i++) 
-			{
-				var d = (data[i] = {});
-				
-				d["title"] = "Task " + i;
-				d["duration"] = "5 days";
-				d["percentComplete"] = Math.round(Math.random() * 100);
-				d["start"] = "01/01/2009";
-				d["finish"] = "01/05/2009";
-				d["indent"] = i % 5;
-				d["resources"] = (i % 7 == 0) ? ["Boris The Blade", "Bullet Tooth"] : (i % 11 == 0 ? ["Bricktop"] : null);				
-			}
-			
-			
-			if (grid) grid.destroy();
-			
-			
-			grid = new SlickGrid($("#myGrid"), data, model, {});
-			
-			grid.onValidationError = function(elem, validationResults, row, cell, cellInfo) {
-				console.warn(validationResults.msg);
-			}
-			
-			grid.onAddNewRow = function(cellInfo, value) {
-				var item = {title:"New task", indent:0, duration:"1 day", percentComplete:0, start:"01/01/2009", finish:"01/01/2009"};
-
-				item[cellInfo.field] = value;
-				
-				data[data.length] = item;
-				
-				grid.updateRowCount();
-				grid.render();
-				grid.updateRow(data.length-1);
-			}
-			
-			grid.onClick = function(e, row, cell) {
-				// toggle expand/collapse icon
-				if (model[cell].id == "title" && $(e.target).is("img")) 
-				{
-					$(e.target).attr("src", $(e.target).attr("src") != "../images/collapse.gif" ? "../images/collapse.gif" : "../images/expand.gif");
-					return true;
-				}		
-				
-				if (model[cell].id == "#") 
-				{
-					grid.setSelectedRows([row]);
-				}		
-				
-				// pass the event through
-				return false;
-			}			
-		}
-
-			
-		</script>
-		
-		
-		<button onclick="doSomething()">Test GlobalEditorLock lock</button>
-	</body>
-</html>
+<!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>Spreadsheet prototype</title>
+		<link rel="stylesheet" href="simpledropdown.css" type="text/css" media="screen" charset="utf-8" />
+		<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" />
+		<style>
+		*
+		{
+			font-family: arial;
+			font-size: 8pt;
+		}
+		
+		hr {
+			height: 1px;
+			border: 0;
+			background: silver;
+		}
+		
+		#grid {
+			background: white;
+			outline: 0px;
+		}
+		
+		ul {
+			padding: 0px;
+			cursor: default;
+		}
+			
+		li {
+			background: url("../images/arrow_right_spearmint.png") no-repeat 0px center;
+			padding-left: 12px;
+			list-style: none;
+			margin: 0px;
+		}
+			
+		li:hover {
+			background: url("../images/arrow_right_peppermint.png") no-repeat 0px center;
+		}
+				
+		.listview-header {
+			height: 24px;
+			line-height: 24px;
+			width: 100%;
+			background: url("../images/listview.gif") no-repeat top left;
+		}
+			
+		.listview-header .r {
+			float:right;
+			text-align: right;
+			width: 50%;
+			height: 24px;
+			background: white url("../images/listview.gif") no-repeat top right;
+			line-height: 24px;
+		}
+		
+		.listview-header input {
+			border: 1px solid silver;
+		}
+		.listview-footer {
+			height: 24px;
+			line-height: 24px;
+			width: 100%;
+			background: url("../images/listview.gif") no-repeat left -24px;
+		}
+			
+		.listview-footer .r {
+			float:right;
+			text-align: right;
+			width: 50%;
+			height: 24px;
+			background: white url("../images/listview.gif") no-repeat right -24px;
+			line-height: 24px;
+		}
+		</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="../slick.editors.js"></script>
+		<script language="JavaScript" src="../slick.grid.js"></script>
+		<script language="JavaScript" src="../slick.globaleditorlock.js"></script>
+		
+		
+		<div class="listview-header">
+			<div style="float:left;padding-left:14px;">
+			
+			<span class="simple-dropdown">
+				<em>Reload grid</em>
+				<div>
+				<a href="javascript:reinitGrid(10)">Load 10 rows</a>
+				<a href="javascript:reinitGrid(100)">Load 100 rows</a>
+				<a href="javascript:reinitGrid(500)">Load 500 rows</a>
+				<a href="javascript:reinitGrid(1000)">Load 1'000 rows</a>
+				<a href="javascript:reinitGrid(5000)">Load 5'000 rows</a>
+				<a href="javascript:reinitGrid(50000)">Load 50'000 rows</a>				
+				</div>
+			</span>					
+			
+			<span class="simple-dropdown">
+				<em>Change column styles</em>
+				<div>
+				<a href="javascript:updateModel('%', {formatter:PercentCompleteCellFormatter, cssClass:'task-percent'})">Render <b>% Complete</b> as text</a>
+				<a href="javascript:updateModel('%', {formatter:GraphicalPercentCompleteCellFormatter, cssClass:null})">Render <b>% Complete</b> as graph</a>
+				</div>
+			</span>				
+
+			<span class="simple-dropdown">
+				<em>Select rows</em>
+				<div>
+				<a href="javascript:grid.setSelectedRows([0,1,2,3,4])">0 - 5</a>
+				</div>
+			</span>	
+
+			<span class="simple-dropdown">
+				<em>Options</em>
+				<div>
+				<a href="javascript:grid.setOptions({enableAddRow:true})">enableAddRow = true</a>
+				<a href="javascript:grid.setOptions({enableAddRow:false})">enableAddRow = false</a>
+				<hr/>
+				<a href="javascript:grid.setOptions({editable:true})">editable = true</a>
+				<a href="javascript:grid.setOptions({editable:false})">editable = false</a>
+				<hr/>
+				<a href="javascript:grid.setOptions({editOnDoubleClick:true})">editOnDoubleClick = true</a>
+				<a href="javascript:grid.setOptions({editOnDoubleClick:false})">editOnDoubleClick = false</a>
+				<hr/>
+				<a href="javascript:grid.setOptions({enableCellNavigation:true})">enableCellNavigation = true</a>
+				<a href="javascript:grid.setOptions({enableCellNavigation:false})">enableCellNavigation = false</a>
+				<hr/>
+				<a href="javascript:grid.setOptions({asyncEditorLoading:true})">asyncEditorLoading = true</a>
+				<a href="javascript:grid.setOptions({asyncEditorLoading:false})">asyncEditorLoading = false</a>
+				</div>
+			</span>	
+			
+			<span class="simple-dropdown">
+				<em>Debug</em>
+				<div>
+				<a href="javascript:grid.benchmarkFn('removeAllRows')">benchmark removeAllRows</a>
+				<a href="javascript:grid.benchmarkFn('render')">benchmark render</a>
+				<a href="javascript:grid.benchmarkFn('benchmark_render_200')">benchmark render 200</a>
+				<hr/>
+				<a href="javascript:grid.stressTest()">stress test (infinite render/clear cycle)</a>
+				<hr/>
+				<a href="javascript:grid.debug()">internal state</a>
+				</div>
+			</span>				
+					
+			<span class="simple-dropdown">
+				<em style="padding-left:16px;background:url('../images/info.gif') no-repeat center left;">Quick info</em>
+				<div style="max-width:600px">
+				
+				This page demonstrate the use of a SlickGrid control.
+				<br><br>
+				<b>Key features:</b>
+				<ul>
+				<li>Virtual rendering/scrolling (hundreds of thousands of rows)</li>
+				<li>Extremely fast rendering speed</li>
+				<li>Support for a Model data source</li>
+				<li>Support for Ajax-loaded data</li>
+				<li>Multiple row selection</li>
+				<li>Edit and add new rows</li>
+				<li>Keyboard navigation for cell selection</li>
+				<li>Custom renderers for cells with conditional formatting</li>
+				<li>Formatters adaptive to column width</li>
+				<li>Custom editors for cells</li>
+				<li>Resizable and reorderable columns</li>
+				<li>Highly customizable & configurable</li>
+				<li>Built-in validators</li>
+				<li>Callbacks for events</li>
+				<li>Much much more...</li>
+				</ul>
+
+				</div>
+			</span>	
+								
+			</div>
+			
+			<div class="r">					
+				<div style="padding-right:14px;">
+					<label>Filter:</label> <input type=text>
+					&nbsp;
+				</div>
+			</div>
+		</div>
+		<div id="myGrid" style="width:100%;height:500px;"></div>
+		<div class="listview-footer">
+			<div style="float:left;padding-left:14px;">
+			</div>
+			
+			<div class="r">
+				<div style="padding-right:14px;">
+				</div>
+			</div>
+		</div>		
+
+		<br/>
+		
+		<script>
+		
+		$(".simple-dropdown a").click(function(e) {
+			var dd = $(this).closest(".simple-dropdown > div");
+			
+			dd.css("display", "none");
+			window.setTimeout(function () { dd.css("display", ""); }, 10);
+		});
+		
+			
+		function nonEmptyValidator(value) {
+			if (value == null || value == undefined || !value.length)
+				return {valid:false, msg:"This is a required field"};
+			else	
+				return {valid:true, msg:null};
+		}
+		
+		function setTaskResources(resourcesNamesArray, cellInfo, dataContext)
+		{
+			dataContext["resources"] = resourcesNamesArray.length > 0 ? resourcesNamesArray.concat() : null;
+		}
+		
+		var data = [];
+		var grid;
+		var model = [
+			{id:"#", name:"#", cssClass:"cell-move-handle", width:60, resizable:false, unselectable:true, formatter:SelectorCellFormatter},
+			{id:"title", name:"Title", field:"title", formatter:TaskNameFormatter, width:300, editor:TextCellEditor, validator:nonEmptyValidator},
+			{id:"star", name:"<img src='../images/bullet_star.png' align='absmiddle'>", field:"starred", formatter:StarFormatter, editor:StarCellEditor, width:16, resizable:false, cannotTriggerInsert:true},
+			{id:"duration", name:"Duration", field:"duration", width:80, editor:TextCellEditor},
+			{id:"%", name:"% Complete", field:"percentComplete", formatter:GraphicalPercentCompleteCellFormatter, width:60, editor:PercentCompleteCellEditor},
+			{id:"start", name:"Start", field:"start", width:100, editor:DateCellEditor},
+			{id:"finish", name:"Finish", field:"finish", width:100, editor:DateCellEditor},
+			{id:"resources", name:"Resources <img src='../images/help.png' align='absmiddle' title='This column has an adaptive formatter.  Resize to a smaller size to see alternative data representation.'>", formatter:ResourcesFormatter, rerenderOnResize:true, width:200, editor:ResourcesCellEditor, setValueHandler:setTaskResources, cannotTriggerInsert:true, minWidth:16, maxWidth:200},
+			{id:"preds", name:"Predecessors", width:100, editor:TextCellEditor, cannotTriggerInsert:true}
+			,
+			{id:"e", name:"Deliverable", field:4, formatter:YesNoCellFormatter, width:60, editor:YesNoSelectCellEditor, cannotTriggerInsert:true},
+			{id:"f", name:"Effort-driven", field:5, formatter:YesNoCellFormatter, width:50, editor:YesNoCheckboxCellEditor, cannotTriggerInsert:true}			
+		];
+		
+
+
+		function updateModel(id, args) {
+			if (GlobalEditorLock.isEditing() && !GlobalEditorLock.commitCurrentEdit()) return;
+			
+			for (var i=0; i<model.length; i++)
+			{
+				if (model[i].id == id) {
+					model[i] = $.extend(model[i], args);
+					grid.removeAllRows();
+					grid.render();
+					return;
+				}
+			}
+		}
+
+		
+		$(function()
+		{
+			$("#myGrid")[0].unselectable = true;
+					
+			reinitGrid(10);
+		})
+		
+		
+		function enterEdit() {
+			
+			GlobalEditorLock.enterEditMode({
+				commitCurrentEdit: function() { alert('validation error'); return false },
+				cancelCurrentEdit: function() {}
+			});
+			
+		}
+		
+	
+		function doSomething() {
+			
+			if (GlobalEditorLock.isEditing() && !GlobalEditorLock.commitCurrentEdit()) return;
+			
+/*
+			if (GlobalEditorLock.isEditing())
+			{
+				if (confirm("Cancel current edit?"))
+					GlobalEditorLock.cancelCurrentEdit();
+				else	
+					return;
+			}
+*/
+			
+			alert("Editor lock acquired")
+			
+		}
+		
+		
+		function reinitGrid(loadedRows,totalRows) {
+			
+			data = [];
+		
+			for (var i = 0; i < loadedRows; i++) 
+			{
+				var d = (data[i] = {});
+				
+				d["title"] = "Task " + i;
+				d["duration"] = "5 days";
+				d["percentComplete"] = Math.round(Math.random() * 100);
+				d["start"] = "01/01/2009";
+				d["finish"] = "01/05/2009";
+				d["indent"] = i % 5;
+				d["resources"] = (i % 7 == 0) ? ["Boris The Blade", "Bullet Tooth"] : (i % 11 == 0 ? ["Bricktop"] : null);				
+			}
+			
+			
+			if (grid) grid.destroy();
+			
+			
+			grid = new SlickGrid($("#myGrid"), data, model, {});
+			
+			grid.onValidationError = function(elem, validationResults, row, cell, cellInfo) {
+				console.warn(validationResults.msg);
+			}
+			
+			grid.onAddNewRow = function(cellInfo, value) {
+				var item = {title:"New task", indent:0, duration:"1 day", percentComplete:0, start:"01/01/2009", finish:"01/01/2009"};
+
+				item[cellInfo.field] = value;
+				
+				data[data.length] = item;
+				
+				grid.updateRowCount();
+				grid.render();
+				grid.updateRow(data.length-1);
+			}
+			
+			grid.onClick = function(e, row, cell) {
+				// toggle expand/collapse icon
+				if (model[cell].id == "title" && $(e.target).is("img")) 
+				{
+					$(e.target).attr("src", $(e.target).attr("src") != "../images/collapse.gif" ? "../images/collapse.gif" : "../images/expand.gif");
+					return true;
+				}		
+				
+				if (model[cell].id == "#") 
+				{
+					grid.setSelectedRows([row]);
+				}		
+				
+				// pass the event through
+				return false;
+			}			
+		}
+
+			
+		</script>
+		
+		
+		<button onclick="doSomething()">Test GlobalEditorLock lock</button>
+	</body>
+</html>
diff --git a/examples/simpledropdown.css b/examples/simpledropdown.css
index 8553c99..ffd71f7 100644
--- a/examples/simpledropdown.css
+++ b/examples/simpledropdown.css
@@ -1,83 +1,83 @@
-.simple-dropdown {
-	z-index: 100;			
-	overflow: visible;
-	display: inline-block;
-	line-height: normal;
-		
-	border: 1px solid silver;
-	background: #eee url("images/down.gif") no-repeat center right;
-	padding: 2px;
-	padding-left: 8px;
-	padding-right: 20px;
-	margin: 2px;
-	
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;		
-}
-
-.simple-dropdown > em {
-	display: block;
-	
-	text-decoration: none;
-	font-style: normal;
-	cursor: default;
-}
-
-.simple-dropdown:hover {
-	background-color: #777;
-	color: white;
-	border-color: gray;
-}
-	
-.simple-dropdown:hover > div {
-	-display: block;
-	visibility: visible;
-	
-	opacity: 1;
-	-webkit-transition: opacity 0.5s;
-}				
-		
-.simple-dropdown > div {
-	z-index: 100;
-	-display: none;
-	visibility: hidden;
-	position: absolute;
-	margin-left: -9px;
-	min-width: 120px;
-	max-width: 200px;
-	
-	color: black;
-	text-align: left;
-	padding: 4px;
-	background: #fafafa;
-	border: 1px solid gray;
-
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;		
-	-moz-border-radius-topleft: 0px;
-	-webkit-border-top-left-radius: 0px;	
-	-moz-box-shadow: 2px 2px 2px silver;
-	-webkit-box-shadow: 2px 2px 2px silver;
-	
-	opacity: 0;
-}
-
-.simple-dropdown > div a {
-	display: block;
-	padding: 2px;
-	outline: 0px;
-	text-decoration: none;
-	color: black;
-	cursor: default;
-	zbackground: #fafafa url("images/arrow_right_spearmint.png") no-repeat center left;
-	padding-left: 12px;
-	padding-right: 6px;
-}
-
-
-.simple-dropdown > div a:hover {
-	background: skyblue url("images/arrow_right_peppermint.png") no-repeat center left;
-	
-	-moz-border-radius: 3px;
-	-webkit-border-radius: 3px;	
+.simple-dropdown {
+	z-index: 100;			
+	overflow: visible;
+	display: inline-block;
+	line-height: normal;
+		
+	border: 1px solid silver;
+	background: #eee url("images/down.gif") no-repeat center right;
+	padding: 2px;
+	padding-left: 8px;
+	padding-right: 20px;
+	margin: 2px;
+	
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;		
+}
+
+.simple-dropdown > em {
+	display: block;
+	
+	text-decoration: none;
+	font-style: normal;
+	cursor: default;
+}
+
+.simple-dropdown:hover {
+	background-color: #777;
+	color: white;
+	border-color: gray;
+}
+	
+.simple-dropdown:hover > div {
+	-display: block;
+	visibility: visible;
+	
+	opacity: 1;
+	-webkit-transition: opacity 0.5s;
+}				
+		
+.simple-dropdown > div {
+	z-index: 100;
+	-display: none;
+	visibility: hidden;
+	position: absolute;
+	margin-left: -9px;
+	min-width: 120px;
+	max-width: 200px;
+	
+	color: black;
+	text-align: left;
+	padding: 4px;
+	background: #fafafa;
+	border: 1px solid gray;
+
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;		
+	-moz-border-radius-topleft: 0px;
+	-webkit-border-top-left-radius: 0px;	
+	-moz-box-shadow: 2px 2px 2px silver;
+	-webkit-box-shadow: 2px 2px 2px silver;
+	
+	opacity: 0;
+}
+
+.simple-dropdown > div a {
+	display: block;
+	padding: 2px;
+	outline: 0px;
+	text-decoration: none;
+	color: black;
+	cursor: default;
+	zbackground: #fafafa url("images/arrow_right_spearmint.png") no-repeat center left;
+	padding-left: 12px;
+	padding-right: 6px;
+}
+
+
+.simple-dropdown > div a:hover {
+	background: skyblue url("images/arrow_right_peppermint.png") no-repeat center left;
+	
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;	
 }
 \ No newline at end of file