Blazor Tree Grid Column Hiding

The Ignite UI for Blazor has a built-in column hiding UI, which can be used through the Blazor Tree Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The Blazor Tree Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and to eliminate the need for tabbing through redundant fields.

Blazor Tree Grid Column Hiding Example

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

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Obere Str. 57", Age = 55, City = @"Berlin", Country = @"Germany", Fax = @"030-0076545", HireDate = @"2008-03-20", ID = 1, Name = @"Johnathan Winchester", ParentID = -1, Phone = @"030-0074321", PostalCode = 12209, Title = @"Development Manager", LastName = @"Winchester", FullAddress = @"Obere Str. 57, Berlin, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Avda. de la Constitución 2222", Age = 42, City = @"México D.F.", Country = @"Mexico", Fax = @"(51) 555-3745", HireDate = @"2014-01-22", ID = 4, Name = @"Ana Sanders", ParentID = -1, Phone = @"(5) 555-4729", PostalCode = 5021, Title = @"CEO", LastName = @"Sanders", FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Mataderos 2312", Age = 49, City = @"México D.F.", Country = @"Mexico", Fax = @"(5) 555-3995", HireDate = @"2014-01-22", ID = 18, Name = @"Victoria Lincoln", ParentID = -1, Phone = @"(5) 555-3932", PostalCode = 5023, Title = @"Accounting Manager", LastName = @"Lincoln", FullAddress = @"Mataderos 2312, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"120 Hanover Sq.", Age = 61, City = @"London", Country = @"UK", Fax = @"(171) 555-6750", HireDate = @"2010-01-01", ID = 10, Name = @"Yang Wang", ParentID = -1, Phone = @"(171) 555-7788", PostalCode = 39000, Title = @"Localization Manager", LastName = @"Wang", FullAddress = @"120 Hanover Sq., London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Berguvsvägen 8", Age = 43, City = @"Luleå", Country = @"Sweden", Fax = @"0921-12 34 67", HireDate = @"2011-06-03", ID = 3, Name = @"Michael Burke", ParentID = 1, Phone = @"0921-12 34 65", PostalCode = 29000, Title = @"Senior Software Developer", LastName = @"Burke", FullAddress = @"Berguvsvägen 8, Luleå, Sweden" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Forsterstr. 57", Age = 29, City = @"Mannheim", Country = @"Germany", Fax = @"0621-08924", HireDate = @"2009-06-19", ID = 2, Name = @"Thomas Anderson", ParentID = 1, Phone = @"0621-08460", PostalCode = 68306, Title = @"Senior Software Developer", LastName = @"Anderson", FullAddress = @"Forsterstr. 57, Mannheim, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"24, place Kléber", Age = 31, City = @"Strasbourg", Country = @"France", Fax = @"88.60.15.32", HireDate = @"2014-08-18", ID = 11, Name = @"Monica Reyes", ParentID = 1, Phone = @"88.60.15.31", PostalCode = 67000, Title = @"Software Development Team Lead", LastName = @"Reyes", FullAddress = @"24, place Kléber, Strasbourg, France" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"C/ Araquil, 67", Age = 35, City = @"Madrid", Country = @"Spain", Fax = @"(911) 555 91 99", HireDate = @"2015-09-17", ID = 6, Name = @"Roland Mendel", ParentID = 11, Phone = @"(91) 555 22 82", PostalCode = 28023, Title = @"Senior Software Developer", LastName = @"Mendel", FullAddress = @"C/ Araquil, 67, Madrid, Spain" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"12, rue des Bouchers", Age = 44, City = @"Marseille", Country = @"France", Fax = @"91.24.45.41", HireDate = @"2009-10-11", ID = 12, Name = @"Sven Cooper", ParentID = 11, Phone = @"91.24.45.40", PostalCode = 13008, Title = @"Senior Software Developer", LastName = @"Cooper", FullAddress = @"12, rue des Bouchers, Marseille, France" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"23 Tsawassen Blvd.", Age = 44, City = @"Tsawassen", Country = @"Canada", Fax = @"(604) 555-3745", HireDate = @"2014-04-04", ID = 14, Name = @"Laurence Johnson", ParentID = 4, Phone = @"(604) 555-4729", PostalCode = 19000, Title = @"Director", LastName = @"Johnson", FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Fauntleroy Circus", Age = 25, City = @"London", Country = @"UK", Fax = @"(125) 555-3798", HireDate = @"2017-11-9", ID = 5, Name = @"Elizabeth Richards", ParentID = 4, Phone = @"(171) 555-1212", PostalCode = 30000, Title = @"Vice President", LastName = @"Richards", FullAddress = @"Fauntleroy Circus, London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Cerrito 333", Age = 39, City = @"Buenos Aires", Country = @"Argentina", Fax = @"(121) 135-4892", HireDate = @"2010-03-22", ID = 13, Name = @"Trevor Ashworth", ParentID = 5, Phone = @"(1) 135-5555", PostalCode = 1010, Title = @"Director", LastName = @"Ashworth", FullAddress = @"Cerrito 333, Buenos Aires, Argentina" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Sierras de Granada 9993", Age = 44, City = @"México D.F.", Country = @"Mexico", Fax = @"(153) 555-7293", HireDate = @"2014-04-04", ID = 17, Name = @"Antonio Moreno", ParentID = 18, Phone = @"(5) 555-3392", PostalCode = 5022, Title = @"Senior Accountant", LastName = @"Moreno", FullAddress = @"Sierras de Granada 9993, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Hauptstr. 29", Age = 50, City = @"Sao Paulo", Country = @"Brazil", Fax = @"(531) 555-6691", HireDate = @"2007-11-18", ID = 7, Name = @"Pedro Rodriguez", ParentID = 10, Phone = @"0452-076545", PostalCode = 3012, Title = @"Senior Localization Developer", LastName = @"Rodriguez", FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Av. dos Lusíadas, 23", Age = 27, City = @"Bern", Country = @"Switzerland", Fax = @"(271) 335-357", HireDate = @"2016-02-19", ID = 8, Name = @"Casey Harper", ParentID = 10, Phone = @"(11) 555-7647", PostalCode = 40000, Title = @"Senior Localization", LastName = @"Harper", FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Berkeley Gardens 12", Age = 25, City = @"London", Country = @"UK", Fax = @"(171) 555-9199", HireDate = @"2017-11-09", ID = 15, Name = @"Patricia Simpson", ParentID = 7, Phone = @"(171) 555-2282", PostalCode = 26000, Title = @"Localization Intern", LastName = @"Simpson", FullAddress = @"Berkeley Gardens 12, London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Walserweg 21", Age = 39, City = @"Aachen", Country = @"Germany", Fax = @"0241-059428", HireDate = @"2010-03-22", ID = 9, Name = @"Francisco Chang", ParentID = 7, Phone = @"0241-039123", PostalCode = 52066, Title = @"Localization Intern", LastName = @"Chang", FullAddress = @"Walserweg 21, Aachen, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"35 King George", Age = 25, City = @"London", Country = @"UK", Fax = @"(171) 555-3373", HireDate = @"2018-03-18", ID = 16, Name = @"Peter Lewis", ParentID = 7, Phone = @"(171) 555-0297", PostalCode = 48000, Title = @"Localization Intern", LastName = @"Lewis", FullAddress = @"35 King George, London, UK" });
    }
}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="EmployeesFlatDetails"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        ColumnWidth="200"
        AllowFiltering="true">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    Title="Column Hiding">
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

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

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

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

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

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorCOPY CODE

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

Tree Grid Setup

Let's start by creating our IgbTreeGrid and binding it to our data. We will also enable both filtering and sorting for the columns.

<IgbTreeGrid Data=northwindEmployees AutoGenerate=false Width="100%" Height="100%" AllowFiltering=true>
    <IgbColumn Field="Name" Sortable=true Hidden=true></IgbColumn>
    <IgbColumn Field="ID" Sortable=true Hidden=true></IgbColumn>
    <IgbColumn Field="Title" Sortable=true></IgbColumn>
    <IgbColumn Field="HireDate" Sortable=true></IgbColumn>
    <IgbColumn Field="Age" Sortable=true></IgbColumn>
    <IgbColumn Field="Address" Sortable=true></IgbColumn>
    <IgbColumn Field="City" Sortable=true></IgbColumn>
    <IgbColumn Field="Country" Sortable=true></IgbColumn>
    <IgbColumn Field="Fax" Sortable=true></IgbColumn>
    <IgbColumn Field="PostalCode" Sortable=true></IgbColumn>
    <IgbColumn Field="Phone" Sortable=true></IgbColumn>
</IgbTreeGrid>
razor

Toolbar's Column Hiding UI

The built-in Column Hiding UI is placed inside an DropDown in the IgbTreeGrid's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.

For this purpose all we have to do is set both the IgbGridToolbarActions and the IgbGridToolbarHiding inside of the IgbTreeGrid.

<IgbTreeGrid Data=northwindEmployees>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>
razor

The IgbTreeGrid provides us with some useful properties when it comes to using the toolbar's column hiding UI.

By using the Title property, we will set the title that is displayed inside the dropdown button in the toolbar.

<IgbTreeGrid Data=northwindEmployees>
    <IgbGridToolbar>
        <IgbGridToolbarActions>
            <IgbGridToolbarHiding @ref=HidingAction Title="Column Hiding"></IgbGridToolbarHiding>
        </IgbGridToolbarActions>
    </IgbGridToolbar>
</IgbTreeGrid>
razor

You can see the result of the code from above at the beginning of this article in the Blazor Column Hiding Example section.

Disable hiding of a column

We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their DisableHiding property to true.

<IgbTreeGrid Data=northwindEmployees AutoGenerate=false>
    <IgbColumn Field="Name" Sortable=true DisableHiding=true></IgbColumn>
    <IgbColumn Field="Title" Sortable=true DisableHiding=true></IgbColumn>
</IgbTreeGrid>
razor

Styling

The grid could be further customized by setting some of the available CSS variables. In order to achieve that, we will use a class that we will first assign to the grid:

<IgbTreeGrid Id="treeGrid"></IgbTreeGrid>
razor

Then set the related CSS variables for the related components. We will apply the styles also only on the igx-column-actions, so the rest of the grid is unaffected:

.tree-grid {
    /* Main Column Actions styles */
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;

    /* Checkbox styles */
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;

    /* Input styles */
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;

    /* Buttons styles */
    --ig-button-foreground: #292826;
    --ig-button-background: #ffcd0f;
    --ig-button-hover-background: #404040;
    --ig-button-hover-foreground: #ffcd0f;
    --ig-button-focus-background: #ffcd0f;
    --ig-button-focus-foreground: black;
    --ig-button-focus-visible-background: #ffcd0f;
    --ig-button-focus-visible-foreground: black;
    --ig-button-disabled-foreground: #ffcd0f;
}
css

Demo

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

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Obere Str. 57", Age = 55, City = @"Berlin", Country = @"Germany", Fax = @"030-0076545", HireDate = @"2008-03-20", ID = 1, Name = @"Johnathan Winchester", ParentID = -1, Phone = @"030-0074321", PostalCode = 12209, Title = @"Development Manager", LastName = @"Winchester", FullAddress = @"Obere Str. 57, Berlin, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Avda. de la Constitución 2222", Age = 42, City = @"México D.F.", Country = @"Mexico", Fax = @"(51) 555-3745", HireDate = @"2014-01-22", ID = 4, Name = @"Ana Sanders", ParentID = -1, Phone = @"(5) 555-4729", PostalCode = 5021, Title = @"CEO", LastName = @"Sanders", FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Mataderos 2312", Age = 49, City = @"México D.F.", Country = @"Mexico", Fax = @"(5) 555-3995", HireDate = @"2014-01-22", ID = 18, Name = @"Victoria Lincoln", ParentID = -1, Phone = @"(5) 555-3932", PostalCode = 5023, Title = @"Accounting Manager", LastName = @"Lincoln", FullAddress = @"Mataderos 2312, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"120 Hanover Sq.", Age = 61, City = @"London", Country = @"UK", Fax = @"(171) 555-6750", HireDate = @"2010-01-01", ID = 10, Name = @"Yang Wang", ParentID = -1, Phone = @"(171) 555-7788", PostalCode = 39000, Title = @"Localization Manager", LastName = @"Wang", FullAddress = @"120 Hanover Sq., London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Berguvsvägen 8", Age = 43, City = @"Luleå", Country = @"Sweden", Fax = @"0921-12 34 67", HireDate = @"2011-06-03", ID = 3, Name = @"Michael Burke", ParentID = 1, Phone = @"0921-12 34 65", PostalCode = 29000, Title = @"Senior Software Developer", LastName = @"Burke", FullAddress = @"Berguvsvägen 8, Luleå, Sweden" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Forsterstr. 57", Age = 29, City = @"Mannheim", Country = @"Germany", Fax = @"0621-08924", HireDate = @"2009-06-19", ID = 2, Name = @"Thomas Anderson", ParentID = 1, Phone = @"0621-08460", PostalCode = 68306, Title = @"Senior Software Developer", LastName = @"Anderson", FullAddress = @"Forsterstr. 57, Mannheim, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"24, place Kléber", Age = 31, City = @"Strasbourg", Country = @"France", Fax = @"88.60.15.32", HireDate = @"2014-08-18", ID = 11, Name = @"Monica Reyes", ParentID = 1, Phone = @"88.60.15.31", PostalCode = 67000, Title = @"Software Development Team Lead", LastName = @"Reyes", FullAddress = @"24, place Kléber, Strasbourg, France" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"C/ Araquil, 67", Age = 35, City = @"Madrid", Country = @"Spain", Fax = @"(911) 555 91 99", HireDate = @"2015-09-17", ID = 6, Name = @"Roland Mendel", ParentID = 11, Phone = @"(91) 555 22 82", PostalCode = 28023, Title = @"Senior Software Developer", LastName = @"Mendel", FullAddress = @"C/ Araquil, 67, Madrid, Spain" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"12, rue des Bouchers", Age = 44, City = @"Marseille", Country = @"France", Fax = @"91.24.45.41", HireDate = @"2009-10-11", ID = 12, Name = @"Sven Cooper", ParentID = 11, Phone = @"91.24.45.40", PostalCode = 13008, Title = @"Senior Software Developer", LastName = @"Cooper", FullAddress = @"12, rue des Bouchers, Marseille, France" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"23 Tsawassen Blvd.", Age = 44, City = @"Tsawassen", Country = @"Canada", Fax = @"(604) 555-3745", HireDate = @"2014-04-04", ID = 14, Name = @"Laurence Johnson", ParentID = 4, Phone = @"(604) 555-4729", PostalCode = 19000, Title = @"Director", LastName = @"Johnson", FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Fauntleroy Circus", Age = 25, City = @"London", Country = @"UK", Fax = @"(125) 555-3798", HireDate = @"2017-11-9", ID = 5, Name = @"Elizabeth Richards", ParentID = 4, Phone = @"(171) 555-1212", PostalCode = 30000, Title = @"Vice President", LastName = @"Richards", FullAddress = @"Fauntleroy Circus, London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Cerrito 333", Age = 39, City = @"Buenos Aires", Country = @"Argentina", Fax = @"(121) 135-4892", HireDate = @"2010-03-22", ID = 13, Name = @"Trevor Ashworth", ParentID = 5, Phone = @"(1) 135-5555", PostalCode = 1010, Title = @"Director", LastName = @"Ashworth", FullAddress = @"Cerrito 333, Buenos Aires, Argentina" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Sierras de Granada 9993", Age = 44, City = @"México D.F.", Country = @"Mexico", Fax = @"(153) 555-7293", HireDate = @"2014-04-04", ID = 17, Name = @"Antonio Moreno", ParentID = 18, Phone = @"(5) 555-3392", PostalCode = 5022, Title = @"Senior Accountant", LastName = @"Moreno", FullAddress = @"Sierras de Granada 9993, México D.F., Mexico" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Hauptstr. 29", Age = 50, City = @"Sao Paulo", Country = @"Brazil", Fax = @"(531) 555-6691", HireDate = @"2007-11-18", ID = 7, Name = @"Pedro Rodriguez", ParentID = 10, Phone = @"0452-076545", PostalCode = 3012, Title = @"Senior Localization Developer", LastName = @"Rodriguez", FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Av. dos Lusíadas, 23", Age = 27, City = @"Bern", Country = @"Switzerland", Fax = @"(271) 335-357", HireDate = @"2016-02-19", ID = 8, Name = @"Casey Harper", ParentID = 10, Phone = @"(11) 555-7647", PostalCode = 40000, Title = @"Senior Localization", LastName = @"Harper", FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Berkeley Gardens 12", Age = 25, City = @"London", Country = @"UK", Fax = @"(171) 555-9199", HireDate = @"2017-11-09", ID = 15, Name = @"Patricia Simpson", ParentID = 7, Phone = @"(171) 555-2282", PostalCode = 26000, Title = @"Localization Intern", LastName = @"Simpson", FullAddress = @"Berkeley Gardens 12, London, UK" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"Walserweg 21", Age = 39, City = @"Aachen", Country = @"Germany", Fax = @"0241-059428", HireDate = @"2010-03-22", ID = 9, Name = @"Francisco Chang", ParentID = 7, Phone = @"0241-039123", PostalCode = 52066, Title = @"Localization Intern", LastName = @"Chang", FullAddress = @"Walserweg 21, Aachen, Germany" });
        this.Add(new EmployeesFlatDetailsItem() { Address = @"35 King George", Age = 25, City = @"London", Country = @"UK", Fax = @"(171) 555-3373", HireDate = @"2018-03-18", ID = 16, Name = @"Peter Lewis", ParentID = 7, Phone = @"(171) 555-0297", PostalCode = 48000, Title = @"Localization Intern", LastName = @"Lewis", FullAddress = @"35 King George, London, UK" });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

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

#treeGrid {
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;
    --igx-button-foreground: #292826;
    --igx-button-background: #ffcd0f;
    --igx-button-hover-background: #404040;
    --igx-button-hover-foreground: #ffcd0f;
    --igx-button-focus-background: #ffcd0f;
    --igx-button-focus-foreground: black;
    --igx-button-focus-visible-background: #ffcd0f;
    --igx-button-focus-visible-foreground: black;
    --igx-button-disabled-foreground: #ffcd0f;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatDetails"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        ColumnWidth="200"
        AllowFiltering="true">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarHiding
                    Title="Column Hiding">
                    </IgbGridToolbarHiding>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

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

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

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

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

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorCOPY CODE

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

#treeGrid {
    --ig-column-actions-background-color: #292826;
    --ig-column-actions-title-color: #ffcd0f;
    --ig-checkbox-tick-color: #292826;
    --ig-checkbox-label-color: #ffcd0f;
    --ig-checkbox-empty-color: #ffcd0f;
    --ig-checkbox-fill-color: #ffcd0f;
    --ig-input-group-idle-text-color: white;
    --ig-input-group-filled-text-color: #ffcd0f;
    --ig-input-group-focused-text-color: #ffcd0f;
    --ig-input-group-focused-border-color: #ffcd0f;
    --ig-input-group-focused-secondary-color: #ffcd0f;
    --igx-button-foreground: #292826;
    --igx-button-background: #ffcd0f;
    --igx-button-hover-background: #404040;
    --igx-button-hover-foreground: #ffcd0f;
    --igx-button-focus-background: #ffcd0f;
    --igx-button-focus-foreground: black;
    --igx-button-focus-visible-background: #ffcd0f;
    --igx-button-focus-visible-foreground: black;
    --igx-button-disabled-foreground: #ffcd0f;
}

cssCOPY CODE

API References

In this article we learned how to use the built-in column hiding UI in the IgbTreeGrid's toolbar. The column hiding UI has a few more APIs to explore, which are listed below.

• ColumnActionsComponent

Additional components with relative APIs that were used:

IgbColumn properties:

• DisableHiding

IgbGridToolbar properties:

• showProgress

IgbGridToolbar methods:

• IgbGridToolbarHiding
• IgbGridToolbarActions
• IgbGridToolbarTitle

IgbTreeGrid events:

• ColumnVisibilityChanged

Additional Resources

Our community is active and always welcoming to new ideas.

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