Declined
Last Updated: 20 Mar 2022 09:29 by ADMIN
Joshua
Created on: 16 Mar 2022 14:57
Category: UI for Blazor
Type: Feature Request
1
TileLayoutItem AutoSizeRow and AutoSizeColumn

Hello,

I would love to see an auto sizing for a TileLayoutItem. Specifically, in my case, the RowSpan. I feel like this would make a great addition as a parameter in the future as (also AutoSizeColumn would be nice)

<TileLayoutItem AutoSizeRow="true"></TileLayoutItem>

I am working on an application that has dynamic data displayed within the TileLayoutItem. In my current implementation, I'm going through a process of attempting to calculate for resizing the RowSpan. The calculations are based on an inner body div that holds an id, finds the parent k-tilelayout-item and then the the k-tilelayout itself. I can't positively say my math is perfect but it (mostly) gets the job done. Keeping in mind that I have created other altered other areas of the TileLayout as well, specifically setting the TelerikTileLayout grid to autofit.

For an idea of what I am currently doing as a means of possibly finding a (better) way to implement this in the future, this is the long ugly javascript code I have that is used to gather a minimum size and return it to blazor via JsInterop.

function (tileId, minSpanSize = 4) {
        try {
            var el = document.getElementById(tileId);
            var tileLayout = $(el).closest(".k-tilelayout")[0];
            var parentTile = $(el).closest(".k-tilelayout-item")[0];

            var headerHeight = $(el).parent().siblings(".k-tilelayout-item-header")[0].offsetHeight;

            var parentSpan = parseInt(parentTile.style.gridRowEnd.split("span ")[1]);
            var gap = parseInt(tileLayout.style.gap.replace("px", ""));
            var rowHeight = parseInt(tileLayout.style.gridAutoRows.split(",")[1].split("px")[0]);

            // cannot recall where I got 1.25 from
            var minSize = Math.ceil((headerHeight + el.offsetHeight) / ((gap / 1.25) + rowHeight));

            // if parent is less than minsize
            if (parentSpan < minSize) {
                parentTile.style.gridRowEnd = "span " + minSize;
                return { id: tileId, minSize: minSize };

                // Otherwise, if min size is greater than or equal to minSpanSie
            } else if (minSize >= minSpanSize) {
                parentTile.style.gridRowEnd = "span " + minSize;
                return { id: tileId, minSize: minSize };
            }

        } catch { }
        return { id: tileId, minSize: -1 };
    
1 comment
ADMIN
Marin Bratanov
Posted on: 20 Mar 2022 09:29

Hi Joshua,

The tiles are supposed to create a layout by setting a certain size, and having them take their size from their content contradicts that core principle (which is also at the core of the CSS grid layout the component steps on). If you have certain tiles that need to accommodate more content, you should increase their RowSpan and/or ColSpan value so they become larger, or increase/decrease the RowHeight and/or ColumnWidth.

Ultimately, the TileLayout component is a component that creates a layout, not one that obeys the content. Things can't really work both ways. For example, if you had a popup window that you wanted to size according to the content, you couldn't set size to the Window itself, as that would contradict the content size. You could achieve that with css auto dimensions because the Window is not a CSS Grid (so that's not applicable to the tile layout), or you could set its size per the content size programmatically when you calculate the content size. This is what you could with the tile layout.

So, an alternative you could consider is giving your users a bunch of Window components that can float around and can take their size from the content (if you don't set dimensions to them). Soon they will also become resizeable too.

With that said, I must mark this as "declined" because it does not fit the concept of the tile layout component.

I must also note that setting attributes on DOM elements via JS is not safe in Blazor as those can get wiped by a Blazor re-render if they are not matched in the C# code as well.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.