Data Grid (WIP)
Last updated
Last updated
The Data grid is a responsive grid control with a vast assortment of capabilities, including data editing and validation, searching and filtering, layout customization, and more.
Various Edit Possibilities The data grid provides full CRUD (create, read, update, delete) interaction. Updating data can be done in multiple modes: directly within the cell of the row, as form or as popup.
Filtering and Sorting Set up a filter row and a header filter to filter data by column values, or use other ways to filter. You can sort data grid by single or multiple columns.
Grouping You can use a column header's context menu or a group panel to group data in data grid.
Master-Detail View You can place detailed information per row that unfolds withing an accordion widget.
The data grid understands an array of objects as data structure, where each item in the array reflects a single column and the keys of the object reflect the column headers.
It is important that each object (row) has the same structure!
When binding data, the grid tries to automatically detect the corresponding data types and selects appropriate widgets for displaying (and optionally editing).
To get started its advisable to play with the simulated data (e.g. "randomPersonData") to understand the capabilities and inner workings.
In order to customize the shown data use the "Data Settings" button:
Let's go through the available settings:
Column Name The displayed name of the column (view only, never used in the business logic)
Visibility Configures how and when a column is visible. Possible options are: - Visible: The column is always visible - Detail: The column is only visible in the detailed view - Hidden: By default the column is hidden, but can be added by the user at runtime - Removed: The column is fully removed and never shown on the grid
Editing This option is only relevant when the data grid allows editing the listed data. Possible options are: - Optional: The corresponding data field can be added but is not required to - Required: The corresponding data field must be provided - Disabled: The corresponding data field is shown while editing, but disabled - Hidden: The corresponding data field is hidden from any editing dialogs
Editor Widget This is the widget type that should be used while editing. The choice here as well affects the displayed widgets. Depending on the choice, more detailed options relevant for that specific widget type may appear.
Tip: You can use the up/down arrows the set the default ordering of the columns
By default most of the extra features like editing, sorting, grouping, filtering etc. are disabled. Use the grid settings configuration to enable those.
We won't go through every setting in detail here, but rather pick the most relevant:
Data Editing Mode When updating data you can choose between three modes: - Row: A user edits one row at a time. The data grid saves changes when the row leaves the editing state. - Form: On entering the editing state, a row becomes a form with editable fields. The data grid saves changes after a user clicks the "Save" button. - Popup: Differs from the form mode in that the form with editable fields is placed in a popup window.
Show All Fields on Edit This checkbox customizes how the row of the updated data is described to the corresponding backend event (called "onUpdate", see below). By default only an "id" property is added to the changed data reflecting the id of the row (typically a primary key of a database) or, when not available in the data "id" becomes the index of the updated row. However, when checked, all available fields of that updated column are displayed as an object underneath the "id" property.
If the relevant options are selected in the settings above, the app user can be enabled to add, update or delete rows in the Data Grid. However, these changes are only at the UI level and need to be committed to the backend (for example, to update a database) to be made permanent.
Dragging a function input onto the widget enables the following properties:
onInsert: gets the information entered by the app user when adding a new row.
onDelete: gets the id (or the index if none is present) of the row deleted by the app user.
onUpdate: gets the information entered by the app user when updating a row.
onSelectionChange: If the Selection Mode is set as "Single", this property gets the id of the currently selected row. This can be useful for setting up navigation.
Select the option from the display widgets drop down and click on a free place in your app preview. To populate it with data you need to drag an output or a modifier item onto the grid.
