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 the data in your table, but also edit and save it. To use this feature, you need to add EditableTableColumn to the Table element.

Add EditableTableColumn to Table Element

1. Select the Table element on the screen.
2. Open the Properties panel.
3. Click the Add EditableTableColumn button under TableRow.
   
   • The column will be automatically added with a Label element.

EditableTableColumn Usage

• EditableTableColumn is different from the standard TableColumn. It cannot be edited directly during the design process and has basic properties.
• You can bind dynamic data to the column and make style edits.

Using Dynamic Data in EditableTableColumn

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

Binding Data to Label Element in Editable Table Column

1. Select the Label element in the Editable Table Column.
2. In the Properties panel, select the data to be displayed from the Field to Display parameter in the Value field.
3. Specify the element to be used during editing via the EditMode Component parameter.
   
   • For example, the TextInput element can be used to enter a name and Selectbox element can be used to select a department.

Example Editable Table Column Usage

• In a Table element consisting of Editable Table Columns, the first row can appear in edit mode.
• You can manage the Property and Styling settings of the elements in the columns.
• When previewing or publishing the application, you can switch to edit mode by double-clicking the row.
• You can save values by pressing the “Enter” key 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 Usage

On Row Edit Finished is only meaningful with the Inline Grid property of Table. It is used to define the actions to be executed to add/update records to the database after completing row editing.

• In the OnRowEditFinished event, the data source action of the table must be called again after the record operation is completed.

Example Scenario: Listing Customer Address and Customer Name as Editable

1. Add the action that will provide the listing functionality as Initial Action.
2. Add a Table element to the screen.
3. With the Table element selected, follow the steps below in the Properties panel:
   
   • Add Action → On Row Edit Finished → Managed DB → Save Record
   • Under the Save Record action, define the related parameters.
4. After adding the Save Record action, add the On Row Edit Finished action again and define the action that will provide the listing function.
5. Select the Label elements in the columns and define data definitions through the Value field in the Properties panel.

Thanks to the Inline Grid feature, you can not only view the data in the Table element, but also edit and save it. This feature adds dynamic editing and data saving functionality to your applications.