-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(deps): upgrade to Aurelia-Slickgrid 8.5.0
- Loading branch information
1 parent
980c837
commit 83ef359
Showing
26 changed files
with
2,991 additions
and
600 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
webpack-bs5-demo-with-locales/src/examples/slickgrid/example38.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| <div class="demo38"> | ||
| <h2> | ||
| Example 38: OData (v4) Backend Service with Infinite Scroll | ||
| <span class="float-end"> | ||
| <a style="font-size: 18px" target="_blank" | ||
| href="https://github.com/ghiscoding/aurelia-slickgrid/blob/master/packages/demo/src/examples/slickgrid/example38.ts"> | ||
| <span class="mdi mdi-link-variant"></span> code | ||
| </a> | ||
| </span> | ||
| </h2> | ||
|
|
||
| <h6 class="subtitle italic content"> | ||
| <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. | ||
| If we reached the end of the dataset and there is no more data to load, then we'll assume to have the entire dataset loaded in memory. | ||
| This contrast with the regular Pagination approach which will hold only hold data for 1 page at a time. | ||
| </li> | ||
| <li>NOTES</li> | ||
| <ol> | ||
| <li> | ||
| <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> | ||
| <li> | ||
| Pagination is not shown BUT in fact, that is what is being used behind the scene whenever reaching the scroll end (fetching next batch). | ||
| </li> | ||
| <li> | ||
| Also note that whenever the user changes the Sort(s)/Filter(s) it will always reset and go back to zero index (first page). | ||
| </li> | ||
| </ol> | ||
| </ul> | ||
| </h6> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-sm-3"> | ||
| <div class="alert alert-danger" show.bind="errorStatus" data-test="error-status"> | ||
| <em><strong>Backend Error:</strong> <span innerhtml.bind="errorStatus"></span></em> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-sm-2"> | ||
| <div class.bind="status.class" role="alert" data-test="status"> | ||
| <strong>Status: </strong> ${status.text} | ||
| <span hidden.bind="!processing"> | ||
| <i class="mdi mdi-sync mdi-spin"></i> | ||
| </span> | ||
| </div> | ||
| </div> | ||
| <div class="col-sm-10"> | ||
| <div class="alert alert-info" data-test="alert-odata-query"> | ||
| <strong>OData Query:</strong> <span data-test="odata-query-result">${odataQuery}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="row"> | ||
| <div class="col-sm-12"> | ||
| <button class="btn btn-outline-secondary btn-sm" data-test="clear-filters-sorting" | ||
| click.trigger="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts"> | ||
| <i class="mdi mdi-filter-remove-outline"></i> | ||
| Clear all Filter & Sorts | ||
| </button> | ||
| <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter" | ||
| click.trigger="setFiltersDynamically()"> | ||
| Set Filters Dynamically | ||
| </button> | ||
| <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting" | ||
| click.trigger="setSortingDynamically()"> | ||
| Set Sorting Dynamically | ||
| </button> | ||
| <button class="btn btn-outline-secondary btn-sm" data-test="group-by-gender" | ||
| click.trigger="groupByGender()"> | ||
| Group by Gender | ||
| </button> | ||
|
|
||
| <div show.bind="metrics" class="mt-2" style="margin: 10px 0px"> | ||
| <b>Metrics:</b> | ||
| <span> | ||
| <span>${metrics.endTime | dateFormat: 'DD MMM, h:mm:ss a'}</span> — | ||
| <span data-test="itemCount">${metrics.itemCount}</span> | ||
| of | ||
| <span data-test="totalItemCount">${metrics.totalItemCount}</span> | ||
| items | ||
| </span> | ||
| <span class="badge rounded-pill text-bg-primary" class.bind="tagDataClass" data-test="data-loaded-tag">All Data Loaded!!!</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <aurelia-slickgrid | ||
| grid-id="grid38" | ||
| column-definitions.bind="columnDefinitions" | ||
| grid-options.bind="gridOptions" | ||
| dataset.bind="dataset" | ||
| instances.bind="aureliaGrid" | ||
| on-aurelia-grid-created.trigger="aureliaGridReady($event.detail)" | ||
| on-row-count-changed.trigger="refreshMetrics($event.detail.args)"> | ||
| </aurelia-slickgrid> | ||
| </div> |
8 changes: 8 additions & 0 deletions
8
webpack-bs5-demo-with-locales/src/examples/slickgrid/example38.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| .demo38 { | ||
| .badge { | ||
| display: none; | ||
| &.fully-loaded { | ||
| display: inline-flex; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.