-
Notifications
You must be signed in to change notification settings - Fork 0
/
GridDemo.html
107 lines (94 loc) · 4.17 KB
/
GridDemo.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Grid Demo</title>
<script type="text/javascript" src="JSLightGrid-1.0.1.js"></script>
<script type="text/javascript" src="TestData.js"></script>
<link rel="stylesheet" type="text/css" href="JSLightGrid-1.0.1.css" />
<style type="text/css">
#dvGrid2 .headerRow div {
height: 40px !important;
}
label {
font-weight: bold;
}
</style>
</head>
<body>
<label>Demo Grid1 (Template 1): (8 Records,Basic, Responsive, Sortable ,Pagination )</label>
<br /><br />
<div id="dvGrid2" style="width:100%;">
</div>
<br /><br /><br />
<label>Demo Grid2 (Template 2): (2000 Records, Responsive, Editable, Sortable and with templated columns, onclick of the name col calls a JS function)</label>
<br /><br />
<div id="dvGrid" style="width:100%;">
</div>
<br /><br />
<button onclick="showDirtyGrid();">Show Dirty Data</button>
<br /><br />
<label>Demo Grid3 (Template 1): Populates modified data of grid1(Responsive, Sortable , onclick of the name col calls a JS function)</label>
<br /><br />
<div id="dvGrid1">
[Change anything in Grid1 and click "Show Dirty Data" button]
</div>
<script type="text/javascript">
var cols = [
{ Name: 'name', DisplayName: 'Product Name', Width: 28, type: '', Html: '<span onclick="alert(\'You have clicked on {{name}}\')">{{name}}</span>' },
{ Name: 'description', DisplayName: 'Description', Width: 28, type: '' },
{ Name: 'age', DisplayName: 'Category', Width: 20, type: 'select', data: [{ key: 1, value: "one" }, { key: 2, value: "two" }, { key: 108, value: "hundred eight" }, { key: 15, value: "fifteen" }] },
{ Name: 'InStock', DisplayName: 'In Stock', Width: 10, type: '', Html: '<input type="checkbox" {{InStock}} class="field" />' },
]
var colsChkDisable = [
{ Name: 'name', DisplayName: 'Product Name', Width: 28, type: '', Html: '<span onclick="alert(\'You have clicked on {{name}}\')">{{name}}</span>' },
{ Name: 'description', DisplayName: 'Description', Width: 28, type: '' },
{ Name: 'age', DisplayName: 'Category', Width: 20, type: 'select', data: [{ key: 1, value: "one" }, { key: 2, value: "two" }, { key: 108, value: "hundred eight" }, { key: 15, value: "fifteen" }] },
{ Name: 'InStock', DisplayName: 'In Stock', Width: 10, type: '', Html: '<input disabled type="checkbox" {{InStock}} class="field" />' },
]
var colsTrains = [
{ Name: 'trainName', DisplayName: 'Train Name', Width: 15 },
{ Name: 'StartPoint', DisplayName: 'Start Point', Width: 12 },
{ Name: 'EndPoint', DisplayName: 'End Point', Width: 12 },
{ Name: 'Duration', DisplayName: 'Duration [Hr]', Width: 10 },
{ Name: 'Fair', DisplayName: 'Fair', Width: 6 },
{ Name: 'Currency', DisplayName: 'Currency', Width: 8 },
{ Name: 'FoodServed', DisplayName: 'Food Served', Width: 8, Html: '<input type="radio" disabled {{FoodServed}} class="field" />' },
]
JSLightGrid({
ElementID: "dvGrid2",
data: getTrainData(),
colDesc: colsTrains,
Editable: false,
pageSize: 3,
ShowDirtyFlag: false,
CurrentPageText: "Current Page"
});
var testGrid = JSLightGrid({
ElementID: "dvGrid",
data: getDataSet(),
colDesc: cols,
Editable: true,
pageSize: 10,
ShowDirtyFlag: true,
ShowFooter: true,
template: 2,
CurrentPageText: "Showing"
});
self = this;
function showDirtyGrid() {
JSLightGrid({
ElementID: "dvGrid1",
data: testGrid.getDirtyData("dvGrid"),
colDesc: colsChkDisable,
Editable: false,
pageSize: 4,
ShowDirtyFlag: false,
ShowFooter: true,
template: 1,
CurrentPageText: "Page#"
});
}
</script>
</body>
</html>