SlickGrid/examples/example-infinite-scroll-esm.html at 08f5dfc7d153b28c8f947da8f30d9de1c19c6f7b · 6pac/SlickGrid · GitHub

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
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example: Infinite Scroll</title>
  <link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
  <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
  <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
  <style>
    .cell-title {
      font-weight: bold;
    }

    .cell-effort-driven {
      justify-content: center;
    }

    .cell-selection {
      border-right-color: silver;
      border-right-style: solid;
      background: #f5f5f5;
      color: gray;
      text-align: right;
      font-size: 10px;
    }
  </style>
</head>
<body>
<h2 class="title">Example Infinite Scroll - ESM</h2>
<div style="position:relative">
  <div style="width:650px;">
    <div class="grid-header" style="width:100%">
      <label>SlickGrid - Infinite Scroll</label>
    </div>
    <div id="myGrid" class="slick-container" style="width:100%;height:500px;"></div>
  </div>

  <div class="options-panel">
    <h2>
      <a href="/examples/index.html" style="text-decoration: none; font-size: 22px">&#x2302;</a>
      Demonstrates:
    </h2>

    <p>
      This page demonstrates Infinite Scroll using DataView.
    <ul>
      <li>Infinite scrolling allows the grid to lazy-load rows from the server (or locally) when reaching the scroll bottom (end) position.</li>
      <li>In its simplest form, the more the user scrolls down, the more rows will get loaded and appended to the in-memory dataset.</li>
      <li>This demo will keep loading and adding data indifinitely, however in most cases you will eventually reach the end of your dataset and have everything loaded in memory.</li>
      <li>You can choose to reset (or not) the dataset after Sorting by any column.</li>
      <li>Note that instead of the DataView, we could also use just plain SlickGrid (without DataView) to add items</li>
    </ul>
    </p>
      <h2>View Source:</h2>
      <ul>
          <li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example-infinite-scroll-esm.html" target="_sourcewindow"> View the source for this example on Github</a></li>
      </ul>
      <h4>Reset Dataset onSort</h4>
      <button data-test="onsort-on">ON</button>
      <button data-test="onsort-off">OFF</button>

      <h4>Data Count</h4>
      <p>
       <label>Data length:</label>
        <span id="dataLength" data-test="itemCount">0</span>
      </p>
  </div>
</div>


<script type="module">
  import {
    Formatters,
    SlickDataView,
    SlickGrid,
  } from '../dist/esm/index.js';

  const FETCH_SIZE = 50;
  let dataView;
  let grid;
  let data = [];
  let columns = [
    {id: "sel", name: "#", field: "num", behavior: "select", cssClass: "cell-selection", width: 40, resizable: false, selectable: false },
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", sortable: true },
    {id: "duration", name: "Duration", field: "duration", sortable: true },
    {id: "%", name: "% Complete", field: "percentComplete", width: 120, resizable: false, formatter: Formatters.PercentCompleteBar, sortable: true },
    {id: "start", name: "Start", field: "start", minWidth: 60, sortable: true },
    {id: "finish", name: "Finish", field: "finish", minWidth: 60, sortable: true },
    {id: "effort-driven", name: "Effort Driven", width: 100, minWidth: 20, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Formatters.Checkmark, sortable: true }
  ];
  let shouldResetOnSort = false;
  let sortcol = "title";
  let sortdir = 1;

  let gridOptions = {
    editable: false,
    enableAddRow: false,
    enableCellNavigation: true
  };

  let percentCompleteThreshold = 0;
  let prevPercentCompleteThreshold = 0;
  let h_runfilters = null;

  function onSortReset(shouldReset) {
    shouldResetOnSort = shouldReset;
  }

  function myFilter(item, args) {
    return item["percentComplete"] >= args;
  }

  function DataItem(i) {
    this.num = i;
    this.id = "id_" + i;
    this.percentComplete = Math.round(Math.random() * 100);
    this.effortDriven = (i % 5 == 0);
    this.start = "01/01/2009";
    this.finish = "01/05/2009";
    this.title = "Task " + i;
    this.duration = "5 days";
  }

  function loadData(startIdx, count) {
    let tmpData = [];
    for (let i = startIdx; i < startIdx + count; i++) {
      tmpData.push(new DataItem(i));
    }
    return tmpData;
  }

  function comparer(a, b) {
    let x = a[sortcol], y = b[sortcol];
    return (x == y ? 0 : (x > y ? 1 : -1));
  }

  document.addEventListener("DOMContentLoaded", function() {
    // prepare the data
    data = loadData(0, FETCH_SIZE);

    dataView = new SlickDataView({ inlineFilters: true });
    grid = new SlickGrid("#myGrid", dataView, columns, gridOptions);

    // wire up model events to drive the grid
    dataView.onRowCountChanged.subscribe((e, args) => {
      grid.updateRowCount();
      grid.render();

      let countElm = document.querySelector('#dataLength');
      countElm.textContent = args.itemCount;
    });

    dataView.onRowsChanged.subscribe((e, args) => {
      grid.invalidateRows(args.rows);
      grid.render();
    });

    grid.onSort.subscribe((e, args) => {
      sortdir = args.sortAsc ? 1 : -1;
      sortcol = args.sortCol.field;

      // using native sort with comparer
      dataView.sort(comparer, args.sortAsc);

      // do we want to reset the dataset when Sorting?
      // if answering Yes then use the code below
      if (shouldResetOnSort) {
        const newData = loadData(0, FETCH_SIZE);
        grid.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered
        dataView.setItems(newData);
        dataView.reSort();
      }
    });

    // add onScroll listener which will detect when we reach the scroll end
    // if so, then append items to the dataset
    grid.onScroll.subscribe((e, args) => {
      const viewportElm = args.grid.getViewportNode();
      if (
        ['mousewheel', 'scroll'].includes(args.triggeredBy || '')
        && viewportElm.scrollTop > 0
        && Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight
      ) {
        console.log('onScroll end reached, add more items');
        const startIdx = dataView.getItemCount();

        dataView.addItems(loadData(startIdx, FETCH_SIZE));
      }
    });

    function filterAndUpdate() {
      let isNarrowing = percentCompleteThreshold > prevPercentCompleteThreshold;
      let isExpanding = percentCompleteThreshold < prevPercentCompleteThreshold;
      let renderedRange = grid.getRenderedRange();

      dataView.setFilterArgs(percentCompleteThreshold);
      dataView.setRefreshHints({
        ignoreDiffsBefore: renderedRange.top,
        ignoreDiffsAfter: renderedRange.bottom + 1,
        isFilterNarrowing: isNarrowing,
        isFilterExpanding: isExpanding
      });
      dataView.refresh();

      prevPercentCompleteThreshold = percentCompleteThreshold;
    }

    // initialize the model after all the events have been hooked up
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.setFilter(myFilter);
    dataView.setFilterArgs(0);
    dataView.endUpdate();

    // add DOM event listeners
    document.querySelector('[data-test="onsort-on"]').addEventListener('click', () => onSortReset(true));
    document.querySelector('[data-test="onsort-off"]').addEventListener('click', () => onSortReset(false));
  });
</script>
</body>
</html>