Duplicated
Last Updated: 03 May 2022 11:40 by ADMIN

Hi,

We would like to request a feature wherein we can drag the tile on empty spaces and triggers the reordering of tiles. To make it some kind of docking feature on the TileLayout.

So far the workaround we see to put the tiles on those empty spaces is when you drag the tile in between tiles (between conversion rate and page views tiles) and if you drag it again on the same row it will reorder fine. Another one is to drag the tile on another tile (drag into most viewed pages tile) it will reorder the dragged tile on that empty space beside the existing tile.

https://demos.telerik.com/blazor-ui/tilelayout/overview

Here's a sample of what we did:

Declined
Last Updated: 21 Apr 2022 11:56 by ADMIN
Created by: Adrian
Comments: 3
Category: TileLayout
Type: Feature Request
3

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.

Unplanned
Last Updated: 14 Feb 2022 12:41 by Paul Bursch

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

    }
}

 

Unplanned
Last Updated: 31 Jan 2022 09:16 by ADMIN
Created by: Matt
Comments: 1
Category: TileLayout
Type: Feature Request
0

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

Duplicated
Last Updated: 27 Dec 2021 17:24 by Arash
Created by: Dan
Comments: 2
Category: TileLayout
Type: Bug Report
3

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

Completed
Last Updated: 23 Dec 2021 13:26 by ADMIN
Release 3.0.0
I need to execute certain logic only for the particular tile that resized, and at the moment the OnResized event fires for any tile that gets resized. Ideally, a Tag or some similar Parameter on the individual tiles can be set and I could receive it in the OnResized handler to know which tile to target.
Completed
Last Updated: 15 Dec 2021 08:30 by ADMIN
Release 3.0.0
Creating the TileLayoutItems in a loop results in an infinite loop. If you manually define the TileLayoutItems (and remove the loop) it would work as expected.
Completed
Last Updated: 24 Nov 2021 12:17 by ADMIN
Release 2.30.0

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.

Unplanned
Last Updated: 08 Nov 2021 20:41 by ADMIN

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.

Duplicated
Last Updated: 19 Sep 2021 13:56 by ADMIN
Created by: Brian
Comments: 1
Category: TileLayout
Type: Feature Request
6
I want to change the Reordable and Resizable parameters at runtime. However, when updating the reorder/resize parameters, the component is re-rendered, enabling the cursors for resize and drag/drop but no functionality.
Need More Info
Last Updated: 23 Aug 2021 08:56 by ADMIN
Created by: Ian
Comments: 3
Category: TileLayout
Type: Feature Request
1

Here is the scenario I would like to implement:

User has a default dashboard, with Customise functionality which would:

  • Allow the user to move and resize items (same as now)
  • Add / remove item, adding using a drag and drop function from a set of tile types, for example exposed in a TelerikList component. Removing an item with a "delete" button or similar.
  • Customise tiles, for example a time period on a chart.
  • Save the state of the dashboard.

For loading and saving the dashboard with each tile having a specific content the easiest way I can see would be to bind the TelerikTileLayout to a data source:

<TelerikTileLayout Data="@TileData">

<TileConfiguration></TileConfiguration>

</TelerikTileLayout>

The data would be updated as and when the user configures their dashboard. 

For dragging and dropping new tiles a set of events would be necessary, both on the source tile list, e.g. OnDragBegin and on the tile layout OnDrop.

Unplanned
Last Updated: 10 Aug 2021 20:06 by ADMIN
Created by: Jörg
Comments: 2
Category: TileLayout
Type: Feature Request
18
I would like to use a Visible parameter for the TileLayoutItem
Completed
Last Updated: 03 Jul 2021 07:16 by ADMIN
Release 2.26.0
Using moblie Safari iOS or Chrome Android.
Goto demo page
https://demos.telerik.com/blazor-ui/tilelayout/overview
Try to change tile's order or size.
Nothings happened.
Unplanned
Last Updated: 05 Mar 2021 11:37 by ADMIN

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>

---

Completed
Last Updated: 05 Jan 2021 10:18 by ADMIN
Release 2.21.0
Created by: Marcel
Comments: 0
Category: TileLayout
Type: Bug Report
1
I would like to be able to change the state of the component in the OnResize and OnReorder event handlers
Unplanned
Last Updated: 23 Dec 2020 10:40 by ADMIN
I am using the TileLayout and inside the content of the TileLayoutItem I have a TelerikChart with its height parameter is set to 100%. When I resize the Tile vertically the chart does not pre-render accordingly despite using the Refresh method of its reference.