It would be nice of the TileLayout component was fully responsive out of the box (and still keep the reordering/resizing features).
Maybe by allowing the configuration for the number of columns to change based on media breakpoints...
Thank you.
Hi Marcos,
Thank you for sharing your ideas.
Indeed, at present, the TileLayout enhances a CSS grid, when the window is resized, the grid and columns in it do not change as they do with a flex grid at the moment. The tiles will always strive to go to the next available slot as if pulled by the top left corner.
To achieve a more or less columns (tiles dropping on the next line) behaviour at present, you can add a window resize event handler and use the setOptions() method to change the number of columns. However, any controls that are inside, will need to be reinitialized:
$(window).on("resize", function () {
kendo.resize($(".k-chart"));
var tileLayout = $("#tilelayout").data("kendoTileLayout");
var windowWidth = $(window).width();
if(windowWidth < 600){
tileLayout.setOptions({
columns:2
});
initTileLayoutControls();
} else {
tileLayout.setOptions({
columns:4
});
initTileLayoutControls();
}
});
Kind regards,
Tsvetomir
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.