- Download and install the Data Grid Reactive component from Forge.
This example fetches data from a database and displays it in the grid. (This examples does not define any column structure.)
In Service Studio, in the Toolbox, search for Grid.
The Grid widget is displayed.
From the Toolbox, drag the Grid widget into the Main Content area of your application's screen.
By default, the Grid widget contains the following placeholders:
- Loading (displayed while data is being fetched from the server)
- NoResults (displayed when no results are returned)
You can change the content of these placeholders as required.
Create a Data Action to fetch the data you want to display in the grid.
Enter a name for the Action's output parameter (for example, Data) and ensure the Data Type is Text.
This output parameter is used to receive the data fetched from the database.
On the Data tab, drag the data source entity onto the flow.
An aggregate (in this example, GetProducts) is automatically created.
On the Logic tab, drag the ArrangeData Server Action onto the flow.
The Grid block receives data in JSON format. The ArrangeData Server Action analyzes this data, serializes it, and retrieves the information from each column, whether it be in, for example, string, number, boolean format.
Set the Data Action property to the aggregate result.
All of the aggregate data is passed to the action.
Note: Because the ArrangeData Server Action action can receive any data structure, you must use the ToObject function.
Drag an Assign onto the flow and set the Data action output parameter to the ArrangeData.DataJSON property.
Return to the main screen and select the Grid. On the Properties tab, set the Data property to the output of the Data Action you created earlier (step. 3).
Bind the Grid's IsDataFetched property to the Data Action property IsDataFetched.
After following these steps and publishing the module, you can test the component in your app.
|Data (Text): Mandatory||The data displayed in the Grid.|
|IsDataFetched (Boolean): Mandatory||Defines what is displayed while data is loading.|
|GridHeight (Integer): Optional||Sets the Grid's height in pixels. Default height is 400 pixels.|
|HasGroupPanel (Boolean): Optional||Enables the group panel to allow dragging columns and apply the grouping by the fields corresponding to the dragged columns. Default value is True.|
|AllowColumnEdit (Boolean): Optional||Allows columns to be edited. Default value is False.|
|AllowColumnReorder (Boolean): Optional||Allows columns to be reordered. Default value is True.|
|AllowColumnResize (Boolean): Optional||Allows column width to be resized. Default value is True.|
|AllowColumnSort (Boolean): Optional||Allows sorting data by column. Default value is True.|
|RowHeight (Integer): Optional||Sets the row height in pixels. Default height is 48 pixels.|
|RowsPerPage (Integer): Optional||Sets the number of rows displayed per page. Default value is 50.|