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>
### 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 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.
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";
}
}
}
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.
When in a div with display:flex, I cannot resize the tiles to the right as I expect to - they stop resizing before I reach the end of the tile layout.
---
ADMIN EDIT
Here is a sample you can use to observe the issue - try resizing the tiles and change the size of the layout offset. For cleanest results do this in a blank app that has absolutely no other styles (so no other layout is in play).
A short gif is attached at the end of this post that shows the problem.
<TelerikNumericTextBox @bind-Value="@width" Step="20" Min="0" Max="800"></TelerikNumericTextBox>
@code{
int width { get; set; } = 200;
}
<div style="display:flex; flex-direction: row;">
<div style="width: @(width)px; background: yellow;">
some content on the left. When this is here, resizing tiles cannot use the full width of the tile layout
- it stops short with the offset by this element due to the flex layout.
Change the width of this element to see the effect - as you increase you will stop being
able to resize 1column tiles at all. If you decrease, eventually you will be.
</div>
<div style="position: relative; display: block;"> @* THE WORKAROUND - REMOVE TO SEE THE PROBLEM *@
<TelerikTileLayout ColumnWidth="200px"
RowHeight="150px"
Width="700px"
Columns="3"
Resizable="true">
<TileLayoutItems>
<TileLayoutItem HeaderText="Panel 1">
<Content>Regular sized first panel.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Panel 2">
<Content>You can put components in the tiles too.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Panel 3" RowSpan="3">
<Content>This tile is three rows tall.</Content>
</TileLayoutItem>
<TileLayoutItem HeaderText="Panel 4" RowSpan="2" ColSpan="2">
<Content>This tile is two rows tall and two columns wide</Content>
</TileLayoutItem>
</TileLayoutItems>
</TelerikTileLayout>
</div>
</div>---