I am using a couple buttons in the HeaderTemplate of the tiles. It looks like their click events are sometimes not honored due to a mix up with the draggable event of the tiles when they are reorderable. Please prevent the component from stopping the click event in the tile header.
---
ADMIN EDIT
---
As a workaround for the time being, you can stop the propagation of the container wrapping the clickable elements:
<!-- suppress-error allows the script tag to be in a Razor file -->
<script suppress-error="BL9992">
window.stopPropagation = (e) => {
e.stopPropagation();
}
</script>
<TelerikTileLayout Columns="3"
RowHeight="150px"
Resizable="true"
Reorderable="true">
<TileLayoutItems>
@{
foreach (var tile in Tiles)
{
<TileLayoutItem @key="@tile">
<HeaderTemplate>
<div class="d-flex flex-col w-100 justify-content-between">
<div class="d-flex flex-row w-75">
<div class="p-2"><strong>@tile.Title</strong></div>
</div>
<div onpointerdown="stopPropagation(event)"
class="d-flex flex-row w-25 justify-content-end">
<TelerikButton Icon="edit" Title="Edit Tile" Class="k-flat"
OnClick="@(()=>EditTile(tile))">
</TelerikButton>
<TelerikButton Icon="close" Title="Delete Tile" Class="k-flat"
OnClick="@(()=>DeleteTile(tile))">
</TelerikButton>
</div>
</div>
</HeaderTemplate>
<Content>@tile.Content</Content>
</TileLayoutItem>
}
}
</TileLayoutItems>
</TelerikTileLayout>
Event log: <TelerikButton Icon="clear" OnClick="@ClearLog">Clear Log</TelerikButton>
@if (EventLog != null)
{
<ul>
@foreach (string log in EventLog)
{
<li>
@log
</li>
}
</ul>
}
@code {
private List<TileData> Tiles { get; set; }
List<string> EventLog { get; set; } = new List<string>();
async void EditTile(TileData tile)
{
EventLog.Add("Edit fired for " + tile.Title);
}
async void DeleteTile(TileData tile)
{
EventLog.Add("Delete fired for " + tile.Title);
}
void ClearLog()
{
EventLog = new List<string>();
}
protected override void OnInitialized()
{
Tiles = new List<TileData>()
{
new TileData { Title = "Tile 1", Content = "1 - Lorem Ipsum" },
new TileData { Title = "Tile 2", Content = "2 - Lorem Ipsum" },
new TileData { Title = "Tile 3", Content = "3 - Lorem Ipsum" },
new TileData { Title = "Tile 4", Content = "4 - Lorem Ipsum" },
new TileData { Title = "Tile 5", Content = "5 - Lorem Ipsum" },
new TileData { Title = "Tile 6", Content = "6 - Lorem Ipsum" },
};
base.OnInitialized();
}
public partial class TileData
{
public string Title { get; set; }
public string Content { get; set; }
}
}
I am trying to resize a TextBox inside of a TileLayoutItem on resize of the tile. I have the resize handler implemented, and is accurately firing. However, I am not seeing the ColSpan actually change on the item, which would give me a point of reference to resize the textbox.
void OnResizeHandler(TileLayoutResizeEventArgs args)
{
if (args.Id == "commentTile")
{
if (CommentLI.ColSpan==1)
{
CommentWidth = "270px";
}
else
{
CommentWidth = (270 + (300 * (CommentLI.ColSpan - 1))).ToString() + "px";
}
}
}
Hey all, I just tried the big upgrade (VS 2020, .Net 6). During it, I moved from Telerik UI for Blazor 2.30. I've invested a lot of time into using this component and it came out as a non-starter in this release. After digging for a couple hours, I just kept it simple (see code).
Any time you put an @ inside a TileLayoutItem, it breaks - just freezes everything. So I can't tell you where it is coming from, but I can tell you it doesn't work. To reproduce, see the following code, but basically use "@someObject" as the value of an attribute of TileLayoutItem or inside Content/HeaderTemplate.
My use case is more complicated and I'm waiting for a mid-December pre-release (see ticket 1543513), but here's a way to reproduce (I hope)
Example:
<TelerikTileLayout Reorderable="true"
Resizable="true"
>
<TileLayoutItems>
@foreach (string name in Names)
{
<TileLayoutItem Class="builder">
<Content>@name</Content>
</TileLayoutItem>
}
</TileLayoutItems>
</TelerikTileLayout>
@code {
public List<string> Names { get; set; } = new List<string> { "Sara", "Dan", "Frank", "Deuce" };
}
I want to dynamically change the TileLayout Reorderable parameter but the component does not react to that change. Dynamic change in the Resizable parameter is also not applied.
I am also trying to change the TileLayoutItem ColSpan dynamically - for example, when implementing it in a responsive layout (https://docs.telerik.com/blazor-ui/knowledge-base/tilelayout-responsive) but using a variable as the ColSpan value does nothing. The TileLayout does not react to a change in the ColSpan parameter either.
It would be nice if the TelerikTileLayout could be told to refresh itself or to refresh after some of its parameters is changed.
When using my own buttons in the header template, and I have Reorderable=true, the tile layout consumes mouse events and clicks on my buttons don't always work. I would like to have the tile layout provide command buttons that can work in this scenario that let me handle their clicks reliably.
The functionality I am after is closing an minimizing tiles, so built-in actions for that like with the window would be nice. Perhaps tile items could get a Visible parameter like the grid columns and that could also go in their state.
Goto demo page
https://demos.telerik.com/blazor-ui/tilelayout/overview
Try to change tile's order or size.
Nothings happened.