Item 3rd Party Engine Template
Documentation
The TileView widget supports 3rd-party template engines, such as Underscore used in this example. A custom template is defined as a script in the index.html file. To enforce the use of the Underscore template engine, the DevExpress.ui.setTemplateEngine() method is called with «underscore» passed as a parameter.
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!
We appreciate your feedback.
We appreciate your feedback.
jQuery
$(function(){
DevExpress.ui.setTemplateEngine("underscore");
$("#tileview").dxTileView({
items: homes,
height: 390,
baseItemHeight: 120,
baseItemWidth: 185,
itemMargin: 10,
itemTemplate: $("#home-template")
});
});
<!DOCTYPE html>
<html>
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.1.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/19.1.5/js/dx.all.js"></script>
<script src="js/underscore-1.5.1.min.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="tileview"></div>
<script type="text/html" id="home-template">
<div class="price"><%= Globalize.formatCurrency(Price, "USD", { maximumFractionDigits: 0 }) %> </div>
<div class="image" style="background-image: url('<%= ImageSrc %>')"></div>
</script>
</div>
</body>
</html>
.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;
}
.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;
}
var homes = [{
ID: "1",
Address: "652 Avonwick Gate",
City: "Toronto",
State: "ON",
Price: 780000,
ImageSrc: "../../../../images/gallery/1.jpg"
}, {
ID: "2",
Address: "328 S Kerema Ave",
City: "Milford",
State: "CT",
Price: 350000,
ImageSrc: "../../../../images/gallery/3.jpg"
}, {
ID: "3",
Address: "8512 Tanglewood Cir",
City: "Reform",
State: "AL",
Price: 250000,
ImageSrc: "../../../../images/gallery/6.jpg",
widthRatio: 2
}, {
ID: "4",
Address: "6351 Forrest St",
City: "Jersey City",
State: "NJ",
Price: 320000,
ImageSrc: "../../../../images/gallery/14.jpg"
}, {
ID: "5",
Address: "61207 16th St N",
City: "Moorhead",
State: "MN",
Price: 1700000,
ImageSrc: "../../../../images/gallery/5.jpg",
heightRatio: 2,
widthRatio: 2
}, {
ID: "6",
Address: "5119 Beryl Dr",
City: "San Antonio",
State: "TX",
Price: 455000,
ImageSrc: "../../../../images/gallery/4.jpg",
}, {
ID: "7",
Address: "7121 Bailey St",
City: "Worcester",
State: "MA",
Price: 555000,
ImageSrc: "../../../../images/gallery/7.jpg",
}, {
ID: "8",
Address: "82649 Topeka St",
City: "Riverbank",
State: "CA",
Price: 1750000,
ImageSrc: "../../../../images/gallery/2.jpg",
heightRatio: 2
}, {
ID: "9",
Address: "7700 Elmwood Dr",
City: "Cleveland",
State: "OK",
Price: 470000,
ImageSrc: "../../../../images/gallery/17.jpg",
heightRatio: 2,
widthRatio: 2
}, {
ID: "10",
Address: "620201 Plymouth Rd",
City: "Detroit",
State: "MI",
Price: 610000,
ImageSrc: "../../../../images/gallery/8.jpg"
}, {
ID: "11",
Address: "1198 Theresa Cir",
City: "Whitinsville",
State: "MA",
Price: 320000,
ImageSrc: "../../../../images/gallery/9.jpg"
}, {
ID: "12",
Address: "4815 Warbler Ln",
City: "Rockport",
State: "TX",
Price: 700000,
ImageSrc: "../../../../images/gallery/12.jpg"
}, {
ID: "13",
Address: "420234 Rogge St",
City: "Detroit",
State: "MI",
Price: 320000,
ImageSrc: "../../../../images/gallery/23.jpg"
}, {
ID: "14",
Address: "114840 Interlake Ave N",
City: "Seattle",
State: "WA",
Price: 400000,
ImageSrc: "../../../../images/gallery/22.jpg"
}, {
ID: "15",
Address: "13673 Pearl Dr #7",
City: "Monroe",
State: "MI",
Price: 399000,
ImageSrc: "../../../../images/gallery/20.jpg"
}, {
ID: "16",
Address: "15447 Via Viento",
City: "Atascadero",
State: "CA",
Price: 1100000,
ImageSrc: "../../../../images/gallery/21.jpg"
}];