Angular-Slickgrid/src/app/examples/grid-infinite-json.component.html at 14097d37c9f665ba9b5181f49ad1f7184b7fae86 · ghiscoding/Angular-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
<div class="demo40">
  <h2>
    Example 40: Infinite Scroll from JSON data
    <span class="float-end">
      <a
        style="font-size: 18px"
        target="_blank"
        href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-infinite-json.component.ts"
      >
        <span class="mdi mdi-link-variant"></span> code
      </a>
    </span>
    <button
      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
      type="button"
      data-test="toggle-subtitle"
      (click)="toggleSubTitle()"
    >
      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
    </button>
  </h2>

  <div class="subtitle">
    <ul>
      <li>
        Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In
        its simplest form, the more the user scrolls down, the more rows get loaded.
      </li>
      <li>
        NOTES: <code>presets.pagination</code> is not supported with Infinite Scroll and will revert to the first page, simply
        because since we keep appending data, we always have to start from index zero (no offset).
      </li>
    </ul>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <button
        class="btn btn-outline-secondary btn-sm btn-icon"
        data-test="clear-filters-sorting"
        (click)="clearAllFiltersAndSorts()"
        title="Clear all Filters & Sorts"
      >
        <span class="mdi mdi-close"></span>
        <span>Clear all Filter & Sorts</span>
      </button>
      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
        Set Filters Dynamically
      </button>
      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
        Set Sorting Dynamically
      </button>
      <button class="btn btn-outline-secondary btn-sm" data-test="group-by-duration" (click)="groupByDuration()">
        Group by Duration
      </button>

      <label class="ml-4">Reset Dataset <code>onSort</code>:</label>
      <button class="btn btn-outline-secondary btn-sm" data-test="onsort-on" (click)="onSortReset(true)">ON</button>
      <button class="btn btn-outline-secondary btn-sm" data-test="onsort-off" (click)="onSortReset(false)">OFF</button>
    </div>
  </div>

  <div *ngIf="metrics" class="mt-2" style="margin: 10px 0px">
    <b>Metrics:</b>
    <span>
      <span>{{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }}</span> —
      <span data-test="totalItemCount">{{ metrics.totalItemCount }}</span>
      items
    </span>
  </div>

  <angular-slickgrid
    gridId="grid40"
    [columnDefinitions]="columnDefinitions"
    [gridOptions]="gridOptions"
    [dataset]="dataset"
    (onAngularGridCreated)="angularGridReady($event.detail)"
    (onSort)="handleOnSort()"
    (onScroll)="handleOnScroll($event.detail.args)"
    (onRowCountChanged)="handleOnRowCountChanged($event.detail.args)"
  >
  </angular-slickgrid>
</div>