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

    }
}