Your search did not match any results.

Tile View - Directions

By default, the TileView component is oriented horizontally, but you can orient it vertically using the direction property.

Backend API
@model IEnumerable<DevExtreme.NETCore.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.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; namespace DevExtreme.NETCore.Demos.Controllers { public class TileViewController : Controller { public ActionResult Directions() { 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-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; }