Blazor Tree Grid Conditional Styling
The Ignite UI for Blazor Conditional Styling feature in Blazor Tree Grid allows custom styling on a row or cell level. The IgbTreeGrid
Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.
Tree Grid Conditional Row Styling
The IgbTreeGrid
component in Ignite UI for Blazor provides two ways to conditional styling of rows based on custom rules.
- By setting
RowClasses
input on theIgbTreeGrid
component; - By setting
RowStyles
input on theIgbTreeGrid
component;
Further in this topic we will cover both of them in more details.
Using Row Classes
You can conditionally style the IgbTreeGrid
rows by setting the RowClasses
input and define custom rules.
<IgbTreeGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
</IgbTreeGrid>
razor
The RowClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
igRegisterScript("RowClassesHandler", () => {
return {
activeRow: (row) => row.index === 0
};
}, true);
razor
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
css
Demo
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();
}
}
}
csusing 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"
});
}
}
cs
@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/
*/
.activeRow {
border-top: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="EmployeesFlatData"
PrimaryKey="ID"
ForeignKey="ParentID"
Moving="true"
RowEditable="true"
RowClassesScript="WebGridRowClassesHandler"
Name="treeGrid1"
@ref="treeGrid1">
<IgbColumn
Field="Name"
Header="Full Name"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Age"
Header="Age"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Title"
Header="Title"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="HireDate"
Header="Hire Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid1 = this.treeGrid1;
}
private IgbTreeGrid treeGrid1;
private EmployeesFlatData _employeesFlatData = null;
public EmployeesFlatData EmployeesFlatData
{
get
{
if (_employeesFlatData == null)
{
_employeesFlatData = new EmployeesFlatData();
}
return _employeesFlatData;
}
}
}
razor
igRegisterScript("WebGridRowClassesHandler", () => {
return {
activeRow: (row) => row.index % 2 === 0
};
}, true);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.activeRow {
border-top: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
css
Using Row Styles
The IgbTreeGrid
control exposes the RowStyles
property which allows conditional styling of the data rows. Similar to RowClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).
The callback signature for both
RowStyles
andRowClasses
is:
(row) => boolean
razor
Let's define our styles:
igRegisterScript("WebTreeGridRowStylesHandler", () => {
return {
'background': (row) => row.data['Title'] === 'CEO' ? '#6c757d' :
row.data['Title'].includes('President') ? '#adb5bd' :
row.data['Title'].includes('Director') ? '#ced4da' :
row.data['Title'].includes('Manager') ? '#dee2e6' :
row.data['Title'].includes('Lead') ? '#e9ecef' :
row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
'border-left': (row) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
'border-color': (row) => row.data['Title'] === 'CEO' ? '#495057' : null,
'color': (row) => row.data['Title'] === 'CEO' ? '#fff' : null
};
}, true);
razor
<IgbTreeGrid AutoGenerate="true" PrimaryKey="ID" ForeignKey="ParentID" Data="Data" RowStylesScript="WebTreeGridRowStylesHandler">
</IgbTreeGrid>
razor
Demo
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();
}
}
}
csusing 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"
});
}
}
cs
@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="EmployeesFlatDetails"
PrimaryKey="ID"
ForeignKey="ParentID"
Moving="true"
RowStylesScript="WebTreeGridRowStylesHandler">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String"
Sortable="true"
Filterable="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
Resizable="false"
Filterable="false"
Editable="true">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
Resizable="true"
Filterable="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
Resizable="true"
Filterable="true"
Editable="true">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
}
private IgbTreeGrid treeGrid;
private EmployeesFlatDetails _employeesFlatDetails = null;
public EmployeesFlatDetails EmployeesFlatDetails
{
get
{
if (_employeesFlatDetails == null)
{
_employeesFlatDetails = new EmployeesFlatDetails();
}
return _employeesFlatDetails;
}
}
}
razor
igRegisterScript("WebTreeGridRowStylesHandler", () => {
return {
'background': (row) => row.data['Title'] === 'CEO' ? '#6c757d' : row.data['Title'].includes('President') ? '#adb5bd' :
row.data['Title'].includes('Director') ? '#ced4da' : row.data['Title'].includes('Manager') ? '#dee2e6' :
row.data['Title'].includes('Lead') ? '#e9ecef' : row.data['Title'].includes('Senior') ? '#f8f9fa' : null,
'border-left': (row) => row.data['Title'] === 'CEO' || row.data['Title'].includes('President') ? '2px solid' : null,
'border-color': (row) => row.data['Title'] === 'CEO' ? '#495057' : null,
'color': (row) => row.data['Title'] === 'CEO' ? '#fff' : null
};
}, true);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Tree Grid Conditional Cell Styling
Overview
The IgbTreeGrid
component in Ignite UI for Blazor provides two ways to conditional styling of cells based on custom rules.
- By setting the
IgbColumn
inputCellClasses
to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.
Using Cell Classes
You can conditionally style the IgbTreeGrid
cells by setting the IgbColumn
CellClasses
input and define custom rules.
<IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Currency" CellClassesScript="UnitPriceCellClassesHandler">
</IgbColumn>
razor
The CellClasses
input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
igRegisterScript("UnitPriceCellClassesHandler", () => {
return {
downPrice: (rowData, columnKey) => rowData[columnKey] <= 5,
upPrice: (rowData, columnKey) => rowData[columnKey] > 5,
};
}, true);
razor
.upPrice {
color: red !important;
}
.downPrice {
color: green !important;
}
css
Demo
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();
}
}
}
csusing System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
cs
@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/
*/
.allergensFont {
color: royalblue !important;
}
.upPrice {
color: red !important;
}
.downPrice {
color: green !important;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="OrdersTreeData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product"
DataType="GridColumnDataType.String"
CellClassesScript="WebTreeGridAllergensCellClassesHandler"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Category"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn
Field="Units"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
CellClassesScript="WebTreeGridUnitPriceCellClassesHandler"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Price"
DataType="GridColumnDataType.Currency">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumn
Field="Delivered"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridAllergensCellClassesHandler", () => {
let allergenItems = ['Frozen Shrimps', 'Wild Salmon Fillets', 'Fresh Cheese', 'Skimmed Milk 1L', 'Butter'];
return {
allergensFont: (rowData, columnKey) => allergenItems.indexOf(rowData[columnKey]) >= 0,
};
}, true);
igRegisterScript("WebTreeGridUnitPriceCellClassesHandler", () => {
return {
downPrice: (rowData, columnKey) => rowData[columnKey] <= 5,
upPrice: (rowData, columnKey) => rowData[columnKey] > 5,
};
}, true);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.allergensFont {
color: royalblue !important;
}
.upPrice {
color: red !important;
}
.downPrice {
color: green !important;
}
css
- By using the
IgbColumn
inputCellStyles
which accepts an object literal where the keys are style properties and the values are expressions for evaluation.
The callback signature for both
cellStyles
andcellClasses
is now changed to:
(rowData, columnKey, cellValue, rowIndex) => boolean
razor
Using Cell Styles
Columns expose the CellStyles
property which allows conditional styling of the column cells. Similar to CellClasses
it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).
Let's define our styles:
igRegisterScript("WebTreeGridCellStylesHandler", () => {
return {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "UnitPrice") {
if (cellValue > 10) return "#dc3545";
if (cellValue < 5) return "#28a745";
if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
}
}
};
}, true);
razor
<IgbColumn CellStylesScript="WebTreeGridCellStylesHandler">
</IgbColumn>
razor
Demo
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();
}
}
}
csusing System;
using System.Collections.Generic;
public class OrdersTreeDataItem
{
public double ID { get; set; }
public double ParentID { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string OrderDate { get; set; }
public double Units { get; set; }
public double UnitPrice { get; set; }
public double Price { get; set; }
public bool Delivered { get; set; }
}
public class OrdersTreeData
: List<OrdersTreeDataItem>
{
public OrdersTreeData()
{
this.Add(new OrdersTreeDataItem()
{
ID = 1,
ParentID = -1,
Name = @"Order 1",
Category = @"",
OrderDate = @"2010-02-17",
Units = 1844,
UnitPrice = 3.73,
Price = 6884.38,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 101,
ParentID = 1,
Name = @"Chocolate Chip Cookies",
Category = @"Cookies",
OrderDate = @"2010-02-17",
Units = 834,
UnitPrice = 3.59,
Price = 2994.06,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 102,
ParentID = 1,
Name = @"Red Apples",
Category = @"Fruit",
OrderDate = @"2010-02-17",
Units = 371,
UnitPrice = 3.66,
Price = 1357.86,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 103,
ParentID = 1,
Name = @"Butter",
Category = @"Diary",
OrderDate = @"2010-02-17",
Units = 260,
UnitPrice = 3.45,
Price = 897,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 104,
ParentID = 1,
Name = @"Potato Chips",
Category = @"Snack",
OrderDate = @"2010-02-17",
Units = 118,
UnitPrice = 1.96,
Price = 231.28,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 105,
ParentID = 1,
Name = @"Orange Juice",
Category = @"Beverages",
OrderDate = @"2010-02-17",
Units = 261,
UnitPrice = 5.38,
Price = 1404.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 2,
ParentID = -1,
Name = @"Order 2",
Category = @"",
OrderDate = @"2022-05-27",
Units = 1831,
UnitPrice = 8.23,
Price = 15062.77,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 201,
ParentID = 2,
Name = @"Frozen Shrimps",
Category = @"Seafood",
OrderDate = @"2022-05-27",
Units = 120,
UnitPrice = 20.45,
Price = 2454,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 202,
ParentID = 2,
Name = @"Ice Tea",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 840,
UnitPrice = 7,
Price = 5880,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 203,
ParentID = 2,
Name = @"Fresh Cheese",
Category = @"Diary",
OrderDate = @"2022-05-27",
Units = 267,
UnitPrice = 16.55,
Price = 4418.85,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 204,
ParentID = 2,
Name = @"Carrots",
Category = @"Vegetables",
OrderDate = @"2022-05-27",
Units = 360,
UnitPrice = 2.77,
Price = 997.2,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 205,
ParentID = 2,
Name = @"Apple Juice",
Category = @"Beverages",
OrderDate = @"2022-05-27",
Units = 244,
UnitPrice = 5.38,
Price = 1312.72,
Delivered = false
});
this.Add(new OrdersTreeDataItem()
{
ID = 3,
ParentID = -1,
Name = @"Order 3",
Category = @"",
OrderDate = @"2022-08-04",
Units = 1972,
UnitPrice = 3.47,
Price = 6849.18,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 301,
ParentID = 3,
Name = @"Skimmed Milk 1L",
Category = @"Diary",
OrderDate = @"2022-08-04",
Units = 1028,
UnitPrice = 3.56,
Price = 3659.68,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 302,
ParentID = 3,
Name = @"Bananas 5 Pack",
Category = @"Fruit",
OrderDate = @"2022-08-04",
Units = 370,
UnitPrice = 6.36,
Price = 2353.2,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 303,
ParentID = 3,
Name = @"Cauliflower",
Category = @"Vegetables",
OrderDate = @"2022-08-04",
Units = 283,
UnitPrice = 0.95,
Price = 268.85,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 304,
ParentID = 3,
Name = @"White Chocolate Cookies",
Category = @"Cookies",
OrderDate = @"2022-08-04",
Units = 291,
UnitPrice = 1.95,
Price = 567.45,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 4,
ParentID = -1,
Name = @"Order 4",
Category = @"",
OrderDate = @"2023-01-04",
Units = 1065,
UnitPrice = 5.56,
Price = 5923.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 401,
ParentID = 4,
Name = @"Mini Milk Chocolate Cookie Bites",
Category = @"Cookies",
OrderDate = @"2023-01-04",
Units = 68,
UnitPrice = 2.25,
Price = 153,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 402,
ParentID = 4,
Name = @"Wild Salmon Fillets",
Category = @"Seafood",
OrderDate = @"2023-01-04",
Units = 320,
UnitPrice = 16.15,
Price = 5168,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 403,
ParentID = 4,
Name = @"Diet Lemonade",
Category = @"Beverages",
OrderDate = @"2023-01-04",
Units = 437,
UnitPrice = 0.5,
Price = 218.5,
Delivered = true
});
this.Add(new OrdersTreeDataItem()
{
ID = 404,
ParentID = 4,
Name = @"Potatoes",
Category = @"Vegetables",
OrderDate = @"2023-01-04",
Units = 240,
UnitPrice = 1.6,
Price = 384,
Delivered = true
});
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="OrdersTreeData"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
DataType="GridColumnDataType.String"
CellStylesScript="WebTreeGridCellStylesHandler"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product"
DataType="GridColumnDataType.String"
CellStylesScript="WebTreeGridCellStylesHandler"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Currency"
CellStylesScript="WebTreeGridCellStylesHandler"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
CellStylesScript="WebTreeGridCellStylesHandler"
Name="column4"
@ref="column4">
</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;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridCellStylesHandler", () => {
return {
background: (rowData, columnKey, cellValue, rowIndex) => rowIndex % 2 === 0 ? "#EFF4FD" : null,
color: (rowData, columnKey, cellValue, rowIndex) => {
if (columnKey === "UnitPrice") {
if (cellValue > 10) return "#dc3545";
if (cellValue < 5) return "#28a745";
if (cellValue >= 5 && cellValue <= 10) return "#17a2b8";
}
}
};
}, true);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Known issues and limitations
- If there are cells bind to the same condition (from different columns) and one cell is updated, the other cells won't be updated based on the new value, if the condition is met.
API References
Additional Resources
Our community is active and always welcoming to new ideas.