Blazor Tree Grid Row Selection

The Ignite UI for Blazor Row Selection feature in Blazor Tree Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgbTreeGrid:

• None Selection
• Multiple Selection
• Single Selection

Blazor Row Selection Example

The sample below demonstrates the four types of IgbTreeGrid's row selection behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box. Use the switch button to hide or show the row selector checkbox.

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),
                typeof(IgbPropertyEditorPanelModule)
            );
            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="options vertical">
        <IgbPropertyEditorPanel

        DescriptionType="WebTreeGrid"
        IsWrappingEnabled="true"
        IsHorizontal="true"

        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            Name="selectionType"
            @ref="selectionType"
            PropertyPath="RowSelection"
            Label="Row Selection">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            Name="hideRowSelectors"
            @ref="hideRowSelectors"
            PropertyPath="HideRowSelectors"
            Label="Hide Row Selectors">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatData"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        CellSelection="GridSelectionMode.None"
        AllowFiltering="true"
        HideRowSelectors="false">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

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

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

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

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

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

        </IgbTreeGrid>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription selectionType;
    private IgbPropertyEditorPropertyDescription hideRowSelectors;
    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

Setup

In order to setup row selection in the IgbTreeGrid, you just need to set the RowSelection property. This property accepts GridSelectionMode enumeration.

GridSelectionMode exposes the following modes:

• None
• Single
• Multiple

• MultipleCascade

Below we will take a look at each of them in more detail.

None Selection

In the IgbTreeGrid by default row selection is disabled (RowSelection is None). So you can not select or deselect a row through interaction with the IgbTreeGrid UI, the only way to complete these actions is to use the provided API methods.

Single Selection

Single row selection can now be easily set up, the only thing you need to do, is to set RowSelection to Single property. This gives you the opportunity to select only one row within a grid. You can select a row by clicking on a cell or pressing the space key when you focus on a cell of the row, and of course you can select a row by clicking on the row selector field. When row is selected or deselected RowSelectionChanging event is emitted.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Single
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler for selection change
    }
}
razor

Multiple Selection

To enable multiple row selection in the IgbTreeGrid just set the RowSelection property to Multiple. This will enable a row selector field on each row and in the IgbTreeGrid header. The row selector allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations, such as sorting and filtering. The row also can be selected by clicking on a cell or by pressing the space key when a cell is focused. If you have selected one row and click on another while holding the shift key, this will select the whole range of rows. In this selection mode, when you click on a single row, the previous selected rows will be deselected. If you click while holding the ctrl key, the row will be toggled and the previous selection will be preserved.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
razor

Cascade Selection

To enable cascade row selection in the IgbTreeGrid just set the RowSelection property to MultipleCascade. This will enable a row selector field on each row and in the IgbTreeGrid header. The row selector allows users to select multiple rows which would select all children in the tree below. The selection persists through scrolling, paging, and data operations, such as sorting and filtering. The row can also be selected by clicking on a cell or by pressing the space key when a cell is focused. If you have selected one row and click on another while holding the shift key, the selection of a parent record will select all of its children even if they are not in the selected range. In this selection mode, when you click on a single row, the previously selected rows will be deselected. If you click while holding the ctrl key, the row and its children will be toggled and the previous selection will be preserved.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.MultipleCascade
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
razor

In this mode a parent's selection state entirely depends on the selection state of its children. When a parent has some selected and some deselected children, its checkbox is in an indeterminate state.

Notes

• Row selection will trigger RowSelectionChanging event. This event gives you information about the new selection, old selection, the rows that have been added and removed from the old selection. Also the event is cancellable, so this allows you to prevent selection.
• When row selection is enabled row selectors are displayed, but if you don't want to show them, you can set HideRowSelectors to true.
• When you switch between row selection modes at runtime, this will clear the previous row selection state.

API usage

Select Rows Programmatically

The code snippet below can be used to select one or multiple rows simultaneously (via PrimaryKey). Additionally, the second parameter of this method is a boolean property through which you may choose whether the previous row selection will be cleared or not. The previous selection is preserved by default.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Select>Select</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Select()
        {
            object[] array = new object[] { 1,2, 5 };
            await this.grid.SelectRowsAsync(array, true);
        }
    }
razor

This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the IgbTreeGrid selection.

Deselect Rows

If you need to deselect rows programmatically, you can use the DeselectRows method.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=Deselect>Deselect</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void Deselect()
        {
            object[] array = new object[] { 1, 2, 5 };
            await this.grid.DeselectRowsAsync(array);
        }
    }
razor

Row Selection Event

When there is some change in the row selection RowSelectionChanging event is emitted. RowSelectionChanging exposes the following arguments:

• OldSelection - array of row IDs that contains the previous state of the row selection.
• NewSelection - array of row IDs that match the new state of the row selection.
• Added - array of row IDs that are currently added to the selection.
• Removed - array of row IDs that are currently removed according old selection state.
• Event - the original event that triggered row selection change.
• Cancel - allows you the prevent the row selection change.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbTreeGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler
    }
}
razor

Select All Rows

Another useful API method that IgbTreeGrid provides is SelectAllRows. By default this method will select all data rows, but if filtering is applied, it will select only the rows that match the filter criteria. If you call the method with false parameter, SelectAllRows(false) will always select all data in the grid, even if filtering is applied.

Note Keep in mind that SelectAllRows will not select the rows that are deleted.

Deselect All Rows

IgbTreeGrid provides a DeselectAllRows method, which by default will deselect all data rows, but if filtering is applied will deselect only the rows that match the filter criteria. If you call the method with false parameter, DeselectAllRows(false) will always clear all row selection state even if filtering is applied.

How to get Selected Rows

If you need to see which rows are currently selected, you can get their row IDs with the SelectedRows getter.

    <IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbTreeGrid>
    <IgbButton @onclick=GetSelected>Get selected</IgbButton>
    @code {
        public IgbTreeGrid grid;
        private async void GetSelected()
        {
            var selected = this.grid.SelectedRows;
        }
    }
razor

Additionally, assigning row IDs to SelectedRows will allow you to change the grid's selection state.

<IgbTreeGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             SelectedRows=selectedRows
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
</IgbTreeGrid>

@code {
    public object[] selectedRows = new object[] { 1, 2, 5 };
}
razor

Row Selector Templates

You can template header and row selectors in the IgbTreeGrid and also access their contexts which provide useful functionality for different scenarios.

By default, the IgbTreeGrid handles all row selection interactions on the row selector's parent container or on the row itself, leaving just the state visualization for the template. Overriding the base functionality should generally be done using the RowSelectionChanging event. In case you implement a custom template with a Click handler which overrides the base functionality, you should stop the event's propagation to preserve the correct row state.

Row Template

To create a custom row selector template, within the IgbTreeGrid you can use the RowSelectorTemplate property. From the template you can access the implicitly provided context variable, with properties that give you information about the row's state.

The Selected property shows whether the current row is selected or not while the Index property can be used to access the row index.

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox checked></igc-checkbox>
</div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox></igc-checkbox>
</div>`;
    }
}, false);
razor

The RowID property can be used to get a reference of an IgbTreeGrid row. This is useful when you implement a click handler on the row selector element.

In the above example we are using an IgbCheckbox and we bind rowContext.selected to its Checked property. See this in action in our Row Numbering Demo.

Header Template

To create a custom header selector template, within the IgbTreeGrid, you can use the HeadSelectorTemplate property. From the template you can access the implicitly provided context variable, with properties that give you information about the header's state.

The SelectedCount property shows you how many rows are currently selected while TotalCount shows you how many rows there are in the IgbTreeGrid in total.

public RenderFragment<IgbHeadSelectorTemplateContext> Template = (context) =>
{
    return @<div> <img style="min-width:80px;" src="https://ko.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"/></div>;
};
razor

The SelectedCount and TotalCount properties can be used to determine if the head selector should be checked or indeterminate (partially selected).

Row Numbering Demo

This demo shows the usage of custom header and row selectors. The latter uses Index to display row numbers and an IgbCheckbox bound to Selected.

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbTreeGridModule)
            );
            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"
        RowSelection="GridSelectionMode.Multiple"
        RowSelectorTemplateScript="WebGridRowSelectorTemplate"
        HeadSelectorTemplateScript="WebGridHeaderRowSelectorTemplate"
        CellSelection="GridSelectionMode.None"
        HideRowSelectors="false">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            Header="Job Title">
            </IgbColumn>

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

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number">
            </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

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox checked></igc-checkbox>
</div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox></igc-checkbox>
</div>`;
    }
}, false);

igRegisterScript("WebGridHeaderRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<div style="width: 70px;height: 60px;display: flex;">
    <img src="https://www.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png" class="header-image">
</div>`;
}, false);

jsCOPY CODE

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

Excel Style Row Selectors Demo

This demo uses custom templates to resemble Excel-like header and row selectors.

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 {
    --ig-size: var(--ig-size-medium);
}
</style>
<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Data="EmployeesFlatData"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        RowSelection="GridSelectionMode.Multiple"
        RowSelectorTemplateScript="WebGridRowSelectorExcelTemplate"
        HeadSelectorTemplateScript="WebGridHeaderRowSelectorExcelTemplate">
            <IgbPaginator
            Name="paginator"
            @ref="paginator"
            PerPage="15"
            SelectOptions="@(new double[] { 5, 10, 15, 25, 50 })"
            ResourceStrings="PaginatorResourceStrings1">
            </IgbPaginator>

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

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

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

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

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

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

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;
    private IgbPaginator paginator;
    private IgbPaginatorResourceStrings _paginatorResourceStrings1 = null;
    public IgbPaginatorResourceStrings PaginatorResourceStrings1
    {
        get
        {
            if (this._paginatorResourceStrings1 == null)
            {
                var paginatorResourceStrings1 = new IgbPaginatorResourceStrings();
                paginatorResourceStrings1.Igx_paginator_label = "Items per page";
                this._paginatorResourceStrings1 = paginatorResourceStrings1;
            }
            return this._paginatorResourceStrings1;
        }
    }

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

}razorCOPY CODE

igRegisterScript("WebGridRowSelectorExcelTemplate", (ctx) => {
    var html = window.igTemplating.html;
    return html`<span style='display: block;width:30px;'> ${ctx.implicit.index}</span>`;
}, false);

igRegisterScript("WebGridHeaderRowSelectorExcelTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selectedCount > 0 && ctx.implicit.selectedCount === ctx.implicit.totalCount) {
        return html`<span style='display: block;width:30px;'><i style='color: rgb(239, 184, 209);'>◢</i></span>`;
    } else {
        return html`<span style='display: block;width:30px;'><i>◢</i></span>`;
    }
}, false);

jsCOPY CODE

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

#treeGrid {
    --ig-size: var(--ig-size-medium);
}

cssCOPY CODE

Conditional Selection Demo

This demo prevents some rows from being selected using the RowSelectionChanging event and a custom template with disabled checkbox for non-selectable rows.

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"
        Data="EmployeesFlatData"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        PrimaryKey="ID"
        ForeignKey="ParentID"
        RowSelection="GridSelectionMode.Multiple"
        RowSelectionChangingScript="WebTreeGridRowSelectionConditional">
            <IgbColumn
            Field="Name"
            DataType="GridColumnDataType.String">
            </IgbColumn>

            <IgbColumn
            Field="Title"
            Header="Job Title">
            </IgbColumn>

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

            <IgbColumn
            Field="Age"
            DataType="GridColumnDataType.Number">
            </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

igRegisterScript("WebTreeGridRowSelectionConditional", (event) => {
    const eventArgs = event.detail;
    if (!eventArgs.added.length && eventArgs.removed.length) {
        // ignore deselect
        return;
    }
    const originalAddedLength = eventArgs.added.length;

    // only allow selection for employees that are not on PTO
    eventArgs.newSelection = eventArgs.newSelection.filter(x => x.OnPTO === false);

    // cleanup selection if all conditionally selectable rows are already selected
    if (eventArgs.newSelection.length
        && !eventArgs.newSelection.filter(x => eventArgs.oldSelection.indexOf(x) === -1).length
        && originalAddedLength > 1) {
            // all selected from header, deselect instead
            eventArgs.newSelection = [];
    }
}, false);

jsCOPY CODE

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

API References

• IgbTreeGrid
• TreeGridRow

Additional Resources

• Selection
• Cell selection
• Paging
• Filtering
• Sorting
• Summaries
• Column Moving
• Column Pinning
• Column Resizing
• Virtualization and Performance

Our community is active and always welcoming to new ideas.

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