Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Local Grid Pagination & Backend Service new features

Choose a tag to compare

View all tags
@ghiscoding ghiscoding released this 20 Jan 16:51
· 2629 commits to master since this release
v2.16.5
7f5a424

Local Grid Pagination

This was requested couple times, it's now possible to show Pagination on a local grid (that is without using a backendServiceApi). To get this to show up, the only thing you need to do is to enablePagination: true define the Pagination settings in your Grid Options. You can see demo of this new feature

Custom Footer (opt-in feature)

In addition to the Local Pagination, there is also a new Custom Footer that was just created and can be used to display some of the grid metrics (items count, with/without filter, last update timestamp and some more). However note that since this footer display roughly the same info as the Pagination, it cannot be displayed when a Pagination is already shown (in other words, it only works when Pagination is disabled). It's also very customizable, you can choose to display/hide some of the metrics. You can see demo of this

Row Detail

From a Stack Overflow Question it was brought to light that it was very hard to get access to the SlickGrid, DataView objects and even Parent Component references from the Row Detail Child Component. This was addressed in this new version

  • The Row Detail Example was modified to show a demo how to delete the grid row directly from the Child Component. You can also see docs in the updated Wiki

Backend Services (new features/interfaces for OData & GraphQL)

These changes apply to both available Backend Services (OData, GraphQL) and it was started in previous version but improved in this version. You can now disable the Pagination and expect the backend query to be different (that is without any pagination offset and stuff in the query). There also 2 new interfaces OdataServiceApi and GraphqlServiceApi interfaces to help with TS Types and use the correct properties associated to each. The most interesting change is probably that you can now use OData/GraphQL to load the data once but then use local Filtering/Sorting (without calling the backend) with these 2 new flags useLocalFiltering and useLocalSorting (they can be used separately too), a new GraphQL Example was created to demo that feature (we demoed with GraphQL but it also works with OData).

Important Code Change (when using TranslateService)

Please note that the Column Definitions property headerKey will be deprecated (in the future) and replaced by nameKey so that it align with SlickGrid (core) property which is name, for the column header title name. With this change, every other possible Translation Keys are aligned, in other words, any time you want to use translations, you just need to add the Key suffix, for example (name => nameKey, label => labelKey, columnGroup, columnGroupKey, ...). For now headerKey still works but you might want to start doing this change earlier than later.

Cheers ⭐️

Features

  • backend: add OData & GraphQL Service API interfaces (43d3a00, 11cc71c)
  • backend: add option to use local filtering/sorting strategy (73c288b)
  • examples: add new GraphQL without Pagination Example (f02ac2d)
  • footer: add custom footer to show metrics (2054319)
  • pagination: add Pagination to local grid (53aa9dc)
  • rowDetail: add few object instances that can be used in child comp (9cc52c3)
  • rowDetail: add Parent property to pass ref to parent comp (dd8c1cd)
  • tests: add Cypress E2E for Local Pagination and fix new bugs found (b7b1a73)
  • columnGroup: add columnGroupKey property in order to use translate (147470f)

Bug Fixes

  • backend: cancel prior http calls to avoid inconsistent data shown (f9aaf54)
  • build: TS warning on a missing Type (b894ee1)
  • cypress: fix failing Cypress E2E test (e78b2d9)
  • examples: use spinner only when loading data (d0b4820)
  • examples: use valid date format (f66703a)
  • filter: creating blank entry should only be entered once (3b769a4)
  • filters: remove filter DOM element IDs to avoid duplicate IDs (4b83133)
  • header: column header grouping should be re-render after a resize (beda628)
  • menu: remove unused code in Context Menu to select cell (a2ae4bb)
  • pagination: reload local grid with pagination presests w/same data (80eef1a)
  • pagination: should work with page number defined in presets (95428ad)
  • resizer: grid size fix for backend service with pagination disabled (6c4bcca)
  • styling: add missing SASS variable import (6de44e6)
  • styling: fix some styling issues found with menu dividers (6f375c9)
  • test: fix failing Cypress E2E test after GraphQL changes (dc50117)
  • test: fix Jest failing unit test (761fa4a)
  • build: create & use separate excel-builder package to fix security (c114ae0)
  • footer: fix Custom Footer styling issues with Bootstrap 4 (658a9fd)
  • pagination: should be empty (0) when filtering an empty dataset (7409832)
  • backend: fix build warnings (c72ccc9)
  • columns: Column Grouping should re-render after cols reordering (bd991f0)
  • formatter: refine condition to display a checkmark icon (507b299)
  • state: Clear Sort should trigger only 1 event & fix Pagination (8e4f931)
Assets 2
Loading