forked from mleibman/SlickGrid
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample10-async-post-render.html
134 lines (116 loc) · 4.89 KB
/
example10-async-post-render.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 10: Async post render</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
<style>
.cell-title {
font-weight: bold;
}
.cell-effort-driven {
text-align: center;
}
.description * {
font-size: 11pt;
}
</style>
</head>
<body>
<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>asyncPostRender</u> property on a column which you can use to set your own function that will
manipulate the cell DOM node directly.
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>
<h2>View Source:</h2>
<ul>
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example10-async-post-render.html" target="_sourcewindow"> View the source for this example on Github</a></li>
</ul>
</div>
<script src="../lib/firebugx.js"></script>
<script src="../lib/jquery-1.7.min.js"></script>
<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.2.js"></script>
<script src="../lib/jquery.sparkline.min.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.editors.js"></script>
<script src="../slick.grid.js"></script>
<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...";
}
function renderSparkline(cellNode, row, dataContext, colDef) {
var vals = [
dataContext["n1"],
dataContext["n2"],
dataContext["n3"],
dataContext["n4"],
dataContext["n5"]
];
$(cellNode).empty().sparkline(vals, {width: "100%"});
}
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: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
{id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline}
];
var options = {
editable: true,
enableAddRow: false,
enableCellNavigation: true,
asyncEditorLoading: false,
enableAsyncPostRender: true
};
$(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 Slick.Grid("#myGrid", data, columns, options);
})
</script>
</body>
</html>