Blazor Tree Grid Toolbar

The Ignite UI for Blazor Toolbar in is a container for UI operations in the Blazor Tree Grid. The Blazor toolbar is located at the top of the Blazor component, i.e., the IgbTreeGrid and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Blazor Tree Grid includes:

• Column Hiding
• Column Pinning
• Excel Exporting
• Advanced Filtering

The toolbar and the predefined UI components support Blazor events and expose API for developers.

Blazor Toolbar Grid Example

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

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"
        });
    }
}csCOPY CODE

@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;
        }
    }

}razorCOPY CODE

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);

jsCOPY CODE

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

The predefined IgbGridToolbarActions and IgbGridToolbarTitle UI components are added inside the IgbGridToolbar and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

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

Of course, each of these UIs can be added independently of each other, or may not be added at all. This way the toolbar container will be rendered empty:

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

For a comprehensive look over each of the default UI components, continue reading the Features section below.

Features

The toolbar is great at separating logic/interactions which affects the grid as a whole.

As shown above, it can be configured to provide default components for controlling, column hiding, column pinning, advanced filtering and exporting data from the grid.

These features can be enabled independently from each other by following a pattern similar to the card component of the Ignite UI for Blazor suite.

Listed below are the main features of the toolbar with example code for each of them.

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

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"
        });
    }
}csCOPY CODE

@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;
        }
    }

}razorCOPY CODE

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;
}jsCOPY CODE

/*
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;
}cssCOPY CODE

Title

Setting a title for the toolbar in your grid is achieved by using the IgbGridToolbarTitle.

Users can provide anything from simple text to more involved templates.

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

Actions

The IgbGridToolbarActions is where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

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

Column Pinning

The IgbGridToolbarPinning component provides the default UI for interacting with column pinning in the grid.

The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

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

Column Hiding

The IgbGridToolbarHiding provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

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

Advanced Filtering

Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button.

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

Data Exporting

As with the rest of the toolbar actions, exporting is provided through a IgbGridToolbarExporter out of the box.

The toolbar exporter component exposes several input properties for customizing both the UI and the exporting experience.

These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the ToolbarExporter.

Here is a snippet showing some of the options which can be customized through the Blazor template:

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

In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

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.

The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:

<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

The following sample demonstrates how to customize the exported files:

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

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"
        });
    }
}csCOPY CODE

@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;
        }
    }

}razorCOPY CODE

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);

jsCOPY CODE

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

Exporting Indicator

When using the default toolbar exporter component, whenever an export operation takes place the toolbar will show a progress indicator while the operation is in progress.

Moreover, users can set the toolbar ShowProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

The sample belows uses has significant amount of data, in order to increase the time needed for data export so the progressbar can be seen. Additionally it has another button that simulates a long running operation in the grid:

EXAMPLE

MODULES

DATA

RAZOR

CSS

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();
        }
    }
}csCOPY CODE

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
        });
    }
}csCOPY CODE

@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;
        }
    }
}razorCOPY CODE

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

Custom Content

If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable.

Here is a sample snippet:

<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

The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

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"
        });
    }
}csCOPY CODE

@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;
        }
    }

}razorCOPY CODE

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);jsCOPY CODE

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

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

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

Then set the related CSS properties for that class:

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

Demo

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

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();
        }
    }
}csCOPY CODE

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"
        });
    }
}csCOPY CODE

@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;
        }
    }

}razorCOPY CODE

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);

jsCOPY CODE

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

cssCOPY CODE

API References

The Grid Toolbar service has a few more APIs to explore, which are listed below.

• IgbGridToolbarAdvancedFiltering
• IgbGridToolbar
• IgbGridToolbarExporter
• IgbGridToolbarHiding
• IgbGridToolbarPinning
• IgbGridToolbarTitle

IgbTreeGrid Events:

• ToolbarExporting

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub