Blazor 트리 그리드 열 크기 조정 개요

Blazor Tree Grid의 Ignite UI for Blazor 열 크기 조정 기능을 사용하면 사용자가 IgbTreeGrid의 열 너비를 쉽게 조정할 수 있습니다. 기본적으로 드래그 크기 조정 작업이 적용되는 동안 임시 크기 조정 표시기가 표시됩니다. 사용 가능한 크기 조정 옵션은 여러 가지가 있습니다. 픽셀/백분율로 열 크기 조정, 열 크기 조정 제한, 더블 클릭 시 열 크기 자동 조정, 초기화 시 열 크기 자동 조정.

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

無料で試してみる

Blazor Tree Grid Column Resizing 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(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatDetails"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Resizable="true"
            MinWidth="60"
            MaxWidth="250"
            Width="220">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

        </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/
*/
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.

열 크기 조정은 열 수준별로 활성화됩니다. 즉, IgbTreeGrid 에는 크기 조정 가능한 열과 크기 조정 불가능한 열이 혼합되어 있을 수 있습니다. 이는 IgbColumn의 Resizable 입력을 통해 수행됩니다.

<IgbColumn Field="ID" Resizable=true Width="100px"></IgbColumn>
razor

다음을 구독할 수 있습니다. ColumnResized의 이벤트 IgbTreeGrid 열 크기가 조정될 때 일부 사용자 정의 논리를 구현합니다. 이전 및 새 열 너비뿐만 아니라 IgbColumn 개체는 이벤트 인수를 통해 노출됩니다.

<IgbTreeGrid Data=data AutoGenerate=false ColumnResized="onResize" PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumn Field="Title" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="HireDate" Resizable=true Width="100px"></IgbColumn>
</IgbTreeGrid>

@code {
    private void onResize(IgbColumnResizeEventArgs args)
    {
        IgbColumnType col = args.Detail.Column;
        string pWidth = args.Detail.PrevWidth;
        string nWidth = args.Detail.NewWidth;
    }
}
razor

Resizing Columns in Pixels/Percentages

사용자 시나리오에 따라 열 너비는 픽셀, 백분율 또는 두 가지의 혼합으로 정의될 수 있습니다. 이러한 모든 시나리오는 열 크기 조정 기능으로 지원됩니다. 기본적으로 열에 너비가 설정되지 않은 경우 너비가 픽셀 단위로 설정된 사용 가능한 공간에 맞춰집니다.

이는 다음 구성이 가능함을 의미합니다.

<IgbTreeGrid Data=data AutoGenerate=false ColumnResized="onResize" PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumn Field="Title" Resizable=true Width="10%"></IgbColumn>
    <IgbColumn Field="HireDate" Resizable=true Width="100px"></IgbColumn>
    <IgbColumn Field="Age" Resizable=true></IgbColumn>
</IgbTreeGrid>
razor

There is a slight difference in the way resizing works for columns set in pixels and percentages.

픽셀

너비(픽셀)로 열 크기를 조정하는 작업은 열 크기에서 마우스 이동의 수평 크기를 직접 더하거나 빼는 방식으로 수행됩니다.

백분율

너비(%)로 열 크기를 조정할 때 마우스 이동의 수평 크기(픽셀)는 대략 그리드 너비에 대한 백분율 크기로 변환됩니다. 열은 계속 반응하며 향후 그리드 크기 조정은 여전히 열에 반영됩니다.

Restrict Column Resizing

허용되는 최소 및 최대 열 너비를 구성할 수도 있습니다. 이는 IgbColumn의 MinWidth 및 MaxWidth 입력을 통해 수행됩니다. 이 경우 크기 조정 표시기 끌기 작업은 MinWidth 및 MaxWidth로 정의된 경계 밖에서 열 크기를 조정할 수 없음을 사용자에게 알리기 위해 제한됩니다.

<IgbColumn Field="ContactTitle" Resizable=true Width="100px" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor

최소 및 최대 열 너비 값 유형(픽셀 또는 백분율)을 혼합하는 것이 허용됩니다. 최소값과 최대값에 대해 설정된 값이 백분율로 설정되면 각 열 크기는 픽셀과 유사한 정확한 크기로 제한됩니다.

이는 다음과 같은 구성이 가능함을 의미합니다.

<IgbColumn Field="ContactTitle" Resizable=true Width="10%" MinWidth="60px" MaxWidth="230px"></IgbColumn>
razor

또는

<IgbColumn Field="ID" Resizable=true Width="100px" MinWidth="5%" MaxWidth="15%"></IgbColumn>
razor

Auto-Size Columns on Double Click

헤더의 오른쪽을 두 번 클릭하면 각 열의 크기가 자동으로 조정될 수 있습니다. 열의 크기는 헤더 자체를 포함하여 현재 표시되는 가장 긴 셀 값으로 조정됩니다. 이 동작은 기본적으로 활성화되어 있으며 추가 구성이 필요하지 않습니다. 그러나 해당 열에 MaxWidth 설정되어 있고 새 너비가 MaxWidth 값을 초과하는 경우 열 크기가 자동으로 조정되지 않습니다. 이 경우 열은 미리 설정된 MaxWidth 값에 따라 크기가 조정됩니다.

또한 IgbColumn에 노출된 Autosize 메서드를 사용하여 열 크기를 동적으로 자동 조정할 수도 있습니다.

@code {
    private IgbTreeGrid gridRef;

    private void AutosizeColumn()
    {
        IgbColumn column = gridRef.Columns.Where((col) => { return col.Field == "ID"; }).FirstOrDefault();
        column.Autosize(false);
    }
}
razor

Auto-Size Columns on Initialization

​Width 'auto'로 설정하여 초기화 시 각 열의 크기가 자동으로 조정되도록 설정할 수 있습니다.

<IgbColumn Width="auto"></IgbColumn>
razor

열이 뷰에서 처음 초기화되면 너비가 표시되는 가장 긴 셀이나 머리글의 크기로 확인됩니다. 표시되는 행 외부에 있는 셀은 포함되지 않습니다.

이 접근 방식은 초기화 후 자동 크기 조정보다 성능이 더 최적화되어 있으며 특히 많은 수의 열 크기를 자동 조정해야 하는 경우에 권장됩니다.

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(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatDetails"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            Header="Name"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="220px"
            MinWidth="200px"
            MaxWidth="250px">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            Header="Title"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Resizable="true"
            Width="auto">
            </IgbColumn>

        </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/
*/
cssコピー

Styling

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

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

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-resize-line-color: #f35b04;
}
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(IgbTreeGridModule)
            );
            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/
*/

#grid {
    --ig-grid-resize-line-color: #f35b04;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="EmployeesFlatDetails"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Resizable="true"
            MinWidth="60"
            MaxWidth="250"
            Width="220">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Resizable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid grid;

    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/
*/

#grid {
    --ig-grid-resize-line-color: #f35b04;
}

cssコピー

API References

• IgbColumn
• IgbTreeGrid

Additional Resources

• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 요약
• 열 이동
• 열 고정
• 선택

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

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