@page "/treegrid-test"
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.TreeGrid

<h1>TreeGrid Headings Test</h1>

<div class="content-wrapper">
    <SfTreeGrid DataSource="@TreeGridData" IdMapping="ID" ParentIdMapping="PID" TreeColumnIndex="1" AllowFiltering="true" AllowResizing="true" AllowTextWrap="true">
        <TreeGridEvents RowDataBound="OnRowDataBound" TValue="TreeItem"></TreeGridEvents>
        <TreeGridFilterSettings Mode="Syncfusion.Blazor.Grids.FilterBarMode.Immediate"></TreeGridFilterSettings>
        <TreeGridColumns>
            <TreeGridColumn Field="RID" HeaderText="RID" Width="20" TextAlign="TextAlign.Right" Format="0000"></TreeGridColumn>
            <TreeGridColumn Field="HID" HeaderText="ID" Width="40" TextAlign="TextAlign.Left"></TreeGridColumn>
            <TreeGridColumn Field="SText" HeaderText="Heading" Width="250">
            </TreeGridColumn>
        </TreeGridColumns>
    </SfTreeGrid>
</div>

@code {

    readonly int[] headingSize = { 20, 18, 16, 14 };
    readonly string[] headingColour = { "Green", "Red", "Blue", "Gray" };

    public class TreeItem
    {
        public int ID { get; set; }
        public int? PID { get; set; }
        public int? RID { get; set; }
        public string HID { get; set; }
        public string SText { get; set; }
        public int Level { get; set; }

    }


    List<TreeItem> TreeGridData = new List<TreeItem> {
    new TreeItem() {ID = 1, PID=null,RID=null,HID="1",Level = 1, SText="Heading Level 1"},
    new TreeItem() {ID = 2, PID = 1, RID = 1, HID = "1.1 A. b", Level = 2, SText = "Heading Level 2" },
    new TreeItem() {ID = 3, PID = 2, RID = 1, HID = "1.1.1", Level = 3, SText = "Heading Level 3" },
    new TreeItem() {ID = 4, PID = 3, RID = 3, HID = "1.1.1.1", Level = 4, SText = "Heading Level 4" }
    };

    private void OnRowDataBound(RowDataBoundEventArgs<TreeItem> args)
    {
        args.Row.AddStyle(new[] { $"font-size:{headingSize[args.Data.Level - 1]}px" });
        args.Row.AddStyle(new[] { $"background-color:{headingColour[args.Data.Level - 1]}" });
    }

}

