Blazor Tree Grid Toolbar

La barra de herramientas Ignite UI for Blazor es un contenedor para las operaciones de la interfaz de usuario en Blazor Tree Grid. La barra de herramientas Blazor se encuentra en la parte superior del componente Blazor, es decir, IgbTreeGrid, y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede alojar cualquier contenido personalizado o conjunto de controles de interfaz de usuario predefinidos. El conjunto predeterminado para Blazor Tree Grid incluye:

• Ocultación de columna
• Fijación de columnas
• Exportación de Excel
• Filtrado avanzado

La barra de herramientas y los componentes de interfaz de usuario predefinidos admiten eventos Blazor y exponen API para desarrolladores.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.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.

Los componentes predefinidos Actions y Title de la UI se agregan dentro de IgbGridToolbar y todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las funciones de Grid correspondientes:

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

Por supuesto, cada una de estas UI se puede agregar de forma independiente entre sí o puede que no se agreguen en absoluto. De esta manera, el contenedor de la barra de herramientas quedará vacío:

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

Para obtener una visión completa de cada uno de los componentes predeterminados de la interfaz de usuario, continúe leyendo la sección Funciones a continuación.

Características

La barra de herramientas es excelente para separar la lógica/interacciones, lo que afecta a la cuadrícula en su conjunto.

Como se muestra arriba, se puede configurar para proporcionar componentes predeterminados para controlar, ocultar columnas, fijar columnas, filtrar avanzado y exportar datos desde la cuadrícula.

Estas funciones se pueden habilitar de forma independiente una de otra siguiendo un patrón similar al componente de tarjeta de la Ignite UI for Blazor.

A continuación se enumeran las características principales de la barra de herramientas con código de ejemplo para cada una de ellas.

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

Establecer un título para la barra de herramientas en su cuadrícula se logra utilizando IgbGridToolbarTitle.

Los usuarios pueden proporcionar cualquier cosa, desde texto simple hasta plantillas más complejas.

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

Actions

​IgbGridToolbarActions es donde los usuarios pueden colocar acciones/interacciones en relación con la cuadrícula principal. Al igual que con la parte del título de la barra de herramientas, los usuarios pueden proporcionar cualquier cosa dentro de esa parte de la plantilla, incluidos los componentes de interacción predeterminados de la barra de herramientas.

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

Fijación de columnas

El componente IgbGridToolbarPinning proporciona la interfaz de usuario predeterminada para interactuar con la fijación de columnas en la cuadrícula.

El componente está configurado para funcionar desde el primer momento con la cuadrícula principal que contiene la barra de herramientas, así como varias propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.

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

Ocultación de columna

​IgbGridToolbarHiding proporciona la interfaz de usuario predeterminada para interactuar con la ocultación de columnas. Expone las mismas propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.

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

Filtrado avanzado

El componente Filtrado avanzado de la barra de herramientas proporciona la interfaz de usuario predeterminada para la función Filtrado avanzado. El componente expone una forma de cambiar el texto predeterminado del botón.

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

Data Exporting

Al igual que con el resto de las acciones de la barra de herramientas, la exportación se realiza a través de IgbGridToolbarExporter listo para usar.

El componente exportador de la barra de herramientas expone varias propiedades de entrada para personalizar tanto la interfaz de usuario como la experiencia de exportación.

Estos van desde cambiar el texto que se muestra hasta habilitar/deshabilitar opciones en el menú desplegable y personalizar el nombre del archivo generado. Para obtener una referencia completa, consulte la documentación de la API de ToolbarExporter.

A continuación se muestra un fragmento que muestra algunas de las opciones que se pueden personalizar a través de la plantilla Blazor:

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

Además de cambiar el nombre del archivo exportado, el usuario puede configurar aún más las opciones del exportador esperando el evento ToolbarExporting y personalizando la entrada de opciones en las propiedades del evento.

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.

El siguiente fragmento de código demuestra la suscripción al evento de exportación de la barra de herramientas y la configuración de las opciones del exportador:

<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

El siguiente ejemplo demuestra cómo personalizar los archivos exportados:

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

Cuando se utiliza el componente exportador de la barra de herramientas predeterminado, cada vez que se realiza una operación de exportación, la barra de herramientas mostrará un indicador de progreso mientras la operación está en curso.

Además, los usuarios pueden configurar la propiedad ShowProgress la barra de herramientas y utilizarla para sus propias operaciones de larga duración o simplemente como otra forma de indicar una acción que tiene lugar en la cuadrícula.

El ejemplo que se utiliza a continuación tiene una cantidad significativa de datos, a fin de aumentar el tiempo necesario para exportar los datos para que se pueda ver la barra de progreso. Además cuenta con otro botón que simula una operación de larga duración en la red:

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

Si la parte de acciones del componente de la barra de herramientas no es suficiente para un caso de uso particular, la barra de herramientas en sí tiene una proyección de contenido general donde los usuarios pueden proporcionar una interfaz de usuario adicional. Si el usuario necesita la instancia de grid respectiva para llamadas o enlaces de API, puede crear una variable de referencia de plantilla.

Aquí hay un fragmento de muestra:

<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

El siguiente ejemplo demuestra cómo agregar un botón adicional a la barra de herramientas para borrar el conjunto de clasificación haciendo clic en los encabezados de las columnas:

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

Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

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

Luego configure las propiedades CSS relacionadas para esa clase:

.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

El servicio Grid Toolbar tiene algunas API más para explorar, que se enumeran a continuación.

• IgbGridToolbarAdvancedFiltering

• IgbGridToolbar

• IgbGridToolbarExporter

• IgbGridToolbarHiding

• IgbGridToolbarPinning

• IgbGridToolbarTitle

• IgbTreeGrid Events:

• ToolbarExporting

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.

• Ignite UI for Blazor Foros
• Ignite UI for Blazor GitHub