Make TileLayout Columns Responsive
Environment
| Product | Progress® Kendo UI® TileLayout for jQuery |
Description
How can I Make the columns of the TileLayout widget responsive?
Solution
You can use the [setOptions()] method of the TileLayout to update its columns dynamically in the Window: resize event
<div id="tilelayout"></div>
<!-- container templates -->
<script id="barcelona" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/barcelona.jpg")" />
</script>
<script id="sofia" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/sofia.jpg")" />
</script>
<script id="rome" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/rome.jpg")" />
</script>
<script id="sa" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/south-africa.jpg")" />
</script>
<script id="sanfran" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/sanfran.jpg")" />
</script>
<script id="seaview" type="text/x-kendo-template">
<img class="k-card-media" draggable="false" src="https://demos.telerik.com/kendo-ui/content/web/cards/seaview-appartments.png")" />
</script>
<script>
$("#tilelayout").kendoTileLayout({
containers: [{
colSpan: 1,
rowSpan: 1,
header: {
text: "Barcelona"
},
bodyTemplate: kendo.template($("#barcelona").html())
}, {
colSpan: 1,
rowSpan: 1,
header: {
text: "Sofia"
},
bodyTemplate: kendo.template($("#sofia").html())
}, {
colSpan: 1,
rowSpan: 1,
header: {
text: "Rome"
},
bodyTemplate: kendo.template($("#rome").html())
}, {
colSpan: 1,
rowSpan: 1,
header: {
text: "South Africa"
},
bodyTemplate: kendo.template($("#sa").html())
}, {
colSpan: 1,
rowSpan: 1,
header: {
text: "San Francisco"
},
bodyTemplate: kendo.template($("#sanfran").html())
}, {
colSpan: 1,
rowSpan: 1,
header: {
text: "Sea View Apartments"
},
bodyTemplate: kendo.template($("#seaview").html())
}],
columns: 2,
columnsWidth: 385,
rowsHeight: 385,
});
$(document).ready(function () {
setTileLayoutColumnsCount();
});
$(window).on("resize", function () {
setTileLayoutColumnsCount();
});
function setTileLayoutColumnsCount() {
var tile = $("#tilelayout").data("kendoTileLayout");
if ($(window).width() <= 716) {
console.log(1)
tile.setOptions({
columns: 1
});
}
else {
console.log(2)
tile.setOptions({
columns: 2
});
}
}
</script>
<style>
.k-card-media {
width: 385px;
height: 290px;
}
</style>