Using Inline Grid in Table Element

The Inline Grid property is used with EditableTableColumn added to the Table element and allows you to not only view, but also edit and save data in your table. In order to use the Inline Grid feature, you need to add EditableTableColumn to the Table element.

To add Editable Table Column to Table element;

1. Select the Table element on the screen.
2. Open the Properties panel.
3. Click Add Editable Table Column under Table Row and the column will automatically come with a Label element.

Adding an EditableColumn

EditableTableColumn, unlike regular TableColumn, is not editable during the design process and has standard properties. However, you can bind dynamic data to the column and make style edits of the column.

To bind a data source to the Table element to work with dynamic data in EditableTableColumn;

1. Select the Table element.
2. In the Properties panel Datasources field, select the action you want to use as a data source from the actions you added to the screen as Initial Action.

Binding data to Label in Editable Table Column

To bind dynamic data in the Label element in Editable Table Column;

1. Select the Label element in Editable Table Column.
2. Select the data you want to display with the Field to Display parameter in the Value field in the Properties panel.
3. Select the element you want to use when editing the table via the Edit Mode Component parameter. For example, you can use the TextInput element to enter a name, while you can use the Selectbox element to select a department.

In an example scenario, a table consisting of EditableTableColumns and containing the customer address and customer name looks like in Figure 3.

Example EditableTableColumn Usage

As shown in Figure 3, the first row of the Table element consisting of EditableTableColumns appears as if it is in edit mode. However, you can manage the Property and Styling settings of the elements in the columns.

When you preview or publish your application, you can switch to edit mode by double-clicking on the relevant row.

You can save values by pressing Enter or by clicking outside the table.

To save the values you edited, you need to save the new values with the action you defined in the on Row Edit Finished event of the Table element.

On Row Edit Finished is an event that is meaningful only in the Inline Grid property of the Table and is the event to define the actions that will be called to add/update records to the database when you finish editing the row.

In the On Row Edit Finished event, after the action that completes the record operation, it is necessary to redefine the action that is the data source of the table.

Let's run a sample scenario where customer address and customer name are listed in an editable structure.

1. First, add the action that will provide the listing function to the screen as Initial Action.
2. Then add a Table element to the screen.
3. With Table element selected, select Add Action>On Row Edit Finished>ManagedDb>Save Record via Properties panel.
4. Define the relevant parameter under the Save Record action. An example definition process is shown in Image 4.

Save Record Action Parameter Definition

1. After adding the Save Record action, add the action that will provide the listing function by following the Add Action>On Row Edit Finished steps with the Table Element selected.
2. Then select the Label elements in the columns and define the value via Properties panel, Value field.

With the Inline Grid feature in the applications you develop, you can not only display the data on the Table element, but also edit and save it, and add new functions to your application.