Tile View - Basics

TileView displays data within a collection of tiles. This component can contain text or HTML markup defined in its dataSource or items[] array.

In this demo, the itemTemplate property is used to customize tiles.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.TileViewItem> @(Html.DevExtreme().TileView() .DataSource(Model) .ItemTemplate(@<text> <div class="image" style="background-image: url(<%- ImageSrc %>)"></div> </text>) )

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

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; } } }

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 .image { height: 100%; width: 100%; background-position: center; background-size: cover; display: block; }