# Using Promise
s
Cheetah Grid supports Promise
object.
We suppose the situations below as a example.
- Get the record informations as deferred
Get and show a few records in first view. Remaining records are shown when scrolled. - Get the cell informations as deferred
Get and show the important informations in first view. Remaining details are shown later.
# Promise
Records
Shows usage below.
In this example grid shows 1,000 recors as a whole. Getting 100 records by each ajax is supposed.
<textarea class="rec_sample_log" style="width: 100%; height: 100px;" readonly="true">ajax logs</textarea>
<div class="rec_sample demo-grid middle"></div>
1
2
2
getRecordsWithAjax
in example code returns Promise
object which get 100 records by ajax.
const getRecordsWithAjax = (startIndex, num) => new Promise((resolve) => {
setTimeout(() => {
const records = [];
for (let i = 0; i < num; i++) {
records.push(generatePerson(startIndex + i));
}
const log = document.querySelector('.rec_sample_log');
log.value += `\nAcquire ${num} data from index ${startIndex}.`;
log.value = log.value.trim();
log.scrollTop = log.scrollHeight;
resolve(records);
}, 500);
});
// create DataSource
const loadedData = {};
const dataSource = new cheetahGrid.data.CachedDataSource({
get(index) {
const loadStartIndex = Math.floor(index / 100) * 100;
if (!loadedData[loadStartIndex]) {
const promiseObject = getRecordsWithAjax(loadStartIndex, 100); // return Promise Object
loadedData[loadStartIndex] = promiseObject;
}
return loadedData[loadStartIndex].
then((data) => data[index - loadStartIndex]);
},
length: 1000, //all records count
});
// create cheetahGrid
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.rec_sample'),
header: [
{field: 'personid', caption: 'ID', width: 100},
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
{field: 'email', caption: 'Email', width: 250},
{field: (rec) => new Intl.DateTimeFormat().format(rec.birthday), caption: 'birthday', width: 200},
],
frozenColCount: 1,
});
grid.configure('fadeinWhenCallbackInPromise', true);
// set dataSource
grid.dataSource = dataSource;
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
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
# Promise
Cells
Example below shows Person data. Department informations are shown later by ajax.
<textarea class="cell_sample_log" style="width: 100%; height: 100px;" readonly="true">ajax logs</textarea>
<div class="cell_sample demo-grid middle"></div>
1
2
2
getPersonDeptWithAjax
in example code returns Promise
object which get department information by ajax.
const records = generatePersons(1000);
const depts = [
'General Affairs',
'Personal',
'General Accounting',
'Sales',
'Sales Promotion',
'Procurement',
'Development',
'Engineering',
'Manufacturing',
'Procurement',
'Export',
'Public Relations',
'Information & Research',
'Legal',
'Advertising',
'Planning',
'Secretary',
];
const getPersonDeptWithAjax = (personid) => new Promise((resolve) => {
setTimeout(() => {
const dept = depts[Math.floor(Math.random() * depts.length)];
const log = document.querySelector('.cell_sample_log');
log.value += `\nAcquire department data of personid: ${personid}. => department: ${dept}`;
log.value = log.value.trim();
log.scrollTop = log.scrollHeight;
resolve(dept);
}, 500);
});
const grid = new cheetahGrid.ListGrid({
parentElement: document.querySelector('.cell_sample'),
header: [
{field: 'personid', caption: 'ID', width: 100},
{field: 'fname', caption: 'First Name', width: 200},
{field: 'lname', caption: 'Last Name', width: 200},
{field: 'email', caption: 'Email', width: 250},
{
field(rec) {
return getPersonDeptWithAjax(rec.personid);// return Promise Object
},
caption: 'Department',
width: 250
},
],
frozenColCount: 1,
});
grid.configure('fadeinWhenCallbackInPromise', true);
grid.records = records;
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
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