This is a migrated thread and some comments may be shown as answers.

Responsive TileLayout configuration?

1 Answer 17 Views
TileLayout
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 12 Mar 2021, 03:13 PM

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

1 Answer, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 17 Mar 2021, 12:02 PM

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:

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

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

Tags
TileLayout
Asked by
Nick
Top achievements
Rank 1
Answers by
Tsvetomir
Telerik team
Share this question
or