# Using Promises

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
3
4
5
6
7
8

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
47
48
49
50
51
52

# 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
3
4
5
6
7
8

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
Last Updated: 10/23/2024, 6:31:33 AM