Tile Editing

• Jul 17, 2024
• 2 minutes to read

Edit Form

To enable a separate Edit Form to edit tiles, set the TileView.OptionsBehavior.EditingMode property to TileViewEditingMode.EditForm.

C#

tileView1.OptionsBehavior.EditingMode = TileViewEditingMode.EditForm;

VB.NET

tileView1.OptionsBehavior.EditingMode = TileViewEditingMode.EditForm

The Tile View opens the modal Edit Form when a user double-clicks a tile, or focuses the tile and then presses Enter or F2.

The Tile View automatically generates the layout of data fields within the Edit Form. Use TileView.OptionsEditForm and GridColumn.OptionsEditForm properties to customize layout settings for all or specific data fields (columns).

Use the GridColumn.OptionsColumn property to customize data field settings. The following example makes the “Label” data field (column) read-only:

C#

colLabel.OptionsColumn.ReadOnly = true;

VB.NET

colLabel.OptionsColumn.ReadOnly = True

Custom Edit Form

If the Edit Form’s default layout does not meet your requirements, you can create a custom Edit Form. To do this, follow the steps below:

1. Create a User Control that derives from the EditFormUserControl class.
2. Assign the User Control to the TileView.OptionsEditForm.CustomEditFormLayout property.

Customize Edit Form Behavior

Handle the following events to customize your Edit Form dynamically:

• TileView.EditFormShowing - Occurs when an Edit Form is about to be displayed, and allows you to cancel the action.
• TileView.EditFormPrepared - Allows you to customize the Edit Form that is about to be displayed.
• TileView.ShowingPopupEditForm - Occurs when an Edit Form is about to be displayed as a separate modal window.

In-place Editors (HTML-CSS Templates)

When you use HTML-CSS templates to render tiles, you can use the <input> tag to embed in-place editors to tiles to display and edit data source fields.

HTML

<input name="repositoryItemButtonEdit1" value="${Price}" class="editor"/>

Ensure the TileViewOptionsBehavior.EditingMode property is set to HtmlTemplate (default value) to enable in-place edit operations.

See the following section for more information: Tile View - HTML and CSS-based Tile Template.