Excel Filtering in Blazor Tree Grid

The Blazor Tree Grid exposes an Excel-style filtering feature that provides an Excel-like filtering UI. It simplifies the process of working with large datasets. The main idea is to help them filter the data that is most relevant, while eliminating irrelevant entries.

Blazor Tree Grid Excel Style Filtering 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(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class FoodsDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public double UnitPrice { get; set; }
    public string AddedDate { get; set; }
    public bool Discontinued { get; set; }
}

public class FoodsData
    : List<FoodsDataItem>
{
    public FoodsData()
    {
        this.Add(new FoodsDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Foods",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chef Antons Gumbo Mix",
            UnitPrice = 21.35,
            AddedDate = @"2011-11-11",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Grandmas Boysenberry Spread",
            UnitPrice = 25,
            AddedDate = @"2017-12-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Uncle Bobs Organic Dried Pears",
            UnitPrice = 30,
            AddedDate = @"2016-07-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Mishi Kobe Niku",
            UnitPrice = 97,
            AddedDate = @"2010-02-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Queso Cabrales",
            UnitPrice = 21,
            AddedDate = @"2009-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 106,
            ParentID = 1,
            Name = @"Queso Manchego La Pastora",
            UnitPrice = 38,
            AddedDate = @"2015-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 107,
            ParentID = 1,
            Name = @"Konbu",
            UnitPrice = 6,
            AddedDate = @"2025-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 108,
            ParentID = 1,
            Name = @"Tofu",
            UnitPrice = 23.25,
            AddedDate = @"2019-06-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 109,
            ParentID = 1,
            Name = @"Ikura",
            UnitPrice = 31,
            AddedDate = @"2010-05-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 110,
            ParentID = 1,
            Name = @"Pavlova",
            UnitPrice = 17.45,
            AddedDate = @"2018-03-28",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 111,
            ParentID = 1,
            Name = @"Alice Mutton",
            UnitPrice = 39,
            AddedDate = @"2015-08-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 112,
            ParentID = 1,
            Name = @"Carnarvon Tigers",
            UnitPrice = 62.5,
            AddedDate = @"2015-09-27",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 113,
            ParentID = 1,
            Name = @"Teatime Chocolate Biscuits",
            UnitPrice = 9.2,
            AddedDate = @"2011-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Beverages",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Chai",
            UnitPrice = 18,
            AddedDate = @"2012-02-12",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Chang",
            UnitPrice = 19,
            AddedDate = @"2013-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Sauces",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Aniseed Syrup",
            UnitPrice = 10,
            AddedDate = @"2016-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Chef Antons Cajun Seasoning",
            UnitPrice = 22,
            AddedDate = @"2012-03-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Northwoods Cranberry Sauce",
            UnitPrice = 40,
            AddedDate = @"2012-01-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"Genen Shouyu",
            UnitPrice = 15.5,
            AddedDate = @"2010-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 305,
            ParentID = 3,
            Name = @"Sir Rodneys Marmalade",
            UnitPrice = 18,
            AddedDate = @"2015-03-17",
            Discontinued = false
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="WebGrid"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            Name="SizeEditor"
            @ref="sizeEditor"
            Label="Grid Size:"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
            DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
            ChangedScript="WebTreeGridSetGridSize">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Id="treeGrid"
        Name="treeGrid"
        @ref="treeGrid"
        Data="FoodsData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="ID"
            Header="ID"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Product Name"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Unit Price"
            Sortable="true"
            DataType="GridColumnDataType.Currency">
            </IgbColumn>

            <IgbColumn
            Field="AddedDate"
            Header="Added Date"
            Sortable="true"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            DataType="GridColumnDataType.Boolean"
            BodyTemplateScript="WebGridBooleanCellTemplate"
            Name="column1"
            @ref="column1">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            propertyEditor.Target = this.treeGrid;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription sizeEditor;
    private IgbTreeGrid treeGrid;
    private IgbColumn column1;

    private FoodsData _foodsData = null;
    public FoodsData FoodsData
    {
        get
        {
            if (_foodsData == null)
            {
                _foodsData = new FoodsData();
            }
            return _foodsData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.cell.value) {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
    } else {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
    }
}, false);

igRegisterScript("WebTreeGridSetGridSize", (sender, evtArgs) => {
    var newVal = evtArgs.newValue.toLowerCase();
    var grid = document.getElementById("treeGrid");
    grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);

jsCOPY CODE

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

Usage

To turn on the IgbTreeGrid component's Excel-style filtering, two inputs should be set. The AllowFiltering should be set to true and the FilterMode should be set to ExcelStyleFilter value.

<IgbTreeGrid AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" >
</IgbTreeGrid>
razor

Interactions

In order to open the filter menu for a particular column, the Blazor filter icon in the header should be clicked. Additionally, you can use the Ctrl + Shift + L combination on a selected header. If the column can be sorted, pinned, moved, selected or hidden along with the filtering functionality, there will be buttons available for the features that are turned on.

If no filter is applied, all the items in the list will be selected. They can be filtered from the input above the list. In order to filter the data, you can select/deselect the items in the list and either click the Apply button, or press Enter. The filtering applied through the list items creates filter expressions with equals operator and the logic operator between the expressions is OR.

If you type something in the search box and apply the filter, only the items that match the search criteria will be selected. If you want to add items to the currently filtered ones, however, you should select the option Add current selection to filter.

If you want to clear the filter, you can check the Select All option and then click the Apply button.

To apply a filter with different expressions, you can click the Text filter, which will open a sub menu with all available filter operators for the particular column. Selecting one of them will open the custom filter dialog, where you can add as many expressions as you want with different filter and logic operators. There is also a clear button, which can clear the filter.

Configure Menu Features

Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: Sortable, Selected, DisablePinning, DisableHiding.

<IgbTreeGrid AutoGenerate="false" Data="FoodsData" PrimaryKey="ID" ForeignKey="ParentID" Moving="true" AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter">
    <IgbColumn Field="ID" Header="ID">
    </IgbColumn>
    <IgbColumn Field="Name" Header="Product Name" Sortable="true">
    </IgbColumn>
    <IgbColumn Field="UnitPrice" Header="Unit Price" Sortable="false" DataType="GridColumnDataType.Number" DisablePinning="true" DisableHiding="true">
    </IgbColumn>
    <IgbColumn Field="AddedDate" Header="Added Date" Sortable="false" DataType="GridColumnDataType.Date">
    </IgbColumn>
    <IgbColumn Field="Discontinued" DataType="GridColumnDataType.Boolean" BodyTemplateScript="WebGridBooleanCellTemplate" Sortable="true" >
    </IgbColumn>
</IgbTreeGrid>
razor

In the sample below 'Product Name' and 'Discontinued' columns have all three features enabled, 'Unit Price' have all three disabled, 'Added Date' has only pinning and hiding.

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(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class FoodsDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public double UnitPrice { get; set; }
    public string AddedDate { get; set; }
    public bool Discontinued { get; set; }
}

public class FoodsData
    : List<FoodsDataItem>
{
    public FoodsData()
    {
        this.Add(new FoodsDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Foods",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chef Antons Gumbo Mix",
            UnitPrice = 21.35,
            AddedDate = @"2011-11-11",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Grandmas Boysenberry Spread",
            UnitPrice = 25,
            AddedDate = @"2017-12-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Uncle Bobs Organic Dried Pears",
            UnitPrice = 30,
            AddedDate = @"2016-07-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Mishi Kobe Niku",
            UnitPrice = 97,
            AddedDate = @"2010-02-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Queso Cabrales",
            UnitPrice = 21,
            AddedDate = @"2009-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 106,
            ParentID = 1,
            Name = @"Queso Manchego La Pastora",
            UnitPrice = 38,
            AddedDate = @"2015-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 107,
            ParentID = 1,
            Name = @"Konbu",
            UnitPrice = 6,
            AddedDate = @"2025-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 108,
            ParentID = 1,
            Name = @"Tofu",
            UnitPrice = 23.25,
            AddedDate = @"2019-06-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 109,
            ParentID = 1,
            Name = @"Ikura",
            UnitPrice = 31,
            AddedDate = @"2010-05-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 110,
            ParentID = 1,
            Name = @"Pavlova",
            UnitPrice = 17.45,
            AddedDate = @"2018-03-28",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 111,
            ParentID = 1,
            Name = @"Alice Mutton",
            UnitPrice = 39,
            AddedDate = @"2015-08-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 112,
            ParentID = 1,
            Name = @"Carnarvon Tigers",
            UnitPrice = 62.5,
            AddedDate = @"2015-09-27",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 113,
            ParentID = 1,
            Name = @"Teatime Chocolate Biscuits",
            UnitPrice = 9.2,
            AddedDate = @"2011-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Beverages",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Chai",
            UnitPrice = 18,
            AddedDate = @"2012-02-12",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Chang",
            UnitPrice = 19,
            AddedDate = @"2013-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Sauces",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Aniseed Syrup",
            UnitPrice = 10,
            AddedDate = @"2016-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Chef Antons Cajun Seasoning",
            UnitPrice = 22,
            AddedDate = @"2012-03-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Northwoods Cranberry Sauce",
            UnitPrice = 40,
            AddedDate = @"2012-01-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"Genen Shouyu",
            UnitPrice = 15.5,
            AddedDate = @"2010-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 305,
            ParentID = 3,
            Name = @"Sir Rodneys Marmalade",
            UnitPrice = 18,
            AddedDate = @"2015-03-17",
            Discontinued = false
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Data="FoodsData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="ID"
            Header="ID">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Product Name"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Unit Price"
            Sortable="false"
            DataType="GridColumnDataType.Number"
            DisablePinning="true"
            DisableHiding="true">
            </IgbColumn>

            <IgbColumn
            Field="AddedDate"
            Header="Added Date"
            Sortable="false"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            DataType="GridColumnDataType.Boolean"
            BodyTemplateScript="WebGridBooleanCellTemplate"
            Sortable="true"
            Name="column1"
            @ref="column1">
            </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 FoodsData _foodsData = null;
    public FoodsData FoodsData
    {
        get
        {
            if (_foodsData == null)
            {
                _foodsData = new FoodsData();
            }
            return _foodsData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.cell.value) {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
    } else {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
    }
}, false);

jsCOPY CODE

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

Templates

If you want to further customize the Excel style filter menu, you can use the ExcelStyleHeaderIconTemplate property to define a custom template for the header icon of the menu.

The following code demonstrates how to customize the Excel style filter menu using the ExcelStyleHeaderIconTemplate:

<IgbTreeGrid
    Data="Data"    
    AllowFiltering="true"
    FilterMode="FilterMode.ExcelStyleFilter"
    ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
</IgbTreeGrid>

*** In JavaScript ***
igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
    var html = window.igTemplating.html;
        return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);
razor

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(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class FoodsDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public double UnitPrice { get; set; }
    public string AddedDate { get; set; }
    public bool Discontinued { get; set; }
}

public class FoodsData
    : List<FoodsDataItem>
{
    public FoodsData()
    {
        this.Add(new FoodsDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Foods",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chef Antons Gumbo Mix",
            UnitPrice = 21.35,
            AddedDate = @"2011-11-11",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Grandmas Boysenberry Spread",
            UnitPrice = 25,
            AddedDate = @"2017-12-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Uncle Bobs Organic Dried Pears",
            UnitPrice = 30,
            AddedDate = @"2016-07-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Mishi Kobe Niku",
            UnitPrice = 97,
            AddedDate = @"2010-02-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Queso Cabrales",
            UnitPrice = 21,
            AddedDate = @"2009-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 106,
            ParentID = 1,
            Name = @"Queso Manchego La Pastora",
            UnitPrice = 38,
            AddedDate = @"2015-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 107,
            ParentID = 1,
            Name = @"Konbu",
            UnitPrice = 6,
            AddedDate = @"2025-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 108,
            ParentID = 1,
            Name = @"Tofu",
            UnitPrice = 23.25,
            AddedDate = @"2019-06-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 109,
            ParentID = 1,
            Name = @"Ikura",
            UnitPrice = 31,
            AddedDate = @"2010-05-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 110,
            ParentID = 1,
            Name = @"Pavlova",
            UnitPrice = 17.45,
            AddedDate = @"2018-03-28",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 111,
            ParentID = 1,
            Name = @"Alice Mutton",
            UnitPrice = 39,
            AddedDate = @"2015-08-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 112,
            ParentID = 1,
            Name = @"Carnarvon Tigers",
            UnitPrice = 62.5,
            AddedDate = @"2015-09-27",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 113,
            ParentID = 1,
            Name = @"Teatime Chocolate Biscuits",
            UnitPrice = 9.2,
            AddedDate = @"2011-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Beverages",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Chai",
            UnitPrice = 18,
            AddedDate = @"2012-02-12",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Chang",
            UnitPrice = 19,
            AddedDate = @"2013-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Sauces",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Aniseed Syrup",
            UnitPrice = 10,
            AddedDate = @"2016-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Chef Antons Cajun Seasoning",
            UnitPrice = 22,
            AddedDate = @"2012-03-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Northwoods Cranberry Sauce",
            UnitPrice = 40,
            AddedDate = @"2012-01-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"Genen Shouyu",
            UnitPrice = 15.5,
            AddedDate = @"2010-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 305,
            ParentID = 3,
            Name = @"Sir Rodneys Marmalade",
            UnitPrice = 18,
            AddedDate = @"2015-03-17",
            Discontinued = false
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Data="FoodsData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter"
        ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="ID"
            Header="ID"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Product Name"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Unit Price"
            Sortable="true"
            DataType="GridColumnDataType.Currency">
            </IgbColumn>

            <IgbColumn
            Field="AddedDate"
            Header="Added Date"
            Sortable="true"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            DataType="GridColumnDataType.Boolean"
            BodyTemplateScript="WebGridBooleanCellTemplate"
            Name="column1"
            @ref="column1">
            </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 FoodsData _foodsData = null;
    public FoodsData FoodsData
    {
        get
        {
            if (_foodsData == null)
            {
                _foodsData = new FoodsData();
            }
            return _foodsData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
    var html = window.igTemplating.html;
        return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);

igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.cell.value) {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
    } else {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
    }
}, 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 to this class:

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}
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(IgbInputModule),
                typeof(IgbGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class FoodsDataItem
{
    public double ID { get; set; }
    public double ParentID { get; set; }
    public string Name { get; set; }
    public double UnitPrice { get; set; }
    public string AddedDate { get; set; }
    public bool Discontinued { get; set; }
}

public class FoodsData
    : List<FoodsDataItem>
{
    public FoodsData()
    {
        this.Add(new FoodsDataItem()
        {
            ID = 1,
            ParentID = -1,
            Name = @"Foods",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 101,
            ParentID = 1,
            Name = @"Chef Antons Gumbo Mix",
            UnitPrice = 21.35,
            AddedDate = @"2011-11-11",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 102,
            ParentID = 1,
            Name = @"Grandmas Boysenberry Spread",
            UnitPrice = 25,
            AddedDate = @"2017-12-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 103,
            ParentID = 1,
            Name = @"Uncle Bobs Organic Dried Pears",
            UnitPrice = 30,
            AddedDate = @"2016-07-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 104,
            ParentID = 1,
            Name = @"Mishi Kobe Niku",
            UnitPrice = 97,
            AddedDate = @"2010-02-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 105,
            ParentID = 1,
            Name = @"Queso Cabrales",
            UnitPrice = 21,
            AddedDate = @"2009-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 106,
            ParentID = 1,
            Name = @"Queso Manchego La Pastora",
            UnitPrice = 38,
            AddedDate = @"2015-11-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 107,
            ParentID = 1,
            Name = @"Konbu",
            UnitPrice = 6,
            AddedDate = @"2025-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 108,
            ParentID = 1,
            Name = @"Tofu",
            UnitPrice = 23.25,
            AddedDate = @"2019-06-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 109,
            ParentID = 1,
            Name = @"Ikura",
            UnitPrice = 31,
            AddedDate = @"2010-05-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 110,
            ParentID = 1,
            Name = @"Pavlova",
            UnitPrice = 17.45,
            AddedDate = @"2018-03-28",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 111,
            ParentID = 1,
            Name = @"Alice Mutton",
            UnitPrice = 39,
            AddedDate = @"2015-08-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 112,
            ParentID = 1,
            Name = @"Carnarvon Tigers",
            UnitPrice = 62.5,
            AddedDate = @"2015-09-27",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 113,
            ParentID = 1,
            Name = @"Teatime Chocolate Biscuits",
            UnitPrice = 9.2,
            AddedDate = @"2011-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 2,
            ParentID = -1,
            Name = @"Beverages",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 201,
            ParentID = 2,
            Name = @"Chai",
            UnitPrice = 18,
            AddedDate = @"2012-02-12",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 202,
            ParentID = 2,
            Name = @"Chang",
            UnitPrice = 19,
            AddedDate = @"2013-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 3,
            ParentID = -1,
            Name = @"Sauces",
            UnitPrice = 0,
            AddedDate = @"2009-06-19",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 301,
            ParentID = 3,
            Name = @"Aniseed Syrup",
            UnitPrice = 10,
            AddedDate = @"2016-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 302,
            ParentID = 3,
            Name = @"Chef Antons Cajun Seasoning",
            UnitPrice = 22,
            AddedDate = @"2012-03-17",
            Discontinued = true
        });
        this.Add(new FoodsDataItem()
        {
            ID = 303,
            ParentID = 3,
            Name = @"Northwoods Cranberry Sauce",
            UnitPrice = 40,
            AddedDate = @"2012-01-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 304,
            ParentID = 3,
            Name = @"Genen Shouyu",
            UnitPrice = 15.5,
            AddedDate = @"2010-03-17",
            Discontinued = false
        });
        this.Add(new FoodsDataItem()
        {
            ID = 305,
            ParentID = 3,
            Name = @"Sir Rodneys Marmalade",
            UnitPrice = 18,
            AddedDate = @"2015-03-17",
            Discontinued = false
        });
    }
}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-filtering-row-background: #ffcd0f;
    --ig-button-background: #FFCD0F;
    --ig-button-foreground: #292826;
    --ig-button-hover-background: #292826;
    --ig-button-hover-foreground: #ffcd0f;

    --ig-list-background: #FFCD0F;
    --ig-list-item-background: #FFCD0F;
    --ig-list-item-background-hover: #c2b1b1bd;

    --ig-checkbox-empty-color: #292826;
    --ig-checkbox-fill-color: #292826;
    --ig-checkbox-tick-color: #FFCD0F;
    --ig-checkbox-label-color: #292826;

    --ig-drop-down-background-color: #FFCD0F;
    --ig-drop-down-item-text-color: #292826;
    --ig-drop-down-item-background: #FFCD0F;
    --ig-drop-down-item-text-color: #292826;
    --ig-drop-down-focused-item-background: #c2b1b1bd;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="grid"
        @ref="grid"
        Id="grid"
        Data="FoodsData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        Moving="true"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter">
            <IgbColumn
            Field="ID"
            Header="ID"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Product Name"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="UnitPrice"
            Header="Unit Price"
            Sortable="true"
            DataType="GridColumnDataType.Currency">
            </IgbColumn>

            <IgbColumn
            Field="AddedDate"
            Header="Added Date"
            Sortable="true"
            DataType="GridColumnDataType.Date">
            </IgbColumn>

            <IgbColumn
            Field="Discontinued"
            DataType="GridColumnDataType.Boolean"
            BodyTemplateScript="WebGridBooleanCellTemplate"
            Name="column1"
            @ref="column1">
            </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 FoodsData _foodsData = null;
    public FoodsData FoodsData
    {
        get
        {
            if (_foodsData == null)
            {
                _foodsData = new FoodsData();
            }
            return _foodsData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.cell.value) {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
    } else {
        return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
    }
}, false);

jsCOPY CODE

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

#grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-button-background: #FFCD0F;
    --ig-button-foreground: #292826;
    --ig-button-hover-background: #292826;
    --ig-button-hover-foreground: #ffcd0f;

    --ig-list-background: #FFCD0F;
    --ig-list-item-background: #FFCD0F;
    --ig-list-item-background-hover: #c2b1b1bd;

    --ig-checkbox-empty-color: #292826;
    --ig-checkbox-fill-color: #292826;
    --ig-checkbox-tick-color: #FFCD0F;
    --ig-checkbox-label-color: #292826;

    --ig-drop-down-background-color: #FFCD0F;
    --ig-drop-down-item-text-color: #292826;
    --ig-drop-down-item-background: #FFCD0F;
    --ig-drop-down-item-text-color: #292826;
    --ig-drop-down-focused-item-background: #c2b1b1bd;
}

cssCOPY CODE

API References

• IgbColumn
• IgbTreeGrid

Additional Resources

Our community is active and always welcoming to new ideas.

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