Tile View - Directions

When direction is set to "horizontal" (default), TileView overflows content to the right (or to the left if rtlEnabled is true). When direction is "vertical", this component overflows content downwards.

Backend API

​x
 
@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>​

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

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-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;}​