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

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

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

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