Blazor Tree Grid Multi-Column Headers Overview

Blazor Tree Grid의 Ignite UI for Blazor Multi-Column Headers 기능을 사용하면 공통된 다중 헤더 아래에 열을 배치하여 그룹화할 수 있습니다. IgbTreeGrid의 각 다중 열 헤더 그룹은 다른 그룹 또는 열 간의 조합을 나타낼 수 있습니다. 이 기능은 가로로 스크롤하는 것이 번거로울 수 있는 대규모 데이터 세트를 처리할 때 특히 유용합니다.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

Blazor Tree Grid Multi-Column Headers Example

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Obere Str. 57",
            Age = 55,
            City = @"Berlin",
            Country = @"Germany",
            Fax = @"030-0076545",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Phone = @"030-0074321",
            PostalCode = 12209,
            Title = @"Development Manager",
            LastName = @"Winchester",
            FullAddress = @"Obere Str. 57, Berlin, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Avda. de la Constitución 2222",
            Age = 42,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(51) 555-3745",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Phone = @"(5) 555-4729",
            PostalCode = 5021,
            Title = @"CEO",
            LastName = @"Sanders",
            FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Mataderos 2312",
            Age = 49,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(5) 555-3995",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Phone = @"(5) 555-3932",
            PostalCode = 5023,
            Title = @"Accounting Manager",
            LastName = @"Lincoln",
            FullAddress = @"Mataderos 2312, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"120 Hanover Sq.",
            Age = 61,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-6750",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Phone = @"(171) 555-7788",
            PostalCode = 39000,
            Title = @"Localization Manager",
            LastName = @"Wang",
            FullAddress = @"120 Hanover Sq., London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berguvsvägen 8",
            Age = 43,
            City = @"Luleå",
            Country = @"Sweden",
            Fax = @"0921-12 34 67",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Phone = @"0921-12 34 65",
            PostalCode = 29000,
            Title = @"Senior Software Developer",
            LastName = @"Burke",
            FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Forsterstr. 57",
            Age = 29,
            City = @"Mannheim",
            Country = @"Germany",
            Fax = @"0621-08924",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Phone = @"0621-08460",
            PostalCode = 68306,
            Title = @"Senior Software Developer",
            LastName = @"Anderson",
            FullAddress = @"Forsterstr. 57, Mannheim, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"24, place Kléber",
            Age = 31,
            City = @"Strasbourg",
            Country = @"France",
            Fax = @"88.60.15.32",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Phone = @"88.60.15.31",
            PostalCode = 67000,
            Title = @"Software Development Team Lead",
            LastName = @"Reyes",
            FullAddress = @"24, place Kléber, Strasbourg, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"C/ Araquil, 67",
            Age = 35,
            City = @"Madrid",
            Country = @"Spain",
            Fax = @"(911) 555 91 99",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Phone = @"(91) 555 22 82",
            PostalCode = 28023,
            Title = @"Senior Software Developer",
            LastName = @"Mendel",
            FullAddress = @"C/ Araquil, 67, Madrid, Spain"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"12, rue des Bouchers",
            Age = 44,
            City = @"Marseille",
            Country = @"France",
            Fax = @"91.24.45.41",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Phone = @"91.24.45.40",
            PostalCode = 13008,
            Title = @"Senior Software Developer",
            LastName = @"Cooper",
            FullAddress = @"12, rue des Bouchers, Marseille, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"23 Tsawassen Blvd.",
            Age = 44,
            City = @"Tsawassen",
            Country = @"Canada",
            Fax = @"(604) 555-3745",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Phone = @"(604) 555-4729",
            PostalCode = 19000,
            Title = @"Director",
            LastName = @"Johnson",
            FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Fauntleroy Circus",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(125) 555-3798",
            HireDate = @"2017-11-9",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Phone = @"(171) 555-1212",
            PostalCode = 30000,
            Title = @"Vice President",
            LastName = @"Richards",
            FullAddress = @"Fauntleroy Circus, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Cerrito 333",
            Age = 39,
            City = @"Buenos Aires",
            Country = @"Argentina",
            Fax = @"(121) 135-4892",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Phone = @"(1) 135-5555",
            PostalCode = 1010,
            Title = @"Director",
            LastName = @"Ashworth",
            FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Sierras de Granada 9993",
            Age = 44,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(153) 555-7293",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Phone = @"(5) 555-3392",
            PostalCode = 5022,
            Title = @"Senior Accountant",
            LastName = @"Moreno",
            FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Hauptstr. 29",
            Age = 50,
            City = @"Sao Paulo",
            Country = @"Brazil",
            Fax = @"(531) 555-6691",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Phone = @"0452-076545",
            PostalCode = 3012,
            Title = @"Senior Localization Developer",
            LastName = @"Rodriguez",
            FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Av. dos Lusíadas, 23",
            Age = 27,
            City = @"Bern",
            Country = @"Switzerland",
            Fax = @"(271) 335-357",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Phone = @"(11) 555-7647",
            PostalCode = 40000,
            Title = @"Senior Localization",
            LastName = @"Harper",
            FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berkeley Gardens 12",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-9199",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Phone = @"(171) 555-2282",
            PostalCode = 26000,
            Title = @"Localization Intern",
            LastName = @"Simpson",
            FullAddress = @"Berkeley Gardens 12, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Walserweg 21",
            Age = 39,
            City = @"Aachen",
            Country = @"Germany",
            Fax = @"0241-059428",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Phone = @"0241-039123",
            PostalCode = 52066,
            Title = @"Localization Intern",
            LastName = @"Chang",
            FullAddress = @"Walserweg 21, Aachen, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"35 King George",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-3373",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Phone = @"(171) 555-0297",
            PostalCode = 48000,
            Title = @"Localization Intern",
            LastName = @"Lewis",
            FullAddress = @"35 King George, London, UK"
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbGridModule),
                typeof(IgbColumnGroupModule),
                typeof(IgbPropertyEditorPanelModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="WebTreeGrid"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            ValueType="PropertyEditorValueType.Button"
            PrimitiveValue="@("Toggle First Group Pinned")"
            ButtonClicked="WebTreeGridPinFirstGroupToggle"
            Name="propertyEditorPropertyDescription1"
            @ref="propertyEditorPropertyDescription1">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            ValueType="PropertyEditorValueType.Button"
            PrimitiveValue="@("Toggle First Group Hidden")"
            ButtonClicked="WebTreeGridHideFirstGroupToggle"
            Name="propertyEditorPropertyDescription2"
            @ref="propertyEditorPropertyDescription2">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="EmployeesFlatDetails"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            Resizable="true">
            </IgbColumn>

            <IgbColumnGroup
            Header="General Information">
                <IgbColumn
                Field="HireDate"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumnGroup
                Header="Personal Details">
                    <IgbColumn
                    Field="ID"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Title"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Age"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbColumnGroup
            Header="Address Information">
                <IgbColumnGroup
                Header="Location">
                    <IgbColumn
                    Field="Country"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="City"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Address"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Contact Information">
                    <IgbColumn
                    Field="Phone"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Fax"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="PostalCode"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var propertyEditor = this.propertyEditor;
        var propertyEditorPropertyDescription1 = this.propertyEditorPropertyDescription1;
        var propertyEditorPropertyDescription2 = this.propertyEditorPropertyDescription2;
        var treeGrid = this.treeGrid;

        this.BindElements = () => {
            propertyEditor.Target = this.treeGrid;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription1;
    private IgbPropertyEditorPropertyDescription propertyEditorPropertyDescription2;
    private IgbTreeGrid treeGrid;

    public void WebTreeGridPinFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
    {
        var columnGroup = this.treeGrid.GetColumns().ElementAt(1);
        columnGroup.Pinned = !columnGroup.Pinned;
    }

    public void WebTreeGridHideFirstGroupToggle(IgbPropertyEditorPropertyDescriptionButtonClickEventArgs args)
    {
        var columnGroup = this.treeGrid.GetColumns().ElementAt(1);
        columnGroup.Hidden = !columnGroup.Hidden;
    }

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

다중 열 헤더의 선언은 IgbHeader 제목 정보가 전달된 IgbColumnGroup 구성 요소에 열 집합을 래핑하여 수행됩니다.

<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumnGroup Header="Contact Information">
        <IgbColumn Field="Phone" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="Fax" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
        <IgbColumn Field="PostalCode" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
    </IgbColumnGroup>
</IgbTreeGrid>
razor

​n-th 수준의 중첩된 헤더를 얻으려면 위의 선언을 따라야 합니다. 따라서 IgbColumnGroup 중첩하면 원하는 결과를 얻을 수 있습니다.

<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumnGroup Header="General Information">
        <IgbColumn Field="HireDate" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Date"></IgbColumn>
        <IgbColumnGroup Header="Person Details" Movable=true>
            <IgbColumn Field="ID" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
            <IgbColumn Field="Title" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
            <IgbColumn Field="Age" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.Number"></IgbColumn>
        </IgbColumnGroup>
    </IgbColumnGroup>
</IgbTreeGrid>
razor

모든 IgbColumnGroup​ ​이동, 고정 및 숨기기를 지원합니다.

When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed. Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. When columns/column-groups are not wrapped by current group which means they are top level columns, moving is allowed between whole visible columns.

<IgbTreeGrid Data=data AllowFiltering=true PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumnGroup Header="General Information">
        <IgbColumn Field="Phone" Sortable=true Resizable=true Movable=true DataType="GridColumnDataType.String"></IgbColumn>
    </IgbColumnGroup>
    <IgbColumn Field="Name" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Title" Sortable=true Resizable=true DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Age" Sortable=true Resizable=true DataType="GridColumnDataType.Number"></IgbColumn>
</IgbTreeGrid>
razor

Multi-Column Header Template

그리드의 각 열 그룹은 별도로 템플릿화할 수 있습니다. 열 그룹은 HeaderTemplate 속성에 대해 RenderFragment 기대합니다. 표현식은 열 그룹 개체와 함께 컨텍스트로 제공됩니다.

<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>

@code {
    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        string value = ctx.Column.Header.ToUpper();
        return @<span>@value</span>;
    };
}
razor

여러 열 그룹에 대해 단일 템플릿을 다시 사용하려면 다음과 같이 열 그룹의 속성을 설정할 HeaderTemplate 수 있습니다.

<IgbColumnGroup Header="General Information" HeaderTemplate="Template">
</IgbColumnGroup>
<IgbColumnGroup Header="Address Information" HeaderTemplate="Template">
</IgbColumnGroup>

@code {
    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        string value = ctx.Column.Header.ToUpper();
        return @<span>@value</span>;
    };
}
razor

If a header is re-templated and the corresponding column group is movable, you have to set the draggable attribute to false on the templated elements, so that you can handle any of the events that are applied!

@code {
    public Dictionary<string, object> DraggableAttributes { get; set; } =
        new Dictionary<string, object>()
        {
            { "draggable", "false" }
        };

    public RenderFragment<IgbColumnTemplateContext> Template = (ctx) => {
        return @<IgbIcon AdditionalAttributes="DraggableAttributes"  @onclick="onClick"/>;
    };
}
razor

다음 샘플은 헤더 템플릿을 사용하여 축소 가능한 열 그룹을 구현하는 방법을 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Obere Str. 57",
            Age = 55,
            City = @"Berlin",
            Country = @"Germany",
            Fax = @"030-0076545",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Phone = @"030-0074321",
            PostalCode = 12209,
            Title = @"Development Manager",
            LastName = @"Winchester",
            FullAddress = @"Obere Str. 57, Berlin, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Avda. de la Constitución 2222",
            Age = 42,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(51) 555-3745",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Phone = @"(5) 555-4729",
            PostalCode = 5021,
            Title = @"CEO",
            LastName = @"Sanders",
            FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Mataderos 2312",
            Age = 49,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(5) 555-3995",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Phone = @"(5) 555-3932",
            PostalCode = 5023,
            Title = @"Accounting Manager",
            LastName = @"Lincoln",
            FullAddress = @"Mataderos 2312, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"120 Hanover Sq.",
            Age = 61,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-6750",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Phone = @"(171) 555-7788",
            PostalCode = 39000,
            Title = @"Localization Manager",
            LastName = @"Wang",
            FullAddress = @"120 Hanover Sq., London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berguvsvägen 8",
            Age = 43,
            City = @"Luleå",
            Country = @"Sweden",
            Fax = @"0921-12 34 67",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Phone = @"0921-12 34 65",
            PostalCode = 29000,
            Title = @"Senior Software Developer",
            LastName = @"Burke",
            FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Forsterstr. 57",
            Age = 29,
            City = @"Mannheim",
            Country = @"Germany",
            Fax = @"0621-08924",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Phone = @"0621-08460",
            PostalCode = 68306,
            Title = @"Senior Software Developer",
            LastName = @"Anderson",
            FullAddress = @"Forsterstr. 57, Mannheim, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"24, place Kléber",
            Age = 31,
            City = @"Strasbourg",
            Country = @"France",
            Fax = @"88.60.15.32",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Phone = @"88.60.15.31",
            PostalCode = 67000,
            Title = @"Software Development Team Lead",
            LastName = @"Reyes",
            FullAddress = @"24, place Kléber, Strasbourg, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"C/ Araquil, 67",
            Age = 35,
            City = @"Madrid",
            Country = @"Spain",
            Fax = @"(911) 555 91 99",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Phone = @"(91) 555 22 82",
            PostalCode = 28023,
            Title = @"Senior Software Developer",
            LastName = @"Mendel",
            FullAddress = @"C/ Araquil, 67, Madrid, Spain"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"12, rue des Bouchers",
            Age = 44,
            City = @"Marseille",
            Country = @"France",
            Fax = @"91.24.45.41",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Phone = @"91.24.45.40",
            PostalCode = 13008,
            Title = @"Senior Software Developer",
            LastName = @"Cooper",
            FullAddress = @"12, rue des Bouchers, Marseille, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"23 Tsawassen Blvd.",
            Age = 44,
            City = @"Tsawassen",
            Country = @"Canada",
            Fax = @"(604) 555-3745",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Phone = @"(604) 555-4729",
            PostalCode = 19000,
            Title = @"Director",
            LastName = @"Johnson",
            FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Fauntleroy Circus",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(125) 555-3798",
            HireDate = @"2017-11-9",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Phone = @"(171) 555-1212",
            PostalCode = 30000,
            Title = @"Vice President",
            LastName = @"Richards",
            FullAddress = @"Fauntleroy Circus, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Cerrito 333",
            Age = 39,
            City = @"Buenos Aires",
            Country = @"Argentina",
            Fax = @"(121) 135-4892",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Phone = @"(1) 135-5555",
            PostalCode = 1010,
            Title = @"Director",
            LastName = @"Ashworth",
            FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Sierras de Granada 9993",
            Age = 44,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(153) 555-7293",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Phone = @"(5) 555-3392",
            PostalCode = 5022,
            Title = @"Senior Accountant",
            LastName = @"Moreno",
            FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Hauptstr. 29",
            Age = 50,
            City = @"Sao Paulo",
            Country = @"Brazil",
            Fax = @"(531) 555-6691",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Phone = @"0452-076545",
            PostalCode = 3012,
            Title = @"Senior Localization Developer",
            LastName = @"Rodriguez",
            FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Av. dos Lusíadas, 23",
            Age = 27,
            City = @"Bern",
            Country = @"Switzerland",
            Fax = @"(271) 335-357",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Phone = @"(11) 555-7647",
            PostalCode = 40000,
            Title = @"Senior Localization",
            LastName = @"Harper",
            FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berkeley Gardens 12",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-9199",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Phone = @"(171) 555-2282",
            PostalCode = 26000,
            Title = @"Localization Intern",
            LastName = @"Simpson",
            FullAddress = @"Berkeley Gardens 12, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Walserweg 21",
            Age = 39,
            City = @"Aachen",
            Country = @"Germany",
            Fax = @"0241-059428",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Phone = @"0241-039123",
            PostalCode = 52066,
            Title = @"Localization Intern",
            LastName = @"Chang",
            FullAddress = @"Walserweg 21, Aachen, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"35 King George",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-3373",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Phone = @"(171) 555-0297",
            PostalCode = 48000,
            Title = @"Localization Intern",
            LastName = @"Lewis",
            FullAddress = @"35 King George, London, UK"
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbGridModule),
                typeof(IgbColumnGroupModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="EmployeesFlatDetails"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            Resizable="true">
            </IgbColumn>

            <IgbColumnGroup
            Header="General Information"
            HeaderTemplateScript="WebTreeGridColumnGroupHeaderTemplate"
            Name="columnGroup1"
            @ref="columnGroup1">
                <IgbColumn
                Field="HireDate"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumnGroup
                Header="Personal Details">
                    <IgbColumn
                    Field="ID"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Title"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Age"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbColumnGroup
            Header="Address Information"
            HeaderTemplateScript="WebTreeGridColumnGroupHeaderTemplate"
            Name="columnGroup2"
            @ref="columnGroup2">
                <IgbColumn
                Header="Location"
                Field="Address"
                Hidden="true"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumn
                Field="Phone"
                Hidden="true"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumnGroup
                Header="Location">
                    <IgbColumn
                    Field="Country"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="City"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Address"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Contact Information">
                    <IgbColumn
                    Field="Phone"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Fax"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="PostalCode"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var treeGrid = this.treeGrid;
        var columnGroup1 = this.columnGroup1;
        var columnGroup2 = this.columnGroup2;

    }

    private IgbTreeGrid treeGrid;
    private IgbColumnGroup columnGroup1;
    private IgbColumnGroup columnGroup2;

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorコピー

const columnGroupStatesTreeGrid = new Map();
function toggleTreeGridColumnGroup(name) {
    const grid = document.getElementsByTagName("igc-tree-grid")[0];
    var columnGroup = grid.columns.find((col) => col.header === name)
    const columns = columnGroup.childColumns;
    if (columnGroup.header === 'General Information') {
        const col = columns[1];
        col.hidden = !col.hidden;
    } else if (columnGroup.header === 'Address Information') {
        for (const col of columns) {
            col.hidden = !col.hidden;
        }
    }
    columnGroupStatesTreeGrid.set(name, !columnGroupStatesTreeGrid.get(name));
}
igRegisterScript("WebTreeGridColumnGroupHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    var iconName = columnGroupStatesTreeGrid.get(ctx.column.header) ? '🔽' : '🔼';
    return html`<div>
    <span draggable="false" onclick='toggleTreeGridColumnGroup("${ctx.column.header}")'>${iconName}</span>
    <span>${ctx.column.header}</span>
</div>`;
}, false);

jsコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgbTreeGrid class="grid"></IgbTreeGrid>
razor

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
css

Demo

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Obere Str. 57",
            Age = 55,
            City = @"Berlin",
            Country = @"Germany",
            Fax = @"030-0076545",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Phone = @"030-0074321",
            PostalCode = 12209,
            Title = @"Development Manager",
            LastName = @"Winchester",
            FullAddress = @"Obere Str. 57, Berlin, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Avda. de la Constitución 2222",
            Age = 42,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(51) 555-3745",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Phone = @"(5) 555-4729",
            PostalCode = 5021,
            Title = @"CEO",
            LastName = @"Sanders",
            FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Mataderos 2312",
            Age = 49,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(5) 555-3995",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Phone = @"(5) 555-3932",
            PostalCode = 5023,
            Title = @"Accounting Manager",
            LastName = @"Lincoln",
            FullAddress = @"Mataderos 2312, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"120 Hanover Sq.",
            Age = 61,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-6750",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Phone = @"(171) 555-7788",
            PostalCode = 39000,
            Title = @"Localization Manager",
            LastName = @"Wang",
            FullAddress = @"120 Hanover Sq., London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berguvsvägen 8",
            Age = 43,
            City = @"Luleå",
            Country = @"Sweden",
            Fax = @"0921-12 34 67",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Phone = @"0921-12 34 65",
            PostalCode = 29000,
            Title = @"Senior Software Developer",
            LastName = @"Burke",
            FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Forsterstr. 57",
            Age = 29,
            City = @"Mannheim",
            Country = @"Germany",
            Fax = @"0621-08924",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Phone = @"0621-08460",
            PostalCode = 68306,
            Title = @"Senior Software Developer",
            LastName = @"Anderson",
            FullAddress = @"Forsterstr. 57, Mannheim, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"24, place Kléber",
            Age = 31,
            City = @"Strasbourg",
            Country = @"France",
            Fax = @"88.60.15.32",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Phone = @"88.60.15.31",
            PostalCode = 67000,
            Title = @"Software Development Team Lead",
            LastName = @"Reyes",
            FullAddress = @"24, place Kléber, Strasbourg, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"C/ Araquil, 67",
            Age = 35,
            City = @"Madrid",
            Country = @"Spain",
            Fax = @"(911) 555 91 99",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Phone = @"(91) 555 22 82",
            PostalCode = 28023,
            Title = @"Senior Software Developer",
            LastName = @"Mendel",
            FullAddress = @"C/ Araquil, 67, Madrid, Spain"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"12, rue des Bouchers",
            Age = 44,
            City = @"Marseille",
            Country = @"France",
            Fax = @"91.24.45.41",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Phone = @"91.24.45.40",
            PostalCode = 13008,
            Title = @"Senior Software Developer",
            LastName = @"Cooper",
            FullAddress = @"12, rue des Bouchers, Marseille, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"23 Tsawassen Blvd.",
            Age = 44,
            City = @"Tsawassen",
            Country = @"Canada",
            Fax = @"(604) 555-3745",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Phone = @"(604) 555-4729",
            PostalCode = 19000,
            Title = @"Director",
            LastName = @"Johnson",
            FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Fauntleroy Circus",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(125) 555-3798",
            HireDate = @"2017-11-9",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Phone = @"(171) 555-1212",
            PostalCode = 30000,
            Title = @"Vice President",
            LastName = @"Richards",
            FullAddress = @"Fauntleroy Circus, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Cerrito 333",
            Age = 39,
            City = @"Buenos Aires",
            Country = @"Argentina",
            Fax = @"(121) 135-4892",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Phone = @"(1) 135-5555",
            PostalCode = 1010,
            Title = @"Director",
            LastName = @"Ashworth",
            FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Sierras de Granada 9993",
            Age = 44,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(153) 555-7293",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Phone = @"(5) 555-3392",
            PostalCode = 5022,
            Title = @"Senior Accountant",
            LastName = @"Moreno",
            FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Hauptstr. 29",
            Age = 50,
            City = @"Sao Paulo",
            Country = @"Brazil",
            Fax = @"(531) 555-6691",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Phone = @"0452-076545",
            PostalCode = 3012,
            Title = @"Senior Localization Developer",
            LastName = @"Rodriguez",
            FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Av. dos Lusíadas, 23",
            Age = 27,
            City = @"Bern",
            Country = @"Switzerland",
            Fax = @"(271) 335-357",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Phone = @"(11) 555-7647",
            PostalCode = 40000,
            Title = @"Senior Localization",
            LastName = @"Harper",
            FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berkeley Gardens 12",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-9199",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Phone = @"(171) 555-2282",
            PostalCode = 26000,
            Title = @"Localization Intern",
            LastName = @"Simpson",
            FullAddress = @"Berkeley Gardens 12, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Walserweg 21",
            Age = 39,
            City = @"Aachen",
            Country = @"Germany",
            Fax = @"0241-059428",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Phone = @"0241-039123",
            PostalCode = 52066,
            Title = @"Localization Intern",
            LastName = @"Chang",
            FullAddress = @"Walserweg 21, Aachen, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"35 King George",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-3373",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Phone = @"(171) 555-0297",
            PostalCode = 48000,
            Title = @"Localization Intern",
            LastName = @"Lewis",
            FullAddress = @"35 King George, London, UK"
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#treeGrid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="EmployeesFlatDetails"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            Resizable="true">
            </IgbColumn>

            <IgbColumnGroup
            Header="General Information">
                <IgbColumn
                Field="HireDate"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumnGroup
                Header="Personal Details">
                    <IgbColumn
                    Field="ID"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Title"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Age"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbColumnGroup
            Header="Address Information">
                <IgbColumnGroup
                Header="Location">
                    <IgbColumn
                    Field="Country"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="City"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Address"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Contact Information">
                    <IgbColumn
                    Field="Phone"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Fax"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="PostalCode"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var treeGrid = this.treeGrid;

    }

    private IgbTreeGrid treeGrid;

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/

#treeGrid {
    --ig-grid-header-background: #e0f3ff;
    --ig-grid-header-text-color: #e41c77;
    --ig-grid-header-border-width: 1px;
    --ig-grid-header-border-style: solid;
    --ig-grid-header-border-color: rgba(0, 0, 0, 0.08);
}

cssコピー

API References

• IgbTreeGrid
• IgbColumnGroup

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브