# Auto Paging

Real time loading by scroll action.

<textarea class="sample_log" readonly="true">ajax logs</textarea>
<div class="sample demo-grid middle"></div>
1
2
// create DataSource
const GET_RECORDS_SIZE = 100;
const BUFFER_RECORDS_SIZE = (Math.floor(GET_RECORDS_SIZE / 2) || 1);
const loadedData = {};
let isAllLoaded = false;
const dataSource = new cheetahGrid.data.CachedDataSource({
  get(index) {
    const loadStartIndex = Math.floor(index / GET_RECORDS_SIZE) * GET_RECORDS_SIZE;
    if (!loadedData[loadStartIndex]) {
      const promiseObject = getRecordsWithAjax(loadStartIndex, GET_RECORDS_SIZE).// return Promise Object
        then((data) => {
          if (isAllLoaded) {
            return data;
          }
          // length update?
          const length = loadStartIndex + data.length;
          if (data.length < GET_RECORDS_SIZE) {
            // all loaded!!
            dataSource.length = length;
            isAllLoaded = true;
          } else if (dataSource.length <= length) {
            // append length!!
            dataSource.length = length + BUFFER_RECORDS_SIZE;
          }
          return data;
        });
      loadedData[loadStartIndex] = promiseObject;
    }
    return loadedData[loadStartIndex].
      then((data) => data[index - loadStartIndex]);
  },
  length: BUFFER_RECORDS_SIZE, //init records count
});

// create cheetahGrid
const grid = new cheetahGrid.ListGrid({
  parentElement: document.querySelector('.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},
  ],
  frozenColCount: 1,
});
grid.configure('fadeinWhenCallbackInPromise', true);

// set dataSource
grid.dataSource = dataSource;

function getRecordsWithAjax (startIndex, num) {
  return new Promise((resolve) => {
    const loadedCount = startIndex + num;
    let last = false;
    if (loadedCount >= 1080) {
      num = 1080 - startIndex;
      last = true;
    }
    setTimeout(() => {
      const records = [];
      for (let i = 0; i < num; i++) {
        records.push(generatePerson(startIndex + i));
      }
      const log = document.querySelector('.sample_log');
      log.value += `\nAcquire ${num} data from index ${startIndex}.`;
      log.value = log.value.trim();
      log.scrollTop = log.scrollHeight;

      if (last && records.length) {
        const lastData = records[records.length - 1];
        lastData.fname = 'Cheetah';
        lastData.lname = 'Grid!!';
        lastData.email = 'hello_cheetah_grid@gmail.com';
      }
      resolve(records);
    }, 500);
  });
}
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