Skip to main content

TileView.CustomItemTemplate Event

Allows you to assign and customize templates for individual tiles.

Namespace: DevExpress.XtraGrid.Views.Tile

Assembly: DevExpress.XtraGrid.v23.2.dll

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

Declaration

[DXCategory("Data")]
public event TileViewCustomItemTemplateEventHandler CustomItemTemplate

Event Data

The CustomItemTemplate event's data class is DevExpress.XtraGrid.Views.Tile.TileViewCustomItemTemplateEventArgs.

Remarks

Handle the CustomItemTemplate event to override the default template for individual tiles. The following properties allow you to specify the default tile template:

Override Regular Templates

Create regular templates beforehand in the Data Grid Designer’s Tile Template page. These templates are stored in the TileView.Templates collection, and they are also accessible from the Templates parameter of the CustomItemTemplate event.

When you handle the CustomItemTemplate event, access a required template from the e.Templates collection. Assign the template to the event’s Template parameter for individual items.

Override HTML-CSS Templates

When you handle the CustomItemTemplate event, you can assign a new HTML-CSS template (a DevExpress.Utils.Html.HtmlTemplate object) to the e.HtmlTemplate event parameter.

You can also use the following properties to modify the HTML and CSS markup of the current template:

  • e.HtmlTemplate.Template — Specifies HTML markup.
  • e.HtmlTemplate.Styles — Specifies CSS styles.

Tip

TileView’s TileView.TileHtmlTemplates property allows you to create multiple HTML-CSS templates at design time. You can then access these templates in your CustomItemTemplate event handler, and assign them to tiles.

The following example changes CSS styles for tiles based on their ‘Flagged’ property value:

See the following demo for the complete code:

Run Demo

void TileView1_CustomItemTemplate(object sender, TileViewCustomItemTemplateEventArgs e) {
    var msg = tileView1.GetRow(e.RowHandle) as EmailMessage;
    if(msg == null) return;
    string result = e.HtmlTemplate.Styles;
    if(msg.Flagged) {
        result = result.Replace("<FlagDefaultOpacity>", "1").Replace("<FlagHoverOpacity>", "1");
    } else {
        result = result.Replace("<FlagDefaultOpacity>", "0").Replace("<FlagHoverOpacity>", "0.5");
    }
    e.HtmlTemplate.Styles = result;
}
See Also