Your search did not match any results.

Tile View - Item Template

This demo illustrates how you can customize the appearance of tiles in the TileView component.

Backend API
@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>
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); } } }
using Newtonsoft.Json; 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; } [JsonProperty("heightRatio")] public int? HeightRatio { get; set; } [JsonProperty("widthRatio")] public int? WidthRatio { get; set; } } }
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" } }; } }
.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; }