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()
.ID("tileView")
.DataSource(Model)
.Height(390)
.BaseItemHeight(120)
.BaseItemWidth(185)
.ItemMargin(10)
.Direction(Orientation.Horizontal)
.ItemTemplate(@<text>
<div class="image" style="background-image: url(<%- ImageSrc %>)"></div>
</text>)
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
<span>Direction</span>
@(Html.DevExtreme().SelectBox()
.Items(new[] { "horizontal", "vertical" })
.Value("horizontal")
.InputAttr("aria-label", "Direction")
.OnValueChanged("onDirectionChanged")
)
</div>
</div>
<script>
function onDirectionChanged({ value }) {
const tileView = $("#tileView").dxTileView("instance");
tileView.option("direction", value);
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class TileViewController : Controller
{
public ActionResult Directions() {
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-selectbox {
max-width: 400px;
}
.dx-tile-content {
height: 100%;
}
.dx-tile-content .image {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
display: block;
}
.options {
padding: 20px;
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
}
.caption {
font-size: 18px;
font-weight: 500;
}
.option {
margin-top: 10px;
}
.option > span {
width: 70px;
display: inline-block;
}
.option > .dx-widget {
display: inline-block;
vertical-align: middle;
width: 100%;
max-width: 350px;
}