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.

Using Inline Edit (In-Line Editing) on Mobile

The Inline Grid structure used in the Table element is now supported in mobile applications (Android & iOS). This feature allows users to edit table rows directly from their mobile device.

1. Preparing the Table Element

• Enable the Editable property.
• Add an editable column using Add EditableTableColumn for inline editing.
• If continuous editing mode is desired, Editable Always Active can be used.

2. EditableTableColumn Configuration

Inside EditableTableColumn:

• Link the data from the Value / Field to Display field to display the data in the column.
• Select the component to be used during editing (TextInput, Selectbox, etc.) from the EditMode Component field.

This structure ensures that the appropriate input opens when the user taps on the cell on mobile.

3. Saving (Save Record) Process

• Save Record works in a manner compatible with inline edit.
• Save Record is triggered when the user finishes editing.
• The “On Row Edit Finished” event is not currently available in the UI, so it cannot be used.

To save the edited data:

1. Define the Save Record action on the EditMode Component within the edited EditableTableColumn.
2. When the save operation is successful:
3. On Success → call the listing action again
4. (e.g., Initial Action).

This method is the correct flow for both mobile and web.

4. User Flow on Mobile

Inline edit works as follows on mobile devices:

• The user taps the cell they want to edit.
• The EditMode Component becomes active and the mobile keyboard opens.
• The user edits the value.
• When the editing is complete:
  
  • Presses the Done/Enter key or
  • Taps outside the cell.
• This triggers the Save Record action.
• The table's data source is refreshed and the updated value is visible.

5. Recommendations for Mobile Design

• Limit the number of columns; hide unnecessary columns on mobile screens.
• Use the Always Visible On Mobile Resolution feature for critical columns.
• You can add a light background or icon to visually distinguish editable cells.

Inline Edit in the Table element now works stably in both web and mobile applications. Users can easily edit rows on mobile devices, save them with Save Record, and update the table instantly.