Skip to main content
Version: Current

Grid Pro - Connected data

The connected data use case is when you have a Data Server or Request Server available and ready to use, and don't want to worry about handling data transformations, updates, deletes and cell renderers in the grid. For cell renders, it's flexible; you can use the components provided by default, or you can use any component you want.

In order to use the connected version of the grid-pro, you need to use the <grid-pro-genesis-datasource> component.

Set-up​

info

The examples below are based on an example application called "alpha", so we refer to a design system called @genesislcap/alpha-design-system, which has the prefix alpha. In practice, you decide on the name and prefix of your design system, but it exposes the same API.

import { provideDesignSystem } from '@genesislcap/alpha-design-system';
import { foundationGridComponents } from '@genesislcap/grid-pro';

provideDesignSystem().register(alphaAgGrid(), foundationGridComponents);

Grid Pro Genesis datasource​

The following attributes can be used with the <grid-pro-genesis-datasource>:

NameTypeDefaultDescription
criteriastring-Clients can send a Groovy expression to perform filters on the query server; these remain active for the life of the subscription.
fieldsstring-This optional parameter allows you to select a subset of fields from the query if the client is not interested in receiving all of them.
isSnapshotbooleanfalseRequest a snapshot from the server.
max-rowsnumber-Maximum number of rows to be returned as part of the initial message, and as part of any additional MORE_ROWS messages. This will not affect the number of rows displayed
max-viewnumber-Maximum number of rows to track as part of a client "view"
moving-viewbooleanfalseIf true, when the maximum number of rows defined in max-view is reached, the Data Server will start discarding the oldest rows (in terms of timestamp) and sending newer rows. If false, the updates in the server will be sent to the front end regardless of order. Note that this will only update the UI; no changes will be performed in the database.
order-bystring-This option can be used to select a Data Server index (defined in the Data Server query), which is especially useful if you want the data to be sorted in a specific way. By default, Data Server rows are returned in order of creation (from oldest database record to newest).
requeststring-Similar to fields but for Request Server scenarios. This optional parameter enables you to specify request fields, which can include wildcards.
resource-namestring-The name of the target Data Server query or Request Server requestReply.
reversebooleanfalseThis option changes the Data Server index iteration. For example, if you are using the default index, the query will return rows in order from the newest database records to the oldest.
polling-intervalnumber-This option enables you to set a custom polling frequency (in milliseconds) for a Request Server resource. Note that this option only works with Request Server resources; if your resource is a Data Server query, your grid is updated in real time.

Examples​

Below are some examples of how to use the grid-pro with connected data.

This example creates a grid with a snapshot of the ALL_PROCESS_STATUS query.

Example 1

<alpha-grid-pro>
    <grid-pro-genesis-datasource
      resourceName="ALL_PROCESSES_STATUS"
      isSnapshot="true" />
  ...
</alpha-grid-pro>
...

This example creates a grid that displays 5 rows of data. When a new record is added, the oldest record is removed from the display.

```html title="Example 2"
<alpha-grid-pro>
    <grid-pro-genesis-datasource
        resource-name="ALL_TRADE"
        max-view="5"
        moving-view="true" />
    ...
</alpha-grid-pro>
...

This example creates a grid with snapshot data for two specified fields. It loads up to 5 rows of data.

Example 3
<alpha-grid-pro>
    <grid-pro-genesis-datasource
        resource-name="ALL_PROCESSES_STATUS"
        isSnapshot="true"
        fields="PROCESS_NAME LOG_LEVEL"
        max-view="4"
        max-row="5"
        moving-view="true" />
    ...
</alpha-grid-pro>
...

This example creates a grid with a polling frequency of 10 seconds. Remember that this is only relevant for Request Server resources.

Example 4
<alpha-grid-pro>
    <grid-pro-genesis-datasource
        resource-name="REQUEST_SERVER_ALL_TRADE"
        polling-interval="10000" />
    ...
</alpha-grid-pro>
...

Variations​

There are two variations on this component, which enable you to work with either a client-side datasource or a server-side datasource:

  • <grid-pro-client-side-datasource>
  • <grid-pro-server-side-datasource>

Grid Pro client-side datasource​

The component<grid-pro-client-side-datasource> is suitable for datasets that are small to medium in size and which can be entirely loaded into the client.

Operations like sorting and filtering are performed on the client-side. This can be used with both Data Server and Request Server resources.

Grid Pro server-side datasource​

The component <grid-pro-server-side-datasource> is ideal for large datasets, where operations are pushed to the back end to ensure performance and consistency. Data is fetched as needed based on user interactions.

The example below creates a grid with a server-side row model, so that the user can request data on demand by scrolling.

Example 5
<alpha-grid-pro>
        <grid-pro-server-side-datasource
          resource-name="ALL_COUNTERPARTYS"
        ></grid-pro-server-side-datasource>
    ...
</alpha-grid-pro>
...

This example creates a grid with a server-side row model. The user can request data on a page-by-page basis, and each page has 10 rows of data.

Example 6
<alpha-grid-pro>
        <grid-pro-server-side-datasource
          resource-name="ALL_COUNTERPARTYS"
          pagination
          max-rows="10"
        ></grid-pro-server-side-datasource>
    ...
</alpha-grid-pro>
...