TileView.ItemCustomize Event

Allows you to customize individual tiles.

Namespace : DevExpress.XtraGrid.Views.Tile

Assembly : DevExpress.XtraGrid.v25.2.dll

NuGet Packages : DevExpress.Win.Grid, DevExpress.Win.Navigation

Declaration

C#
VB.NET

csharp

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

<DXCategory("Data")>
Public Event ItemCustomize As TileViewItemCustomizeEventHandler

Event Data

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

Property	Description
HtmlElement
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:

A regular template (TileView.TileTemplate)
An HTML-CSS template (TileView.TileHtmlTemplate)

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

C#
VB.NET

csharp

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);
    //...
}

Imports DevExpress.XtraEditors

Private Sub tileView1_ItemCustomize(ByVal sender As Object, ByVal e As DevExpress.XtraGrid.Views.Tile.TileViewItemCustomizeEventArgs) _
    Handles tileView1.ItemCustomize
    '...
    Dim elDescription = e.Item.GetElementByName("Description")
    elDescription.ImageVisible = Not String.IsNullOrEmpty(task.Description)
    '...
End Sub

Customize Tiles Generated from HTML-CSS Templates

Use the event’s HtmlElement 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:

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

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

C#
VB.NET

csharp

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

Private Sub TileView1_ItemCustomize(ByVal sender As Object, ByVal e As TileViewItemCustomizeEventArgs)
    Dim msg = TryCast(tileView1.GetRow(e.RowHandle), Helpers.EmailMessage)
    If msg Is Nothing OrElse e.HtmlElement Is Nothing Then
        Return
    End If
    Dim unread As Boolean = msg.Read <> 1
    If msg.Photo IsNot Nothing Then
        Dim initials = e.HtmlElement.FindElementById("initials")
        If initials IsNot Nothing Then
            initials.Hidden = True
        End If
    Else
        Dim photo = e.HtmlElement.FindElementById("photo")
        If photo IsNot Nothing Then
            photo.Hidden = True
        End If
    End If
    '...
    Dim subj = e.HtmlElement.FindElementById("subject")
    If subj IsNot Nothing Then
        subj.Style.SetProperty("font-weight",If(unread, "bold", "normal"))
        subj.Style.SetForeColor(If(unread, "@Primary", "@WindowText"))
    End If
    '...
End Sub