Blazor Tree Grid Column Pinning

The Ignite UI for Blazor Column Pinning feature in Blazor Tree Grid enables developers to lock specific columns in a desired order, ensuring visibility all the time even when users scroll horizontally through the IgbTreeGrid. There’s an integrated UI for Column Pinning, accessible via the Blazor Tree Grid toolbar. Additionally, developers have the flexibility to build a custom user interface which changes the pin state of the columns.

Blazor Tree Grid Column Pinning Example

This example demonstrates how you can pin a column or multiple columns to the left or right side of the IgbTreeGrid.

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

using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatData
    : List<EmployeesFlatDataItem>
{
    public EmployeesFlatData()
    {
        this.Add(new EmployeesFlatDataItem() { Age = 55, HireDate = @"2008-03-20", ID = 1, Name = @"Johnathan Winchester", Phone = @"0251-031259", OnPTO = false, ParentID = -1, Title = @"Development Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 42, HireDate = @"2014-01-22", ID = 4, Name = @"Ana Sanders", Phone = @"(21) 555-0091", OnPTO = true, ParentID = -1, Title = @"CEO" });
        this.Add(new EmployeesFlatDataItem() { Age = 49, HireDate = @"2014-01-22", ID = 18, Name = @"Victoria Lincoln", Phone = @"(071) 23 67 22 20", OnPTO = true, ParentID = -1, Title = @"Accounting Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 61, HireDate = @"2010-01-01", ID = 10, Name = @"Yang Wang", Phone = @"(21) 555-0091", OnPTO = false, ParentID = -1, Title = @"Localization Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 43, HireDate = @"2011-06-03", ID = 3, Name = @"Michael Burke", Phone = @"0452-076545", OnPTO = true, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 29, HireDate = @"2009-06-19", ID = 2, Name = @"Thomas Anderson", Phone = @"(14) 555-8122", OnPTO = false, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 31, HireDate = @"2014-08-18", ID = 11, Name = @"Monica Reyes", Phone = @"7675-3425", OnPTO = false, ParentID = 1, Title = @"Software Development Team Lead" });
        this.Add(new EmployeesFlatDataItem() { Age = 35, HireDate = @"2015-09-17", ID = 6, Name = @"Roland Mendel", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2009-10-11", ID = 12, Name = @"Sven Cooper", Phone = @"0695-34 67 21", OnPTO = true, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 14, Name = @"Laurence Johnson", Phone = @"981-443655", OnPTO = false, ParentID = 4, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 5, Name = @"Elizabeth Richards", Phone = @"(2) 283-2951", OnPTO = true, ParentID = 4, Title = @"Vice President" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 13, Name = @"Trevor Ashworth", Phone = @"981-443655", OnPTO = true, ParentID = 5, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 17, Name = @"Antonio Moreno", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 18, Title = @"Senior Accountant" });
        this.Add(new EmployeesFlatDataItem() { Age = 50, HireDate = @"2007-11-18", ID = 7, Name = @"Pedro Rodriguez", Phone = @"035-640230", OnPTO = false, ParentID = 10, Title = @"Senior Localization Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 27, HireDate = @"2016-02-19", ID = 8, Name = @"Casey Harper", Phone = @"0342-023176", OnPTO = true, ParentID = 10, Title = @"Senior Localization" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 15, Name = @"Patricia Simpson", Phone = @"069-0245984", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 9, Name = @"Francisco Chang", Phone = @"(91) 745 6200", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2018-03-18", ID = 16, Name = @"Peter Lewis", Phone = @"069-0245984", OnPTO = true, 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="EmployeesFlatData"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

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

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

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

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

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

            <IgbColumn
            Field="OnPTO"
            DataType="GridColumnDataType.Boolean">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;

    private EmployeesFlatData _employeesFlatData = null;
    public EmployeesFlatData EmployeesFlatData
    {
        get
        {
            if (_employeesFlatData == null)
            {
                _employeesFlatData = new EmployeesFlatData();
            }
            return _employeesFlatData;
        }
    }

}razorCOPY CODE

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

Column Pinning API

Column pinning is controlled through the Pinned property of the IgbColumn. Pinned columns are rendered on the left side of the IgbTreeGrid by default and stay fixed through horizontal scrolling of the unpinned columns in the IgbTreeGrid body.

You may also use the IgbTreeGrid's PinColumn or UnpinColumn methods of the IgbTreeGrid to pin or unpin columns by their field name:

Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state.

A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the ColumnPin event and changing the InsertAtIndex property of the event arguments to the desired position index.

A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the ColumnPinScript event and providing a JavaScript function for changing the InsertAtIndex property of the event arguments to the desired position index.

<IgbTreeGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>


//In JavaScript
function onColumnPin(e) {
    if (e.detail.column.field == "Country") {
        e.detail.insertAtIndex = 0;
    }
}

igRegisterScript("onColumnPin", onColumnPin, false);
razor

Pinning Position

You can change the column pinning position via the Pinning configuration option. It allows you to set the columns position to either Start or End. When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.

<IgbTreeGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbTreeGrid>

@code {
    private IgbPinningConfig pinningConfig = new() {
        Columns = ColumnPinningPosition.End
    };
}
razor

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(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"
        Pinning="PinningConfig1">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Width="250">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            Width="300"
            Pinned="true">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            Header="Hire Date"
            DataType="GridColumnDataType.Date"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            Width="100">
            </IgbColumn>

            <IgbColumn
            Field="Address"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="City"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="Country"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="Fax"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="PostalCode"
            Header="Postal Code"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            Width="200">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;
    private IgbPinningConfig _pinningConfig1 = null;
    public IgbPinningConfig PinningConfig1
    {
        get
        {
            if (this._pinningConfig1 == null)
            {
                var pinningConfig1 = new IgbPinningConfig();
                pinningConfig1.Columns = ColumnPinningPosition.End;
                this._pinningConfig1 = pinningConfig1;
            }
            return this._pinningConfig1;
        }
    }

    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

Custom Column Pinning UI

You can define your custom UI and change the pin state of the columns via the related API.

Let's say that instead of a toolbar you would like to define pin icons in the column headers that the end user can click to change the particular column's pin state.

This can be done by creating a header template for the columns with a custom icon.

<IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Data="EmployeesFlatData" PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumn Field="Name" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>

    <IgbColumn Field="Title" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column2" @ref="column2"></IgbColumn>
        
    <IgbColumn Field="Phone" DataType="String"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column3" @ref="column3"></IgbColumn>
            
    <IgbColumn Field="Age" DataType="Number"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column4" @ref="column4"></IgbColumn>
            
    <IgbColumn Field="HireDate" DataType="Date"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column5" @ref="column5"></IgbColumn>
            
    <IgbColumn Field="OnPTO" DataType="Boolean"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
</IgbTreeGrid> 


// In JavaScript

igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-tree-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);
razor

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

using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatData
    : List<EmployeesFlatDataItem>
{
    public EmployeesFlatData()
    {
        this.Add(new EmployeesFlatDataItem() { Age = 55, HireDate = @"2008-03-20", ID = 1, Name = @"Johnathan Winchester", Phone = @"0251-031259", OnPTO = false, ParentID = -1, Title = @"Development Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 42, HireDate = @"2014-01-22", ID = 4, Name = @"Ana Sanders", Phone = @"(21) 555-0091", OnPTO = true, ParentID = -1, Title = @"CEO" });
        this.Add(new EmployeesFlatDataItem() { Age = 49, HireDate = @"2014-01-22", ID = 18, Name = @"Victoria Lincoln", Phone = @"(071) 23 67 22 20", OnPTO = true, ParentID = -1, Title = @"Accounting Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 61, HireDate = @"2010-01-01", ID = 10, Name = @"Yang Wang", Phone = @"(21) 555-0091", OnPTO = false, ParentID = -1, Title = @"Localization Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 43, HireDate = @"2011-06-03", ID = 3, Name = @"Michael Burke", Phone = @"0452-076545", OnPTO = true, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 29, HireDate = @"2009-06-19", ID = 2, Name = @"Thomas Anderson", Phone = @"(14) 555-8122", OnPTO = false, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 31, HireDate = @"2014-08-18", ID = 11, Name = @"Monica Reyes", Phone = @"7675-3425", OnPTO = false, ParentID = 1, Title = @"Software Development Team Lead" });
        this.Add(new EmployeesFlatDataItem() { Age = 35, HireDate = @"2015-09-17", ID = 6, Name = @"Roland Mendel", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2009-10-11", ID = 12, Name = @"Sven Cooper", Phone = @"0695-34 67 21", OnPTO = true, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 14, Name = @"Laurence Johnson", Phone = @"981-443655", OnPTO = false, ParentID = 4, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 5, Name = @"Elizabeth Richards", Phone = @"(2) 283-2951", OnPTO = true, ParentID = 4, Title = @"Vice President" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 13, Name = @"Trevor Ashworth", Phone = @"981-443655", OnPTO = true, ParentID = 5, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 17, Name = @"Antonio Moreno", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 18, Title = @"Senior Accountant" });
        this.Add(new EmployeesFlatDataItem() { Age = 50, HireDate = @"2007-11-18", ID = 7, Name = @"Pedro Rodriguez", Phone = @"035-640230", OnPTO = false, ParentID = 10, Title = @"Senior Localization Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 27, HireDate = @"2016-02-19", ID = 8, Name = @"Casey Harper", Phone = @"0342-023176", OnPTO = true, ParentID = 10, Title = @"Senior Localization" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 15, Name = @"Patricia Simpson", Phone = @"069-0245984", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 9, Name = @"Francisco Chang", Phone = @"(91) 745 6200", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2018-03-18", ID = 16, Name = @"Peter Lewis", Phone = @"069-0245984", OnPTO = true, 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="EmployeesFlatData"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Pinned="true"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Pinned="true"
            Name="column2"
            @ref="column2">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column3"
            @ref="column3">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column4"
            @ref="column4">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column5"
            @ref="column5">
            </IgbColumn>

            <IgbColumn
            Field="OnPTO"
            DataType="GridColumnDataType.Boolean"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column6"
            @ref="column6">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var treeGrid = this.treeGrid;
        var column1 = this.column1;
        var column2 = this.column2;
        var column3 = this.column3;
        var column4 = this.column4;
        var column5 = this.column5;
        var column6 = this.column6;

    }

    private IgbTreeGrid treeGrid;
    private IgbColumn column1;
    private IgbColumn column2;
    private IgbColumn column3;
    private IgbColumn column4;
    private IgbColumn column5;
    private IgbColumn column6;

    private EmployeesFlatData _employeesFlatData = null;
    public EmployeesFlatData EmployeesFlatData
    {
        get
        {
            if (_employeesFlatData == null)
            {
                _employeesFlatData = new EmployeesFlatData();
            }
            return _employeesFlatData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-tree-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</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

Pinning Limitations

• Setting column widths in percentage (%) explicitly makes the IgbTreeGrid body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the IgbTreeGrid.

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 an ID for the grid first:

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

Then set the related CSS properties to this class:

#grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #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(IgbTreeGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class EmployeesFlatDataItem
{
    public double Age { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Phone { get; set; }
    public bool OnPTO { get; set; }
    public double ParentID { get; set; }
    public string Title { get; set; }
}

public class EmployeesFlatData
    : List<EmployeesFlatDataItem>
{
    public EmployeesFlatData()
    {
        this.Add(new EmployeesFlatDataItem() { Age = 55, HireDate = @"2008-03-20", ID = 1, Name = @"Johnathan Winchester", Phone = @"0251-031259", OnPTO = false, ParentID = -1, Title = @"Development Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 42, HireDate = @"2014-01-22", ID = 4, Name = @"Ana Sanders", Phone = @"(21) 555-0091", OnPTO = true, ParentID = -1, Title = @"CEO" });
        this.Add(new EmployeesFlatDataItem() { Age = 49, HireDate = @"2014-01-22", ID = 18, Name = @"Victoria Lincoln", Phone = @"(071) 23 67 22 20", OnPTO = true, ParentID = -1, Title = @"Accounting Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 61, HireDate = @"2010-01-01", ID = 10, Name = @"Yang Wang", Phone = @"(21) 555-0091", OnPTO = false, ParentID = -1, Title = @"Localization Manager" });
        this.Add(new EmployeesFlatDataItem() { Age = 43, HireDate = @"2011-06-03", ID = 3, Name = @"Michael Burke", Phone = @"0452-076545", OnPTO = true, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 29, HireDate = @"2009-06-19", ID = 2, Name = @"Thomas Anderson", Phone = @"(14) 555-8122", OnPTO = false, ParentID = 1, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 31, HireDate = @"2014-08-18", ID = 11, Name = @"Monica Reyes", Phone = @"7675-3425", OnPTO = false, ParentID = 1, Title = @"Software Development Team Lead" });
        this.Add(new EmployeesFlatDataItem() { Age = 35, HireDate = @"2015-09-17", ID = 6, Name = @"Roland Mendel", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2009-10-11", ID = 12, Name = @"Sven Cooper", Phone = @"0695-34 67 21", OnPTO = true, ParentID = 11, Title = @"Senior Software Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 14, Name = @"Laurence Johnson", Phone = @"981-443655", OnPTO = false, ParentID = 4, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 5, Name = @"Elizabeth Richards", Phone = @"(2) 283-2951", OnPTO = true, ParentID = 4, Title = @"Vice President" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 13, Name = @"Trevor Ashworth", Phone = @"981-443655", OnPTO = true, ParentID = 5, Title = @"Director" });
        this.Add(new EmployeesFlatDataItem() { Age = 44, HireDate = @"2014-04-04", ID = 17, Name = @"Antonio Moreno", Phone = @"(505) 555-5939", OnPTO = false, ParentID = 18, Title = @"Senior Accountant" });
        this.Add(new EmployeesFlatDataItem() { Age = 50, HireDate = @"2007-11-18", ID = 7, Name = @"Pedro Rodriguez", Phone = @"035-640230", OnPTO = false, ParentID = 10, Title = @"Senior Localization Developer" });
        this.Add(new EmployeesFlatDataItem() { Age = 27, HireDate = @"2016-02-19", ID = 8, Name = @"Casey Harper", Phone = @"0342-023176", OnPTO = true, ParentID = 10, Title = @"Senior Localization" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2017-11-09", ID = 15, Name = @"Patricia Simpson", Phone = @"069-0245984", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 39, HireDate = @"2010-03-22", ID = 9, Name = @"Francisco Chang", Phone = @"(91) 745 6200", OnPTO = false, ParentID = 7, Title = @"Localization Intern" });
        this.Add(new EmployeesFlatDataItem() { Age = 25, HireDate = @"2018-03-18", ID = 16, Name = @"Peter Lewis", Phone = @"069-0245984", OnPTO = true, 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/
*/

#treeGrid {
	--pinned-border-width: 5px;
    --pinned-border-style: double;
    --pinned-border-color: #FFCD0F;
	--cell-active-border-color: #FFCD0F;
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatData"
        PrimaryKey="ID"
        ForeignKey="ParentID">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Pinned="true"
            Name="column1"
            @ref="column1">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Pinned="true"
            Name="column2"
            @ref="column2">
            </IgbColumn>

            <IgbColumn
            Field="Phone"
            DataType="GridColumnDataType.String"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column3"
            @ref="column3">
            </IgbColumn>

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column4"
            @ref="column4">
            </IgbColumn>

            <IgbColumn
            Field="HireDate"
            DataType="GridColumnDataType.Date"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column5"
            @ref="column5">
            </IgbColumn>

            <IgbColumn
            Field="OnPTO"
            DataType="GridColumnDataType.Boolean"
            HeaderTemplateScript="WebTreeGridPinHeaderTemplate"
            Name="column6"
            @ref="column6">
            </IgbColumn>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var treeGrid = this.treeGrid;
        var column1 = this.column1;
        var column2 = this.column2;
        var column3 = this.column3;
        var column4 = this.column4;
        var column5 = this.column5;
        var column6 = this.column6;

    }

    private IgbTreeGrid treeGrid;
    private IgbColumn column1;
    private IgbColumn column2;
    private IgbColumn column3;
    private IgbColumn column4;
    private IgbColumn column5;
    private IgbColumn column6;

    private EmployeesFlatData _employeesFlatData = null;
    public EmployeesFlatData EmployeesFlatData
    {
        get
        {
            if (_employeesFlatData == null)
            {
                _employeesFlatData = new EmployeesFlatData();
            }
            return _employeesFlatData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-tree-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);

jsCOPY CODE

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

#treeGrid {
	--pinned-border-width: 5px;
    --pinned-border-style: double;
    --pinned-border-color: #FFCD0F;
	--cell-active-border-color: #FFCD0F;
}

cssCOPY CODE

API References

• IgbTreeGrid
• IgbColumn

Additional Resources

Our community is active and always welcoming to new ideas.

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