Blazor Tree Grid ツールバー

Ignite UI for Blazor ツールバーは、Blazor Tree Grid の UI 操作用のコンテナーです。Blazor ツールバーは Blazor コンポーネントの一番上、つまり IgbTreeGrid にあり、水平方向のサイズと一致します。ツールバー コンテナーは、任意のカスタム コンテンツまたは事前定義された UI コントロールのセットをホストできます。Blazor Tree Grid のデフォルト セットには次のものが含まれます。

• 列の非表示
• 列のピン固定
• Excel エクスポート
• 高度なフィルタリング

ツールバーと事前定義された UI コンポーネントは、Blazor イベントをサポートし、開発者向けに API を公開します。

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

無料で試してみる

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)
            );
            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コピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

事前定義された 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

上記のコード スニペットに示されているように、事前定義された Actions UI コンポーネントは IgbGridToolbarActions にラップされています。このように、ツールバーのタイトルはツールバーの左側に配置され、アクションはツールバーの右側に配置されます。

これらの 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

操作

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

データのエクスポート

残りのツールバー操作と同様に、エクスポートは、すぐに使用できる IgbGridToolbarExporter を介して提供されます。

ツールバー エクスポーター コンポーネントは、UI とエクスポート エクスペリエンスの両方をカスタマイズするためのいくつかの入力プロパティを公開します。

これらは、表示テキストの変更から、ドロップダウンのオプションの有効化/無効化、生成されたファイルの名前のカスタマイズまで多岐にわたります。完全なリファレンスについては、ToolbarExporter の API ヘルプを参照してください。

これは、Blazor テンプレートを介してカスタマイズできるいくつかのオプションを示すスニペットです。

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

エクスポートされたファイル名を変更することに加えて、ユーザーは ToolbarExporting イベントを待機し、イベント プロパティのオプション エントリをカスタマイズすることで、エクスポーター オプションをさらに構成できます。

デフォルトで CSV にエクスポートした際にエクスポーターがカンマ区切りセパレーターを使用してエクスポートし、出力ファイルに .csv 拡張しを使用します。 エクスポーターのイベントにサブスクライブまたはエクスポーター オプション フィールドの値を変更して、エクスポート パラメーターをカスタマイズできます。 またイベント引数のキャンセル フィールドを 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コピー

エクスポート インジケーター

デフォルトのツールバー エクスポーター コンポーネントを使用する場合、エクスポート操作が行われると、操作の進行中にツールバーに進行状況インジケーターが表示されます。

さらに、ユーザーはツールバーの 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コピー

カスタム コンテンツ

ツールバー コンポーネントのアクション部分が特定のユース ケースに十分でない場合、ツールバー自体には、ユーザーが追加の 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コピー

スタイル設定

定義済みのテーマに加えて、利用可能な 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

デモ

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 リファレンス

以下は、Grid Toolbar サービスのその他の API です。

• IgbGridToolbarAdvancedFiltering

• IgbGridToolbar

• IgbGridToolbarExporter

• IgbGridToolbarHiding

• IgbGridToolbarPinning

• IgbGridToolbarTitle

• IgbTreeGrid イベント:

• ToolbarExporting

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

• Ignite UI for Blazor フォーラム (英語)
• Ignite UI for Blazor GitHub (英語)