<TelerikGrid Data="categories" Pageable="true" PageSize="5" Class="custom-nested-grid">
    <DetailTemplate Context="categoryItem">
        @{
            var category = categoryItem as CategoryModel;
            <TelerikGrid Data="category.SubItems" Pageable="true" PageSize="3" Class="nested-grid">
                <DetailTemplate Context="subItem">
                    @{
                        var nestedItem = subItem as SubItemModel;
                        <TelerikGrid Data="nestedItem.NestedItems" Pageable="true" PageSize="3" Class="nested-grid">
                            <DetailTemplate Context="nestedSubItem">
                                @{
                                    // Add a fourth level of nesting here if needed
                                }
                            </DetailTemplate>
                            <GridColumns>
                                <GridColumn Field="Code" Title="Code"></GridColumn>
                                <GridColumn Field="Name" Title="Name"></GridColumn>
                                <GridColumn Field="Description" Title="Description"></GridColumn>
                                <GridColumn Field="ItemType" Title="Item Type"></GridColumn>
                                <GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
                            </GridColumns>
                        </TelerikGrid>
                    }
                </DetailTemplate>
                <GridColumns>
                    <GridColumn Field="Code" Title="Code"></GridColumn>
                    <GridColumn Field="Name" Title="Name"></GridColumn>
                    <GridColumn Field="Description" Title="Description"></GridColumn>
                    <GridColumn Field="ItemType" Title="Item Type"></GridColumn>
                    <GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
                </GridColumns>
            </TelerikGrid>
        }
    </DetailTemplate>
    <GridColumns>
        <GridColumn Field="Code" Title="Code"></GridColumn>
        <GridColumn Field="Name" Title="Name"></GridColumn>
        <GridColumn Field="Description" Title="Description"></GridColumn>
        <GridColumn Field="ItemType" Title="Item Type"></GridColumn>
        <GridColumn Field="LinkedCategories" Title="Linked Categories"></GridColumn>
    </GridColumns>
</TelerikGrid>

@code {
    // Sample data model classes
    public class CategoryModel
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string ItemType { get; set; }
        public string LinkedCategories { get; set; }
        public List<SubItemModel> SubItems { get; set; }
    }

    public class SubItemModel
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string ItemType { get; set; }
        public string LinkedCategories { get; set; }
        public List<NestedItemModel> NestedItems { get; set; }
    }

    public class NestedItemModel
    {
        public string Code { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public string ItemType { get; set; }
        public string LinkedCategories { get; set; }

        // Add this property to support further nesting
        public List<NestedItemModel> NestedItems { get; set; } = new List<NestedItemModel>();
    }


    private List<CategoryModel> categories = new List<CategoryModel>
{
    new CategoryModel
    {
        Code = "C-1", Name = "Ram Pro Master 2500", Description = "Ambulance parts for ram pro master 2500", ItemType = "Parts", LinkedCategories = "8 Linked categories",
        SubItems = new List<SubItemModel>
        {
            new SubItemModel
            {
                Code = "C-134", Name = "Electronic Control Unit", Description = "Electric parts for ram pro master 3500", ItemType = "-", LinkedCategories = "4 Linked categories",
                NestedItems = new List<NestedItemModel>
                {
                    new NestedItemModel
                    {
                        Code = "N-1", Name = "Subcomponent A", Description = "Details for subcomponent A", ItemType = "Electronic", LinkedCategories = "2 Linked categories",
                        // Next level of data
                        NestedItems = new List<NestedItemModel>
                        {
                            new NestedItemModel { Code = "L-1", Name = "Detail A1", Description = "Details of A1", ItemType = "Part", LinkedCategories = "-",
NestedItems = new List<NestedItemModel>
                        {
                            new NestedItemModel { Code = "L-1", Name = "Detail A1", Description = "Details of A1", ItemType = "Part", LinkedCategories = "-" },
                            new NestedItemModel { Code = "L-2", Name = "Detail A2", Description = "Details of A2", ItemType = "Part", LinkedCategories = "Linked" }
                        }
                            },
                            new NestedItemModel { Code = "L-2", Name = "Detail A2", Description = "Details of A2", ItemType = "Part", LinkedCategories = "Linked" }
                        }
                    },
                    new NestedItemModel
                    {
                        Code = "N-2", Name = "Subcomponent B", Description = "Details for subcomponent B", ItemType = "Electronic", LinkedCategories = "1 Linked category",
                        NestedItems = new List<NestedItemModel>
                        {
                            new NestedItemModel { Code = "L-3", Name = "Detail B1", Description = "Details of B1", ItemType = "Part", LinkedCategories = "-" }
                        }
                    }
                }
            }
        }
    },
    new CategoryModel
    {
        Code = "C-2", Name = "Ram Pro Master 3500", Description = "Electric parts for ram pro master 3500", ItemType = "Parts", LinkedCategories = "5 Linked categories",
        SubItems = new List<SubItemModel>
        {
            new SubItemModel
            {
                Code = "C-672", Name = "Engine Control Unit", Description = "Engine module for control", ItemType = "-", LinkedCategories = "3 Linked categories",
                NestedItems = new List<NestedItemModel>
                {
                    new NestedItemModel
                    {
                        Code = "N-3", Name = "Engine Subcomponent A", Description = "Engine details A", ItemType = "Engine Part", LinkedCategories = "-",
                        NestedItems = new List<NestedItemModel>
                        {
                            new NestedItemModel { Code = "L-4", Name = "Detail C1", Description = "Details of C1", ItemType = "Control Unit", LinkedCategories = "-" },
                            new NestedItemModel { Code = "L-5", Name = "Detail C2", Description = "Details of C2", ItemType = "Control Unit", LinkedCategories = "Linked" }
                        }
                    }
                }
            }
        }
    }
};


    private void ApplyCategory(CategoryModel category)
    {
        Console.WriteLine($"Applying category: {category.Code}");
    }

    private void ApplySubItem(CategoryModel category, SubItemModel subItem)
    {
        Console.WriteLine($"Applying sub-item: {subItem.Code} under category: {category.Code}");
    }
private TelerikGrid<CategoryModel> gridRef;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("setHierarchyCellWidth", 130); // Set the desired width here
        }
    }
}

<script>
    window.setHierarchyCellWidth = function(width) {
    document.querySelectorAll(".k-hierarchy-cell").forEach(cell => {
        cell.style.width = width + "px";
        cell.style.minWidth = width + "px";
        cell.style.maxWidth = width + "px";
    });
}
</script>

<button type="submit" class="login100-form-btn" name="provider" value="@provider.Name"
									title="Log in using your @provider.DisplayName account">
								<TelerikSvgIcon Icon="@GetExternalIcon(provider.Name)" Size="@ThemeConstants.SvgIcon.Size.ExtraExtraLarge" Class="me-3" />
								Login using @provider.DisplayName
							</button>