<h4>TileLayout:</h4>

<TelerikTileLayout Columns="1" RowHeight="340px">
    <TileLayoutItems>

        <TileLayoutItem ColSpan="1" RowSpan="1">
            <HeaderTemplate>
                <span>With fix (.k-tilelayout-item.k-card) - header stays stable on click</span>
            </HeaderTemplate>
            <Content>
                <p>Last clicked: <strong>@_lastClicked</strong></p>
                <TelerikChart Width="100%" OnSeriesClick="@OnSeriesClick">
                    <ChartSeriesItems>
                        <ChartSeries Type="ChartSeriesType.Donut"
                                     Data="@_chartData"
                                     Field="@nameof(SliceData.Value)"
                                     CategoryField="@nameof(SliceData.Label)"
                                     ColorField="@nameof(SliceData.Color)">
                        </ChartSeries>
                    </ChartSeriesItems>
                    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>
                </TelerikChart>
            </Content>
        </TileLayoutItem>

    </TileLayoutItems>
</TelerikTileLayout>

@code {
    private string _lastClicked = "none";

    private List<SliceData> _chartData = new()
    {
        new SliceData { Label = "Confirmed", Value = 42, Color = "#4CAF50" },
        new SliceData { Label = "Pending",   Value = 28, Color = "#FF9800" },
        new SliceData { Label = "Inactive",  Value = 30, Color = "#F44336" }
    };

    private void OnSeriesClick(ChartSeriesClickEventArgs args)
    {
        _lastClicked = args.Category?.ToString() ?? "unknown";
    }

    private class SliceData
    {
        public string Label { get; set; } = "";
        public double Value { get; set; }
        public string Color { get; set; } = "";
    }
}

<style>
    .k-tilelayout-item.k-card {
        overflow: scroll;
    }
</style>