summaryrefslogtreecommitdiffstats
path: root/examples/example10-async-post-render.html
diff options
context:
space:
mode:
Diffstat (limited to 'examples/example10-async-post-render.html')
-rw-r--r--examples/example10-async-post-render.html268
1 files changed, 134 insertions, 134 deletions
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>
generated by cgit v1.1 at 2025-06-03 03:44:47 +0000