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.
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 want to prevent an individual TileLayoutItem from being resized or reordered when Reorderable and Resizable are enabled on component level.
===
ADMIN EDIT:
Here is a possible workaround - prevent pointer events for the tile that should not be resized and reordered. Note that users may still be able to push the "disabled" tile to a new place by reordering the other tiles.
<TelerikTileLayout Columns="3"
RowHeight="150px"
Resizable="true"
Reorderable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>Regular-sized first tile.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>You can put components in the tiles too.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 3" RowSpan="3" Class="disabled-tile">
<Content>No resizing and no reordering</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
<Content>This tile is two rows tall and two columns wide</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
<style>
.disabled-tile {
pointer-events: none;
}
</style>
Hi,
Is there a way we could drag the tile on those empty spaces in the tile layout? I've tried the samples in your page and it seems reorderable only reorders the tiles. Is it possible to put an option that we might be able to drag those tiles to the empty spaces instead of dragging them to another tile to switch places? See attached file as reference on what I meant.
### Description
Add the option to constrain the RowSpan and ColSpan of individual tiles in the TileLayout.
### Specification (if feature)
Add options to the tiles such as MinColSpan, MaxColSpan, MinRowSpan, and MaxRowSpan.
In my scenario, the TileLayout has only one column, so the user can only reorder the tiles vertically. For example: https://blazorrepl.telerik.com/mpYQGSbu17n4iUaE11.
Based on the current behavior, for example, to drag tile 1 under tile 2, you must drag the tile to one of the following zones to free up space on which you can drop the tile:
- After the middle on the right of the tile you want to drop over
- After the whole tile
The zones in question are marked in red here:
When the TileLayout has only one column, I think it would be more intuitive if one can drag a tile to the vertical middle of the tile you want to replace and then the space is freed up. The suggested zone is marked with green here:
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";
}
}
}
When the TileLayout keyboard navigation is enabled, users can tab from one tile to another. However, the tab order becomes incorrect after tile reordering. The tab order always matches the DOM element order, but it no longer matches the visual tile order in the UI.
For example:
- Reorder tiles 1 and 2.
- Click (focus) tile 2, which is now the first one.
- Tab. Instead of focusing tile 1 (which is now the second one), you will focus tile 3.
<TelerikTileLayout Columns="3"
RowHeight="150px"
Resizable="true"
Reorderable="true"
Navigable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Tile 1">
<Content>Regular-sized first tile.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 2">
<Content>You can put components in the tiles too.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 3" RowSpan="3">
<Content>This tile is three rows tall.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Tile 4" RowSpan="2" ColSpan="2">
<Content>This tile is two rows tall and two columns wide</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
In TelerikTileLayout the TileLayoutItem have the possibility to have have a HeaderText or even a HeaderTemplate, and behave as a TelerikCard, only without a footer.
Having the possibility to have a FooterTemplate would grant a better managment of the layout.