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 };