Unplanned
Last Updated: 15 Feb 2021 16:19 by ADMIN
Marcos
Created on: 09 Feb 2021 08:54
Category: TileLayout
Type: Feature Request
2
Make the TileLayout Responsive

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.

 

1 comment
ADMIN
Tsvetomir
Posted on: 15 Feb 2021 16:19

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/.