This screen is the same as the scrolling grid template except that the screen type is Edit instead of Browse and the grid’s in-cell editing feature is enabled by setting the allowEditing property to true. Also, the command bar contains an Add command for adding new items and a Delete command for marking the selected item for deletion.
In order to use this screen template, you must first install the NuGet package into the HTML Client project. See Installing the NuGet Client Package for instructions.
At runtime, the user initiates editing by clicking a data cell. An editable text box appears with the current cell contents, at which point the user can type a new value. When the user presses the Enter key (or clicks a different data cell in any row), the model layer is updated with the new value, and a pencil icon appears in the record selector column of the modified row. The record selector column also displays icons for deleted and newly added rows, as appropriate.
When the user clicks the Add button, a new item is created in the model layer and displayed in the first grid row. If desired, you can modify the generated screen code to initialize specific properties of newly created items. Alternatively, you can open the entity type in the data designer, switch the perspective to your HTML Client project, and write code to handle the created method for the entity.
Pending changes are not committed to the underlying data source until the user clicks the Save button. To cancel pending changes, the user can click the Discard button. In either case, the grid display is refreshed accordingly.
When the grid’s allowEditing property is true, as it is in this screen template by default, any Tap action set on the Columns Layout element is ignored. If you would prefer to display a separate screen for editing individual rows, set allowEditing to false and set up a Tap handler for the collection’s editSelected method as you normally would. After the user commits the changes in the edit screen, the grid display will be refreshed accordingly.
 |
Grid columns from related tables are read-only and cannot be edited directly within grid cells. If you need to edit related columns, set allowEditing to false and use a Tap handler to display an editing screen. |