@inject IJSRuntime js

<style>
    .my-treeview {
        width: 40%;
    }
</style>

<TelerikTreeView Data="@FlatData" Class="my-treeview"
                 @bind-ExpandedItems="@ExpandedItems"
                 @bind-SelectedItems="@SelectedItems"
                 SelectionMode="@TreeViewSelectionMode.Single" />

<script suppress-error="BL9992">
    var dotNet;

    function attachTreeViewBlur(dotNetReference) {
        var treeView = document.querySelector(".k-treeview");
        if (treeView) {
            treeView.addEventListener("focusout", onTreeViewBlur);
        }
        dotNet = dotNetReference;
    }

    function onTreeViewBlur(e) {
        setTimeout(function () {
            if (!document.activeElement || !document.activeElement.closest(".k-treeview")) {
                dotNet.invokeMethodAsync("CollapseAll");
            }
        }, 1);
    }
</script>

@code {
    public IEnumerable<TreeItem> FlatData { get; set; }
    public IEnumerable<object> ExpandedItems { get; set; } = new List<TreeItem>();
    public IEnumerable<object> SelectedItems { get; set; } = new List<TreeItem>();
    Random rnd { get; set; } = new Random();

    private DotNetObjectReference<Index>? DotNetRef;

    [JSInvokable("CollapseAll")]
    public async Task CollapseAll()
    {
        ExpandedItems = new List<TreeItem>();
        SelectedItems = new List<TreeItem>();
        StateHasChanged();
    }

    public void Dispose()
    {
        DotNetRef?.Dispose();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1);
            await js.InvokeVoidAsync("attachTreeViewBlur", DotNetRef);
        }
        await base.OnAfterRenderAsync(firstRender);
    }

    protected override void OnInitialized()
    {
        FlatData = LoadFlat();
        ExpandedItems = FlatData.Where(x => x.HasChildren == true);
        DotNetRef = DotNetObjectReference.Create(this);
    }

    int TreeLevels { get; set; } = 3;
    int ItemsPerLevel { get; set; } = 3;
    int IdCounter { get; set; } = 1;
    List<TreeItem> LoadFlat()
    {
        List<TreeItem> items = new List<TreeItem>();
        PopulateTreeItems(items, null, 1);
        return items;
    }
    void PopulateTreeItems(List<TreeItem> items, int? parentId, int level)
    {
        for (int i = 1; i <= ItemsPerLevel; i++)
        {
            var itemId = IdCounter++;
            items.Add(new TreeItem()
                {
                    Id = itemId,
                    Text = $"Level {level} Item {i} Id {itemId}",
                    ParentId = parentId,
                    HasChildren = level < TreeLevels
                });
            if (level < TreeLevels)
            {
                PopulateTreeItems(items, itemId, level + 1);
            }
        }
    }
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentId { get; set; }
        public bool HasChildren { get; set; }
    }
}