Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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.

07-TileView-EnableEditForm.png

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.

08-EditForm.png

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.