Tile View - Item Template

You can customize the appearance of TileView visual elements with templates. Specify custom HTML markup in itemTemplate to customize all tiles. To change the apperance of individual tiles, define items[].template.

Backend API

​x
 
@model IEnumerable<DevExtreme.NETCore.Demos.Models.TileViewItem>​@(Html.DevExtreme().TileView()    .DataSource(Model)    .Height(390)    .BaseItemHeight(120)    .BaseItemWidth(185)    .ItemMargin(10)    .ItemTemplate(@<text>            <div class="price"><%- formatCurrency(Price) %></div>            <div class="image" style="background-image: url(<%- ImageSrc %>)"></div>    </text>))​<script>    const formatCurrency = new Intl.NumberFormat('en-US', {        style: 'currency',        currency: 'USD',        minimumFractionDigits: 0,        maximumFractionDigits: 0,    }).format;</script>​

xxxxxxxxxx
 
using DevExtreme.NETCore.Demos.Models.SampleData;using Microsoft.AspNetCore.Mvc;​namespace DevExtreme.NETCore.Demos.Controllers {    public class TileViewController : Controller {        public ActionResult ItemTemplate() {            return View(SampleData.TileViewItems);        }    }}

xxxxxxxxxx
 
using System.Text.Json.Serialization;​namespace DevExtreme.NETCore.Demos.Models {    public class TileViewItem {        public int ID { get; set; }        public string Address { get; set; }        public string City { get; set; }        public string State { get; set; }        public int Price { get; set; }        public string ImageSrc { get; set; }​        [JsonPropertyName("heightRatio")]        public int? HeightRatio { get; set; }​        [JsonPropertyName("widthRatio")]        public int? WidthRatio { get; set; }    }}​

xxxxxxxxxx
 
using System.Collections.Generic;​namespace DevExtreme.NETCore.Demos.Models.SampleData {    public partial class SampleData {        public static readonly IEnumerable<TileViewItem> TileViewItems = new[] {            new TileViewItem {                ID = 1,                Address = "652 Avonwick Gate",                City = "Toronto",                State = "ON",                Price = 780000,                ImageSrc = "../../images/Gallery/1.jpg"            },            new TileViewItem {                ID = 2,                Address = "328 S Kerema Ave",                City = "Milford",                State = "CT",                Price = 350000,                ImageSrc = "../../images/Gallery/3.jpg"            },            new TileViewItem {                ID = 3,                Address = "8512 Tanglewood Cir",                City = "Reform",                State = "AL",                Price = 250000,                ImageSrc = "../../images/Gallery/6.jpg",                WidthRatio = 2            },            new TileViewItem {                ID = 4,                Address = "6351 Forrest St",                City = "Jersey City",                State = "NJ",                Price = 320000,                ImageSrc = "../../images/Gallery/14.jpg"            },            new TileViewItem {                ID = 5,                Address = "61207 16th St N",                City = "Moorhead",                State = "MN",                Price = 1700000,                ImageSrc = "../../images/Gallery/5.jpg",                HeightRatio = 2,                WidthRatio = 2            },            new TileViewItem {                ID = 6,                Address = "5119 Beryl Dr",                City = "San Antonio",                State = "TX",                Price = 455000,                ImageSrc = "../../images/Gallery/4.jpg"            },            new TileViewItem {                ID = 7,                Address = "7121 Bailey St",                City = "Worcester",                State = "MA",                Price = 555000,                ImageSrc = "../../images/Gallery/7.jpg"            },            new TileViewItem {                ID = 8,                Address = "82649 Topeka St",                City = "Riverbank",                State = "CA",                Price = 1750000,                ImageSrc = "../../images/Gallery/2.jpg",                HeightRatio = 2            },            new TileViewItem {                ID = 9,                Address = "7700 Elmwood Dr",                City = "Cleveland",                State = "OK",                Price = 470000,                ImageSrc = "../../images/Gallery/17.jpg",                HeightRatio = 2,                WidthRatio = 2            },            new TileViewItem {                ID = 10,                Address = "620201 Plymouth Rd",                City = "Detroit",                State = "MI",                Price = 610000,                ImageSrc = "../../images/Gallery/8.jpg"            },            new TileViewItem {                ID = 11,                Address = "1198 Theresa Cir",                City = "Whitinsville",                State = "MA",                Price = 320000,                ImageSrc = "../../images/Gallery/9.jpg"            },            new TileViewItem {                ID = 12,                Address = "4815 Warbler Ln",                City = "Rockport",                State = "TX",                Price = 700000,                ImageSrc = "../../images/Gallery/12.jpg"            },            new TileViewItem {                ID = 13,                Address = "420234 Rogge St",                City = "Detroit",                State = "MI",                Price = 320000,                ImageSrc = "../../images/Gallery/23.jpg"            },            new TileViewItem {                ID = 14,                Address = "114840 Interlake Ave N",                City = "Seattle",                State = "WA",                Price = 400000,                ImageSrc = "../../images/Gallery/22.jpg"            },            new TileViewItem {                ID = 15,                Address = "13673 Pearl Dr #7",                City = "Monroe",                State = "MI",                Price = 399000,                ImageSrc = "../../images/Gallery/20.jpg"            },            new TileViewItem {                ID = 16,                Address = "15447 Via Viento",                City = "Atascadero",                State = "CA",                Price = 1100000,                ImageSrc = "../../images/Gallery/21.jpg"            }        };    }}​

xxxxxxxxxx
 
.dx-tile-content {    height: 100%;    padding: 0;    position: relative;}​.dx-tile-content .image {    height: 100%;    width: 100%;    background-position: center;    background-size: cover;    padding: 10px;    display: block;}​.dx-tile {    border: 1px solid #999;}​.dx-tile.dx-state-hover {    border-color: #eee;}​.dx-tile-content .price {    font-size: 12px;    position: absolute;    background-color: black;    color: white;    opacity: 0.6;    padding: 2px;    left: 9px;    top: 9px;}​