Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@model IEnumerable<DevExtreme.MVC.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.MVC.Demos.Models.SampleData;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class TileViewController : Controller
{
public ActionResult ItemTemplate() {
return View(SampleData.TileViewItems);
}
}
}
using Newtonsoft.Json;
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; }
[JsonProperty("heightRatio")]
public int? HeightRatio { get; set; }
[JsonProperty("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 {
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;
}