Skip to main content

Tile Editing

  • 2 minutes to read

Edit Form

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


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:

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:

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.

<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.