-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtemplate-139.html
188 lines (172 loc) · 6.82 KB
/
template-139.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<h1 id="job-manager">Job Manager</h1>
<code-sandbox hash="1b92040e"><pre><code class="language-css">body {
padding: 24px;
}
efx-grid {
height: 300px;
}
hr {
margin: 8px;
}
#search_input {
width: 100%;
}
</code></pre>
<pre><code class="language-html"><input id="search_input" placeholder="Search anything..." type="search">
<hr>
<efx-grid id="grid"></efx-grid>
</code></pre>
<pre><code class="language-javascript">import { halo } from './theme-loader.js'; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.
/* ---------------------------------- Note ----------------------------------
DataGenerator, Formatters and extensions are exposed to global scope
in the bundle file to make it easier to create live examples.
Importing formatters and extensions is still required in your application.
Please see the document for further information.
---------------------------------------------------------------------------*/
DataGenerator.addFieldInfo("status", {
type: "set",
members: ["Success", "Fail", "Partial Success"]
});
DataGenerator.addFieldInfo("jobName", {
type: "set",
members: [
"Docs_Conv_021123_2",
"UPLD_Documents_031123_3",
"ConvUpld_Files_041123_1",
"Upload_Batch_051123_4",
"Files_Upld_061123_5",
"Upld_Conversion_071123",
"Documents_Upload_081123_1",
"Conv_Uploads_091123_2",
"Upload_Files_101123_3",
"Upld_Doc_111123_4",
"Conversion_Upload_121123_5",
"Uploads_Docs_131123_1",
"Docs_Conversion_141123_2",
"Upld_Batch_151123_3",
"Conversion_Batch_161123_4",
"Batch_Upload_171123_5",
"Upld_Documents_181123_1",
"Upload_Conv_191123_2",
"Conversion_Docs_201123_3",
"Upld_Files_211123_4"
]
});
// Extensions
let rowSelection = new RowSelection();
let inCellEditing = new InCellEditing();
let rowFiltering = new RowFiltering();
let fields = ["id", "jobName", "status"];
let records = DataGenerator.generateRecords(fields, { numRows: 5000, seed: 0 });
let config1 = {
columns: [
{
title: "Id",
field: fields[0],
width: 70,
},
{
title: "Job Name",
field: fields[1],
editableContent: true
},
{
title: "Status",
field: fields[2],
width: 100
},
{
name: "Action", field: fields[1],
width: 150,
titleAlignment: "center",
binding: onActionBinding
}
],
staticDataRows: records,
rowFiltering: {
iconActivation: "onHover"
},
extensions: [rowSelection, inCellEditing, rowFiltering]
};
function onActionBinding(e) {
let data = e.data;
let cell = e.cell;
let content = cell.getContent();
if (!content) {
content = document.createElement("div");
content.style.display = "flex";
content.style.alignItems = "center";
content.style.justifyContent = "center";
content.style.gap = "8px";
let editIcon = document.createElement("ef-icon");
editIcon.icon = "edit";
editIcon.style.cursor = "pointer";
editIcon.style.verticalAlign = "middle";
editIcon.addEventListener("click", onEditClicked);
let deleteIcon = document.createElement("ef-icon");
deleteIcon.icon = "trash";
deleteIcon.style.cursor = "pointer";
deleteIcon.style.verticalAlign = "middle";
deleteIcon.addEventListener("click", onRemoveClicked);
let runButton = document.createElement("ef-button");
runButton.textContent = "Run";
runButton.style.verticalAlign = "middle";
runButton.addEventListener("click", onRunClicked);
content.appendChild(editIcon);
content.appendChild(deleteIcon);
content.appendChild(runButton);
}
cell.setContent(content);
}
function onRunClicked(e) {
let button = e.currentTarget;
let pos = grid.api.getRelativePosition(e);
let rowIndex = pos.rowIndex;
alert("Click :" + rowIndex);
}
function onRemoveClicked(e) {
let button = e.currentTarget;
let pos = grid.api.getRelativePosition(e);
let rowIndex = pos.rowIndex;
grid.api.removeRow(rowIndex);
}
function onEditClicked(e) {
let button = e.currentTarget;
let pos = grid.api.getRelativePosition(e);
let rowIndex = + pos.rowIndex;
inCellEditing.openEditor(0, rowIndex);
}
let grid = window.grid = document.getElementById("grid");
grid.config = config1;
let searchInput = document.getElementById("search_input");
let filterContext = {
searchedText: ""
};
searchInput.addEventListener("keyup", function (e) {
let input = e.currentTarget;
let inputVal = input.value;
if (input._prevValue !== inputVal) {
input._prevValue = inputVal;
filterContext.searchedText = inputVal.toLowerCase();
rowFiltering.refresh(); // Force filter triggering
}
});
function filterFunc(rowData, rowId, context) {
if(!context.searchedText) {
return true; // No text to be searched
}
let str = "";
for (let key in rowData) {
str += rowData[key] + " ";
}
return str.toLowerCase().indexOf(context.searchedText) >= 0;
};
rowFiltering.addGridFilter(filterFunc, filterContext);
</code></pre>
</code-sandbox><p>The above example illustrates how we can use Grid to manage large amount of data (5,000 rows). This grid lets users filter, add, edit, and remove data in the grid itself. We use three main features/extensions: row filtering, in-cell editing, and row selection. </p>
<ul>
<li>Row Filtering extension lets users type in an input box to search and filter data across all columns in the grid. </li>
<li>Row Selection extension allows users to pick one or more rows in the grid. You may replace this type of selection by using Checkbox extension instead.</li>
<li>In-Cell Editing extension is about directly changing the data in the grid. For example, user can click the pencil icon to change data on the "Job Name" column.</li>
</ul>