Responsive TileLayout configuration?

[Nick]

I'm using the .NET Core HTMLHelper to instantiate an instance of the tile layout, the problem I'm running into is that the tile widths just shrink instead of reacting like a flex where the cards will stack as the layout gets narrower. Is there a way to do this either via javascript or CSS?

Code:

01.@(Html.Kendo().TileLayout()
02.        .Name("StatsTiles")
03.        .Columns(4)
04.        .Containers(c =>
05.        {
06.            c.Add()
07.                .Header(h => h.TemplateId("header-0"))
08.                .BodyTemplateId("container-0")
09.                .RowSpan(3);
10.            c.Add()
11.                .Header(h => h.TemplateId("header-1"))
12.                .BodyTemplateId("container-1");
13.            c.Add()
14.                .Header(h => h.TemplateId("header-2"))
15.                .BodyTemplateId("container-2")
16.                .RowSpan(3);
17.            c.Add()
18.                .Header(h => h.TemplateId("header-3"))
19.                .BodyTemplateId("container-3")
20.                .RowSpan(3);
21.            c.Add()
22.                .Header(h => h.TemplateId("header-4"))
23.                .BodyTemplateId("container-4");
24.            c.Add()
25.                .Header(h => h.TemplateId("header-5"))
26.                .BodyTemplateId("container-5");
27.            c.Add()
28.                .Header(h => h.TemplateId("header-6"))
29.                .BodyTemplateId("container-6")
30.                .ColSpan(4);
31.        })
32.        .RowsHeight("100")
33.    )

 

I would like to resize the height and width of all of the containers so that at certain breakpoints the Layout changes it's grid setting. Currently it seems that the grid CSS is all being placed inline, so you can't overwrite that with a media query in the CSS. I've also tried using a jQuery function on window resize to set the options of the tile layout, but the layout doesn't change and some of the content within the containers disappears.

Window resize code:

01.$(window).resize(function () {
02.    if ($(window).width() <= 767.98) {
03.        var statTiles = $('#StatsTiles').getKendoTileLayout();
04.        var containers = statTiles.options.containers;
05.
06.        for (var i = 0; i < containers.length; i++) {
07.            containers[i].colSpan = 1;
08.            containers[i].rowSpan = 1;
09.
10.            if (i  == 0 || i == 2 || i == 3 || i == 6)) {
11.                containers[i].height = 300;
12.            } else {
13.                containers[i].height = 100;
14.            }
15.        }
16.
17.        statTiles.setOptions({
18.            containers: containers,
19.            columns: 1
20.        });
21.    }
22.});

 

Thanks in advance,

Nick

[Tsvetomir]

Hi Nick,

Thank you for the provided information and code snippets.

Indeed, we have already received such feature requests and I encourage you to cast your vote in any (or both) of the items below. The higher the demand, the greater the chance the features to be implemented:

• https://feedback.telerik.com/kendo-jquery-ui/1509029-tilelayout-responsiveness
• https://feedback.telerik.com/kendo-jquery-ui/1497744-resizing-for-tilelayout-on-mobile

In the first item, there is a workaround provided, whereas, you could review the suggestion outlined by Preslav in the thread below:

https://www.telerik.com/forums/responsive-layout

I hope you find those resources helpful.

 

Kind regards,
Tsvetomir
Progress Telerik