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 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>:

Name	Type	Default	Description
criteria	string	-	Clients can send a Groovy expression to perform filters on the query server; these remain active for the life of the subscription.
fields	string	-	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.
isSnapshot	boolean	false	Request a snapshot from the server.
max-rows	number	-	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-view	number	-	Maximum number of rows to track as part of a client "view"
moving-view	boolean	false	If 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-by	string	-	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).
request	string	-	Similar to fields but for Request Server scenarios. This optional parameter enables you to specify request fields, which can include wildcards.
resource-name	string	-	The name of the target Data Server query or Request Server requestReply.
reverse	boolean	false	This 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-interval	number	-	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>
...