Blazor Tree Grid Toolbar

Ignite UI for Blazor Blazor Tree Grid의 UI 작업을 위한 컨테이너입니다. Blazor 툴바는 Blazor 구성 요소, 즉 IgbTreeGrid의 맨 위에 있으며 가로 크기와 일치합니다. 툴바 컨테이너는 사용자 지정 콘텐츠나 미리 정의된 UI 컨트롤 세트를 호스팅할 수 있습니다. Blazor Tree Grid의 기본 세트에는 다음이 포함됩니다.

• 열 숨기기
• 열 고정
• 엑셀 내보내기
• 고급 필터링

툴바와 미리 정의된 UI 구성 요소는 Blazor 이벤트를 지원하고 개발자에게 API를 제공합니다.

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

無料で試してみる

Blazor Toolbar Grid Example

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatAvatarsItem
{
    public double Age { get; set; }
    public string Avatar { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatAvatars
    : List<EmployeesFlatAvatarsItem>
{
    public EmployeesFlatAvatars()
    {
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 55,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/5.jpg",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 42,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/4.jpg",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 49,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/2.jpg",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 61,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/4.jpg",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 43,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/1.jpg",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 29,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/2.jpg",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 31,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/3.jpg",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 35,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/3.jpg",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/6.jpg",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/7.jpg",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/1.jpg",
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/8.jpg",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/9.jpg",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 50,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/10.jpg",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 27,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/5.jpg",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/6.jpg",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/26.jpg",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/27.jpg",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}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(IgbTreeGridModule),
                typeof(IgbAvatarModule)
            );
            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"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatAvatars"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        AllowAdvancedFiltering="true">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarAdvancedFiltering
                    >
                    </IgbGridToolbarAdvancedFiltering>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarExporter
                    >
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            BodyTemplateScript="WebTreeGridAvatarCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

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

            <IgbColumn
            Field="ID"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

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

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;
    private IgbColumn column1;

    private EmployeesFlatAvatars _employeesFlatAvatars = null;
    public EmployeesFlatAvatars EmployeesFlatAvatars
    {
        get
        {
            if (_employeesFlatAvatars == null)
            {
                _employeesFlatAvatars = new EmployeesFlatAvatars();
            }
            return _employeesFlatAvatars;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridAvatarCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="display: flex; align-items: center;">
    <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
    </igc-avatar>
    <span style="margin-left: 30px;">${ctx.cell.value}</span>
</div>`;
}, false);

jsコピー

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

사전 정의된 Actions 및 Title UI 구성 요소는 IgbGridToolbar 내부에 추가되며 해당 그리드 기능과의 기본 상호 작용을 제공하는 도구 모음을 갖는 데 모두 필요합니다.

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarAdvancedFiltering>
            </IgbGridToolbarAdvancedFiltering>
            <IgbGridToolbarHiding>
            </IgbGridToolbarHiding>
            <IgbGridToolbarPinning>
            </IgbGridToolbarPinning>
            <IgbGridToolbarExporter>
            </IgbGridToolbarExporter>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>
razor

As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgbGridToolbarActions container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

물론, 각 UI는 서로 독립적으로 추가될 수도 있고 전혀 추가되지 않을 수도 있습니다. 이렇게 하면 도구 모음 컨테이너가 비어 있게 렌더링됩니다.

<IgbTreeGrid Data="Data" PrimaryKey="ID" ForeignKey="ParentID" AutoGenerate="true">
    <IgbGridToolbar>
    </IgbGridToolbar>
</IgbTreeGrid>
razor

각 기본 UI 구성 요소를 포괄적으로 살펴보려면 아래 기능 섹션을 계속 읽어보세요.

특징

도구 모음은 그리드 전체에 영향을 미치는 논리/상호 작용을 분리하는 데 유용합니다.

위에 표시된 대로 그리드에서 데이터 제어, 열 숨기기, 열 고정, 고급 필터링 및 내보내기를 위한 기본 구성 요소를 제공하도록 구성할 수 있습니다.

이러한 기능은 Ignite UI for Blazor 카드 구성 요소와 비슷한 패턴을 따르면 서로 독립적으로 활성화할 수 있습니다.

아래에는 도구 모음의 주요 기능과 각 기능에 대한 예제 코드가 나열되어 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatAvatarsItem
{
    public double Age { get; set; }
    public string Avatar { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatAvatars
    : List<EmployeesFlatAvatarsItem>
{
    public EmployeesFlatAvatars()
    {
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 55,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/5.jpg",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 42,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/4.jpg",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 49,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/2.jpg",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 61,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/4.jpg",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 43,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/1.jpg",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 29,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/2.jpg",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 31,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/3.jpg",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 35,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/3.jpg",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/6.jpg",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/7.jpg",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/1.jpg",
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/8.jpg",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/9.jpg",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 50,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/10.jpg",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 27,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/5.jpg",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/6.jpg",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/26.jpg",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/27.jpg",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}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(IgbTreeGridModule),
                typeof(IgbAvatarModule),
                typeof(IgbSwitchModule),
                typeof(IgbInputModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS

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

.control_panel {
    width: 700px;
    margin-bottom: 10px;
}
</style>
<div class="container sample ig-typography">
    <div class="container vertical">

        <div class="control_panel">
            <IgbInput InputOcurred=ChangeTitle DisplayType=@InputType.Text Label="Toolbar title" Value="Tree grid toolbar" />
            <IgbSwitch CheckedChanged="EnableFiltering" Checked=true>Advanced Filtering</IgbSwitch>
            <IgbSwitch CheckedChanged="EnableHiding" Checked=true>Column hiding</IgbSwitch>
            <IgbSwitch CheckedChanged="EnablePinning" Checked=true>Column pinning</IgbSwitch>
            <IgbSwitch CheckedChanged="EnableExport" Checked=true>Exporting</IgbSwitch>
        </div>

        <IgbTreeGrid
            AutoGenerate="false"
            Id="treeGrid"
            Data="EmployeesFlatAvatars"
            PrimaryKey="ID"
            ForeignKey="ParentID"
        >
            <IgbGridToolbar>
                <IgbGridToolbarTitle>
                    <span>@($"{this.title}")</span>
                </IgbGridToolbarTitle>
                <IgbGridToolbarActions>
                    <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
                    <IgbGridToolbarHiding></IgbGridToolbarHiding>
                    <IgbGridToolbarPinning></IgbGridToolbarPinning>
                    <IgbGridToolbarExporter></IgbGridToolbarExporter>
                </IgbGridToolbarActions>
            </IgbGridToolbar>

            <IgbColumn
                Field="Name"
                DataType="GridColumnDataType.String"
                BodyTemplateScript="WebTreeGridAvatarCellTemplate"
            ></IgbColumn>
            <IgbColumn
                Field="Title"
                DataType="GridColumnDataType.String"
            ></IgbColumn>
            <IgbColumn
                Field="ID"
                DataType="GridColumnDataType.Number"
            ></IgbColumn>
            <IgbColumn
                Field="Age"
                DataType="GridColumnDataType.Number"
            ></IgbColumn>
            <IgbColumn
                Field="HireDate"
                DataType="GridColumnDataType.Date"
            ></IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    public string title = "Tree grid toolbar";

    public void ChangeTitle(IgbComponentValueChangedEventArgs args)
    {
        this.title = args.Detail;
    }

    public async void EnableFiltering(bool isChecked)
    {
        await JS.InvokeAsync<string>("EnableFiltering");
    }

    public async void EnableHiding(bool isChecked)
    {
        await JS.InvokeAsync<string>("EnableHiding");
    }

    public async void EnablePinning(bool isChecked)
    {
        await JS.InvokeAsync<string>("EnablePinning");
    }

    public async void EnableExport(bool isChecked)
    {
        await JS.InvokeAsync<string>("EnableExport");
    }

    private EmployeesFlatAvatars _employeesFlatAvatars = null;
    public EmployeesFlatAvatars EmployeesFlatAvatars
    {
        get
        {
            if (_employeesFlatAvatars == null)
            {
                _employeesFlatAvatars = new EmployeesFlatAvatars();
            }
            return _employeesFlatAvatars;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridAvatarCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="display: flex; align-items: center;">
    <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
    </igc-avatar>
    <span style="margin-left: 30px;">${ctx.cell.value}</span>
</div>`;
}, false);

var EnableFiltering = () => {
    var toolbarFiltering = document.getElementsByTagName("igc-grid-toolbar-advanced-filtering")[0];
    toolbarFiltering.hidden = !toolbarFiltering.hidden;
}

var EnableHiding = () => {
    var toolbarHiding = document.getElementsByTagName("igc-grid-toolbar-hiding")[0];
    toolbarHiding.hidden = !toolbarHiding.hidden;
}

var EnablePinning = () => {
    var toolbarPinning = document.getElementsByTagName("igc-grid-toolbar-pinning")[0];
    toolbarPinning.hidden = !toolbarPinning.hidden;
}

var EnableExport = () => {
    var toolbarExporter = document.getElementsByTagName("igc-grid-toolbar-exporter")[0];
    toolbarExporter.hidden = !toolbarExporter.hidden;
}jsコピー

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

.control_panel {
    width: 700px;
    margin-bottom: 10px;
}cssコピー

Title

​IgbGridToolbarTitle을 사용하여 그리드의 도구 모음 제목을 설정합니다.

사용자는 간단한 텍스트부터 보다 복잡한 템플릿까지 무엇이든 제공할 수 있습니다.

<IgbGridToolbar>
    <IgbGridToolbarTitle>Grid toolbar title</IgbGridToolbarTitle>
</IgbGridToolbar>
razor

Actions

​IgbGridToolbarActions는 사용자가 상위 그리드와 관련하여 작업/상호 작용을 배치할 수 있는 곳입니다. 도구 모음의 제목 부분과 마찬가지로 사용자는 기본 도구 모음 상호 작용 구성 요소를 포함하여 해당 템플릿 부분 내에 무엇이든 제공할 수 있습니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <!--...-->
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

열 고정

​IgbGridToolbarPinning 구성 요소는 그리드의 열 고정과 상호 작용하기 위한 기본 UI를 제공합니다.

구성 요소는 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자 및 드롭다운 자체의 높이와 같은 UI 사용자 정의를 위한 여러 입력 속성뿐만 아니라 도구 모음이 포함된 상위 그리드를 사용하여 즉시 작동하도록 설정됩니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarPinning Title="Grid pinned columns" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarPinning>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

열 숨기기

​IgbGridToolbarHiding은 열 숨기기와 상호작용하기 위한 기본 UI를 제공합니다. 구성 요소 제목, 구성 요소 입력을 위한 자리 표시자, 드롭다운 자체의 높이 등 UI 사용자 지정을 위한 동일한 입력 속성을 노출합니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarHiding Title="Grid column hiding" Prompt="Filter column collection" ColumnListHeight="400px"></IgbGridToolbarHiding>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

고급 필터링

도구 모음 고급 필터링 구성 요소는 고급 필터링 기능을 위한 기본 UI를 제공합니다. 구성 요소는 버튼의 기본 텍스트를 변경하는 방법을 노출합니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarAdvancedFiltering></IgbGridToolbarAdvancedFiltering>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

Data Exporting

나머지 도구 모음 작업과 마찬가지로 내보내기는 기본적으로 IgbGridToolbarExporter를 통해 제공됩니다.

도구 모음 내보내기 구성 요소는 UI와 내보내기 환경을 모두 사용자 지정하기 위한 여러 입력 속성을 노출합니다.

표시 텍스트 변경부터 드롭다운 옵션 활성화/비활성화, 생성된 파일 이름 사용자 정의까지 다양합니다. 자세한 내용은 ToolbarExporter에 대한 API 문서를 참조하세요.

다음은 Blazor 템플릿을 통해 사용자 정의할 수 있는 일부 옵션을 보여주는 스니펫입니다.

<IgbGridToolbar>
    <IgbGridToolbarActions>
        <IgbGridToolbarExporter ExportCSV="true" ExportExcel="true" Filename="exported_data"></IgbGridToolbarExporter>
    </IgbGridToolbarActions>
</IgbGridToolbar>
razor

내보낸 파일 이름을 변경하는 것 외에도 사용자는 ToolbarExporting 이벤트를 기다리고 이벤트 속성에서 옵션 항목을 사용자 정의하여 내보내기 옵션을 추가로 구성할 수 있습니다.

By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

다음 코드 조각은 도구 모음 내보내기 이벤트를 구독하고 내보내기 옵션을 구성하는 방법을 보여줍니다.

<IgbTreeGrid ToolbarExportingScript="ConfigureExport"></IgbTreeGrid>

// In Javascript
igRegisterScript("ConfigureExport", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}, false);
razor

다음 샘플은 내보낸 파일을 사용자 정의하는 방법을 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatAvatarsItem
{
    public double Age { get; set; }
    public string Avatar { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatAvatars
    : List<EmployeesFlatAvatarsItem>
{
    public EmployeesFlatAvatars()
    {
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 55,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/5.jpg",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 42,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/4.jpg",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 49,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/2.jpg",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 61,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/4.jpg",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 43,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/1.jpg",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 29,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/2.jpg",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 31,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/3.jpg",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 35,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/3.jpg",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/6.jpg",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/7.jpg",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/1.jpg",
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/8.jpg",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/9.jpg",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 50,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/10.jpg",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 27,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/5.jpg",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/6.jpg",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/26.jpg",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/27.jpg",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}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(IgbTreeGridModule),
                typeof(IgbAvatarModule)
            );
            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"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatAvatars"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        ToolbarExportingScript="WebTreeGridToolbarExporting">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarExporter
                    >
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            BodyTemplateScript="WebTreeGridAvatarCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

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

            <IgbColumn
            Field="ID"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

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

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;
    private IgbColumn column1;

    private EmployeesFlatAvatars _employeesFlatAvatars = null;
    public EmployeesFlatAvatars EmployeesFlatAvatars
    {
        get
        {
            if (_employeesFlatAvatars == null)
            {
                _employeesFlatAvatars = new EmployeesFlatAvatars();
            }
            return _employeesFlatAvatars;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridAvatarCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="display: flex; align-items: center;">
    <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
    </igc-avatar>
    <span style="margin-left: 30px;">${ctx.cell.value}</span>
</div>`;
}, false);

igRegisterScript("WebTreeGridToolbarExporting", (evt) => {
    const args = evt.detail;
    const options = args.options;
    options.fileName = `Report_${new Date().toDateString()}`;
    args.exporter.columnExporting.subscribe((columnArgs) => {
        columnArgs.cancel = columnArgs.header === 'Name';
    });
}, false);

jsコピー

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

Exporting Indicator

기본 도구 모음 내보내기 구성 요소를 사용하는 경우 내보내기 작업이 발생할 때마다 작업이 진행되는 동안 도구 모음에 진행률 표시기가 표시됩니다.

또한 사용자는 도구 모음 ShowProgress 속성을 설정하고 장기 실행 작업에 사용하거나 그리드에서 발생하는 작업을 나타내는 또 다른 방법으로 사용할 수 있습니다.

아래 샘플에는 진행률 표시줄을 볼 수 있도록 데이터 내보내기에 필요한 시간을 늘리기 위해 상당한 양의 데이터가 사용됩니다. 또한 그리드에서 장기 실행 작업을 시뮬레이션하는 또 다른 버튼이 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public string Category { get; set; }
    public string OrderDate { get; set; }
    public double Units { get; set; }
    public double UnitPrice { get; set; }
    public double Price { get; set; }
    public bool Delivered { get; set; }
}

public class OrdersTreeData
    : List<OrdersTreeDataItem>
{
    public OrdersTreeData()
    {
        this.Add(new OrdersTreeDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Order 1",
            Category = @"",
            OrderDate = @"2010-02-17",
            Units = 1844,
            UnitPrice = 3.73,
            Price = 6884.38,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chocolate Chip Cookies",
            Category = @"Cookies",
            OrderDate = @"2010-02-17",
            Units = 834,
            UnitPrice = 3.59,
            Price = 2994.06,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Red Apples",
            Category = @"Fruit",
            OrderDate = @"2010-02-17",
            Units = 371,
            UnitPrice = 3.66,
            Price = 1357.86,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Butter",
            Category = @"Diary",
            OrderDate = @"2010-02-17",
            Units = 260,
            UnitPrice = 3.45,
            Price = 897,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Potato Chips",
            Category = @"Snack",
            OrderDate = @"2010-02-17",
            Units = 118,
            UnitPrice = 1.96,
            Price = 231.28,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Orange Juice",
            Category = @"Beverages",
            OrderDate = @"2010-02-17",
            Units = 261,
            UnitPrice = 5.38,
            Price = 1404.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Order 2",
            Category = @"",
            OrderDate = @"2022-05-27",
            Units = 1831,
            UnitPrice = 8.23,
            Price = 15062.77,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Frozen Shrimps",
            Category = @"Seafood",
            OrderDate = @"2022-05-27",
            Units = 120,
            UnitPrice = 20.45,
            Price = 2454,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Ice Tea",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 840,
            UnitPrice = 7,
            Price = 5880,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 203,
            ParentID = 2,
            Name = @"Fresh Cheese",
            Category = @"Diary",
            OrderDate = @"2022-05-27",
            Units = 267,
            UnitPrice = 16.55,
            Price = 4418.85,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 204,
            ParentID = 2,
            Name = @"Carrots",
            Category = @"Vegetables",
            OrderDate = @"2022-05-27",
            Units = 360,
            UnitPrice = 2.77,
            Price = 997.2,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 205,
            ParentID = 2,
            Name = @"Apple Juice",
            Category = @"Beverages",
            OrderDate = @"2022-05-27",
            Units = 244,
            UnitPrice = 5.38,
            Price = 1312.72,
            Delivered = false
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Order 3",
            Category = @"",
            OrderDate = @"2022-08-04",
            Units = 1972,
            UnitPrice = 3.47,
            Price = 6849.18,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Skimmed Milk 1L",
            Category = @"Diary",
            OrderDate = @"2022-08-04",
            Units = 1028,
            UnitPrice = 3.56,
            Price = 3659.68,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Bananas 5 Pack",
            Category = @"Fruit",
            OrderDate = @"2022-08-04",
            Units = 370,
            UnitPrice = 6.36,
            Price = 2353.2,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Cauliflower",
            Category = @"Vegetables",
            OrderDate = @"2022-08-04",
            Units = 283,
            UnitPrice = 0.95,
            Price = 268.85,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"White Chocolate Cookies",
            Category = @"Cookies",
            OrderDate = @"2022-08-04",
            Units = 291,
            UnitPrice = 1.95,
            Price = 567.45,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 4,
            ParentID = -1,
            Name = @"Order 4",
            Category = @"",
            OrderDate = @"2023-01-04",
            Units = 1065,
            UnitPrice = 5.56,
            Price = 5923.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 401,
            ParentID = 4,
            Name = @"Mini Milk Chocolate Cookie Bites",
            Category = @"Cookies",
            OrderDate = @"2023-01-04",
            Units = 68,
            UnitPrice = 2.25,
            Price = 153,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 402,
            ParentID = 4,
            Name = @"Wild Salmon Fillets",
            Category = @"Seafood",
            OrderDate = @"2023-01-04",
            Units = 320,
            UnitPrice = 16.15,
            Price = 5168,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 403,
            ParentID = 4,
            Name = @"Diet Lemonade",
            Category = @"Beverages",
            OrderDate = @"2023-01-04",
            Units = 437,
            UnitPrice = 0.5,
            Price = 218.5,
            Delivered = true
        });
        this.Add(new OrdersTreeDataItem()
        {
            ID = 404,
            ParentID = 4,
            Name = @"Potatoes",
            Category = @"Vegetables",
            OrderDate = @"2023-01-04",
            Units = 240,
            UnitPrice = 1.6,
            Price = 384,
            Delivered = true
        });
    }
}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(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
            AutoGenerate="false"
            Data="OrdersTreeData"
            PrimaryKey="ID"
            ForeignKey="ParentID"
        >
            <IgbGridToolbar @ref="toolbar">
                <IgbButton @onclick="ShowProgress">
                  Simulate long running operation
                </IgbButton>
                <IgbGridToolbarActions>
                  <IgbGridToolbarExporter></IgbGridToolbarExporter>
                </IgbGridToolbarActions>
            </IgbGridToolbar>

            <IgbColumn
                Field="ID"
                Header="Order ID"
                DataType="GridColumnDataType.String"
            ></IgbColumn>
            <IgbColumn
                Field="Name"
                Header="Order Product"
                DataType="GridColumnDataType.String"
            ></IgbColumn>
            <IgbColumn
                Field="Category"
                Header="Category"
                DataType="GridColumnDataType.String"
            ></IgbColumn>
            <IgbColumn
                Field="Units"
                Header="Units"
                DataType="GridColumnDataType.Number"
            ></IgbColumn>
            <IgbColumn
                Field="UnitPrice"
                Header="Unit Price"
                DataType="GridColumnDataType.Currency"
            ></IgbColumn>
            <IgbColumn
                Field="Price"
                Header="Price"
                DataType="GridColumnDataType.Currency"
            ></IgbColumn>
            <IgbColumn
                Field="OrderDate"
                Header="Order Date"
                DataType="GridColumnDataType.Date"
            ></IgbColumn>
        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private IgbGridToolbar toolbar;

    private async void ShowProgress()
    {
        this.toolbar.ShowProgress = true;

        await Task.Delay(5000);

        this.toolbar.ShowProgress = false;
    }

    private OrdersTreeData _ordersTreeData = null;
    public OrdersTreeData OrdersTreeData
    {
        get
        {
            if (_ordersTreeData == null)
            {
                _ordersTreeData = new OrdersTreeData();
            }
            return _ordersTreeData;
        }
    }
}razorコピー

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

Custom Content

도구 모음 구성 요소의 작업 부분이 특정 사용 사례에 충분하지 않은 경우 도구 모음 자체에는 사용자가 추가 UI를 제공할 수 있는 일반 콘텐츠 프로젝션이 있습니다. 사용자가 API 호출 또는 바인딩을 위해 해당 그리드 인스턴스가 필요한 경우 템플릿 참조 변수를 만들 수 있습니다.

다음은 샘플 스니펫입니다.

<IgbTreeGrid>
    <IgbGridToolbar>
        <IgbGridToolbarTitle>title</IgbGridToolbarTitle>
        @*
            Everything between the toolbar tags except the default toolbar components
            will be projected as custom content.
        *@
        <IgbGridToolbarActions>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>
razor

다음 샘플은 열 헤더를 클릭하여 정렬 설정을 지우기 위해 도구 모음에 추가 버튼을 추가하는 방법을 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatAvatarsItem
{
    public double Age { get; set; }
    public string Avatar { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatAvatars
    : List<EmployeesFlatAvatarsItem>
{
    public EmployeesFlatAvatars()
    {
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 55,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/5.jpg",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 42,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/4.jpg",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 49,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/2.jpg",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 61,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/4.jpg",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 43,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/1.jpg",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 29,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/2.jpg",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 31,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/3.jpg",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 35,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/3.jpg",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/6.jpg",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/7.jpg",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/1.jpg",
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/8.jpg",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/9.jpg",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 50,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/10.jpg",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 27,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/5.jpg",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/6.jpg",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/26.jpg",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/27.jpg",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}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(IgbTreeGridModule),
                typeof(IgbAvatarModule)
            );
            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="EmployeesFlatAvatars"
            PrimaryKey="ID"
            ForeignKey="ParentID"
        >
            <IgbGridToolbar>
                <IgbGridToolbarTitle>
                    <span>Tree Grid Toolbar</span>
                </IgbGridToolbarTitle>
                <IgbButton @onclick="ClearSort">
                    <span slot="prefix">
                        <IgbIcon @ref="iconRef" IconName="clear" Collection="material"></IgbIcon>
                    </span>
                    Clear Sort
                </IgbButton>
                <IgbGridToolbarActions>
                    <IgbGridToolbarHiding></IgbGridToolbarHiding>
                    <IgbGridToolbarPinning></IgbGridToolbarPinning>
                    <IgbGridToolbarExporter></IgbGridToolbarExporter>
                </IgbGridToolbarActions>
            </IgbGridToolbar>

            <IgbColumn
                Field="Name"
                DataType="GridColumnDataType.String"
                BodyTemplateScript="WebTreeGridAvatarCellTemplate"
            ></IgbColumn>
            <IgbColumn
                Field="Title"
                DataType="GridColumnDataType.String"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="ID"
                DataType="GridColumnDataType.Number"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="Age"
                DataType="GridColumnDataType.Number"
                Sortable="true"
            ></IgbColumn>
            <IgbColumn
                Field="HireDate"
                DataType="GridColumnDataType.Date"
                Sortable="true"
            ></IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private string clearIcon = "<svg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'><path d='m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z'/></svg>";

    private IgbTreeGrid treeGrid;
    private IgbIcon iconRef;

    protected override void OnAfterRender(bool firstRender)
    {
        if (this.iconRef != null && firstRender)
        {
            this.iconRef.EnsureReady().ContinueWith(new Action<Task>((e) =>
            {
                this.iconRef.RegisterIconFromText("clear", clearIcon, "material");
            }));
        }
    }

    private void ClearSort()
    {
        this.treeGrid.ClearSort("");
    }

    private EmployeesFlatAvatars _employeesFlatAvatars = null;
    public EmployeesFlatAvatars EmployeesFlatAvatars
    {
        get
        {
            if (_employeesFlatAvatars == null)
            {
                _employeesFlatAvatars = new EmployeesFlatAvatars();
            }
            return _employeesFlatAvatars;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridAvatarCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="display: flex; align-items: center;">
    <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
    </igc-avatar>
    <span style="margin-left: 30px;">${ctx.cell.value}</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-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css

Demo

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

using System;
using System.Collections.Generic;
public class EmployeesFlatAvatarsItem
{
    public double Age { get; set; }
    public string Avatar { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatAvatars
    : List<EmployeesFlatAvatarsItem>
{
    public EmployeesFlatAvatars()
    {
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 55,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/5.jpg",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Title = @"Development Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 42,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/4.jpg",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Title = @"CEO"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 49,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/2.jpg",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Title = @"Accounting Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 61,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/4.jpg",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Title = @"Localization Manager"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 43,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/1.jpg",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 29,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/2.jpg",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 31,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/3.jpg",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Title = @"Software Development Team Lead"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 35,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/3.jpg",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/6.jpg",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Title = @"Senior Software Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/7.jpg",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/1.jpg",
            HireDate = @"2017-11-09",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Title = @"Vice President"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/8.jpg",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Title = @"Director"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 44,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/9.jpg",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Title = @"Senior Accountant"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 50,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/10.jpg",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 27,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/5.jpg",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Title = @"Senior Localization Developer"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/women/6.jpg",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 39,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/26.jpg",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Title = @"Localization Intern"
        });
        this.Add(new EmployeesFlatAvatarsItem()
        {
            Age = 25,
            Avatar = @"https://static.infragistics.com/xplatform/images/people/men/27.jpg",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Title = @"Localization Intern"
        });
    }
}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(IgbTreeGridModule),
                typeof(IgbAvatarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

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

#grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="EmployeesFlatAvatars"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        AllowAdvancedFiltering="true">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarAdvancedFiltering
                    >
                    </IgbGridToolbarAdvancedFiltering>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarExporter
                    >
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            BodyTemplateScript="WebTreeGridAvatarCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

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

            <IgbColumn
            Field="ID"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

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

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid grid;
    private IgbColumn column1;

    private EmployeesFlatAvatars _employeesFlatAvatars = null;
    public EmployeesFlatAvatars EmployeesFlatAvatars
    {
        get
        {
            if (_employeesFlatAvatars == null)
            {
                _employeesFlatAvatars = new EmployeesFlatAvatars();
            }
            return _employeesFlatAvatars;
        }
    }

}razorコピー

igRegisterScript("WebTreeGridAvatarCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="display: flex; align-items: center;">
    <igc-avatar shape="circle" src="${ctx.cell.row.data.Avatar}">
    </igc-avatar>
    <span style="margin-left: 30px;">${ctx.cell.value}</span>
</div>`;
}, false);

jsコピー

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

#grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}

cssコピー

API References

Grid Toolbar 서비스에는 아래에 나열된 몇 가지 API가 더 있습니다.

• IgbGridToolbarAdvancedFiltering

• IgbGridToolbar

• IgbGridToolbarExporter

• IgbGridToolbarHiding

• IgbGridToolbarPinning

• IgbGridToolbarTitle

• IgbTreeGrid Events:

• ToolbarExporting

Additional Resources

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

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