Your search did not match any results.

Tile View - Basics

The TileView component contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices. This demo illustrates how to create a simple TileView.

Backend API
@model IEnumerable<DevExtreme.MVC.Demos.Models.TileViewItem> @(Html.DevExtreme().TileView() .DataSource(Model) .ItemTemplate(@<text> <div class="image" style="background-image: url(<%- ImageSrc %>)"></div> </text>) )
using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class TileViewController : Controller { public ActionResult Basics() { return View(SampleData.TileViewItems); } } }
using System.Text.Json.Serialization; namespace DevExtreme.MVC.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; using System.Collections.Generic; using System.Linq; using System.Web; namespace DevExtreme.MVC.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 = "../../Content/Images/Gallery/1.jpg" }, new TileViewItem { ID = 2, Address = "328 S Kerema Ave", City = "Milford", State = "CT", Price = 350000, ImageSrc = "../../Content/Images/Gallery/3.jpg" }, new TileViewItem { ID = 3, Address = "8512 Tanglewood Cir", City = "Reform", State = "AL", Price = 250000, ImageSrc = "../../Content/Images/Gallery/6.jpg", WidthRatio = 2 }, new TileViewItem { ID = 4, Address = "6351 Forrest St", City = "Jersey City", State = "NJ", Price = 320000, ImageSrc = "../../Content/Images/Gallery/14.jpg" }, new TileViewItem { ID = 5, Address = "61207 16th St N", City = "Moorhead", State = "MN", Price = 1700000, ImageSrc = "../../Content/Images/Gallery/5.jpg", HeightRatio = 2, WidthRatio = 2 }, new TileViewItem { ID = 6, Address = "5119 Beryl Dr", City = "San Antonio", State = "TX", Price = 455000, ImageSrc = "../../Content/Images/Gallery/4.jpg" }, new TileViewItem { ID = 7, Address = "7121 Bailey St", City = "Worcester", State = "MA", Price = 555000, ImageSrc = "../../Content/Images/Gallery/7.jpg" }, new TileViewItem { ID = 8, Address = "82649 Topeka St", City = "Riverbank", State = "CA", Price = 1750000, ImageSrc = "../../Content/Images/Gallery/2.jpg", HeightRatio = 2 }, new TileViewItem { ID = 9, Address = "7700 Elmwood Dr", City = "Cleveland", State = "OK", Price = 470000, ImageSrc = "../../Content/Images/Gallery/17.jpg", HeightRatio = 2, WidthRatio = 2 }, new TileViewItem { ID = 10, Address = "620201 Plymouth Rd", City = "Detroit", State = "MI", Price = 610000, ImageSrc = "../../Content/Images/Gallery/8.jpg" }, new TileViewItem { ID = 11, Address = "1198 Theresa Cir", City = "Whitinsville", State = "MA", Price = 320000, ImageSrc = "../../Content/Images/Gallery/9.jpg" }, new TileViewItem { ID = 12, Address = "4815 Warbler Ln", City = "Rockport", State = "TX", Price = 700000, ImageSrc = "../../Content/Images/Gallery/12.jpg" }, new TileViewItem { ID = 13, Address = "420234 Rogge St", City = "Detroit", State = "MI", Price = 320000, ImageSrc = "../../Content/Images/Gallery/23.jpg" }, new TileViewItem { ID = 14, Address = "114840 Interlake Ave N", City = "Seattle", State = "WA", Price = 400000, ImageSrc = "../../Content/Images/Gallery/22.jpg" }, new TileViewItem { ID = 15, Address = "13673 Pearl Dr #7", City = "Monroe", State = "MI", Price = 399000, ImageSrc = "../../Content/Images/Gallery/20.jpg" }, new TileViewItem { ID = 16, Address = "15447 Via Viento", City = "Atascadero", State = "CA", Price = 1100000, ImageSrc = "../../Content/Images/Gallery/21.jpg" } }; } }
.dx-tile-content .image { height: 100%; width: 100%; background-position: center; background-size: cover; display: block; }