TileView.ItemCustomize Event

Allows you to customize individual tiles.

Namespace: DevExpress.XtraGrid.Views.Tile

Assembly: DevExpress.XtraGrid.v21.2.dll

Declaration

[DXCategory("Data")]
public event TileViewItemCustomizeEventHandler ItemCustomize

Event Data

The ItemCustomize event's data class is TileViewItemCustomizeEventArgs. The following properties provide information specific to this event:

Property Description
HtmlElementInfo
Item Gets the currently processed tile.
RowHandle Gets the row handle of the currently processed tile.

Remarks

TileView can generate tiles from the following templates:

You can handle the ItemCustomize event to modify individual tiles generated from any of these templates. This event fires repeatedly for each visible tile.

Customize Tiles Generated from Regular Templates

Use the event’s Item property to access the currently processed tile. This property exposes methods to retrieve tile elements. Once you access a tile element, you can modify its settings.

Example

The following example handles the ItemCustomize event to hide images for specific tile elements:

See the following demo to find the complete code:

Run Demo

using DevExpress.XtraEditors;

private void tileView1_ItemCustomize(object sender, DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs e) {
    //...
    var elDescription = e.Item.GetElementByName("Description");
    elDescription.ImageVisible = !string.IsNullOrEmpty(task.Description);
    //...
}

Customize Tiles Generated from HTML-CSS Templates

Note

Support for HTML and CSS-based UI design in controls is under active development and is available as a Community Technology Preview (CTP). We appreciate your feedback on how you build desktop UIs with HTML and CSS.

Use the event’s HtmlElementInfo property to access individual HTML elements of the currently processed tile. The following methods allow you to retrieve HTML elements by tag, class, and ID:

  • HtmlElementInfo.FindElementsByTag — Returns a list of HTML elements that have the specified tag.
  • HtmlElementInfo.FindElementsByClass — Returns a list of HTML elements that are of the specified class.
  • HtmlElementInfo.FindElementById — Returns an HTML element with the specified tag.

The elements returned by these methods expose properties to change element display settings. The main properties include:

  • element.Hidden — Allows you to hide the element.
  • element.Style — Allows you to modify CSS style properties applied to the element. This object exposes the SetBackgroundColor, SetForeColor, and SetProperty methods for this purpose.

Example

The following ItemCustomize event handler changes styles and visibility of specific HTML elements in tiles.

See the following demo to find the complete code:

Run Demo

void TileView1_ItemCustomize(object sender, TileViewItemCustomizeEventArgs e) {
    var msg = tileView1.GetRow(e.RowHandle) as Helpers.EmailMessage;
    if(msg == null || e.HtmlElementInfo == null) return;
    bool unread = msg.Read != 1;
    if(msg.Photo != null) {
        var initials = e.HtmlElementInfo.FindElementById("initials");
        if(initials != null) initials.Hidden = true;
    } else {
        var photo = e.HtmlElementInfo.FindElementById("photo");
        if(photo != null) photo.Hidden = true;
    }
    //...
    var subj = e.HtmlElementInfo.FindElementById("subject");
    if(subj != null) {
        subj.Style.SetProperty("font-weight", unread ? "bold" : "normal");
        subj.Style.SetForeColor(unread ? "@Primary" : "@WindowText");
    }
    //...
}
See Also