Estilo condicional de cuadrícula de árbol Blazor
La función de estilo condicional Ignite UI for Blazor en Blazor Tree Grid permite aplicar estilos personalizados a nivel de fila o celda. La función de estilo condicional IgbTreeGrid
se utiliza para enfatizar o resaltar visualmente los datos que cumplen con ciertos criterios, lo que facilita a los usuarios identificar información o tendencias importantes dentro de la cuadrícula.
Estilo de fila condicional de cuadrícula de árbol
El componente IgbTreeGrid
en Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las filas según reglas personalizadas.
- By setting
RowClasses
input on theIgbTreeGrid
component; - Al establecer
RowStyles
la entrada en elIgbTreeGrid
componente;
Más adelante en este tema los cubriremos ambos con más detalle.
Usando clases de filas
Puede aplicar estilo condicional a las IgbTreeGrid
filas estableciendo la RowClasses
entrada y definiendo reglas personalizadas.
<IgbTreeGrid AutoGenerate="true" Id="grid" Data="CustomersData" Name="grid" RowClassesScript="RowClassesHandler" @ref="grid">
</IgbTreeGrid>
razor
La entrada RowClasses
acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
igRegisterScript("RowClassesHandler", () => {
return {
activeRow: (row) => row.index === 0
};
}, true);
razor
.activeRow {
border: 2px solid #fc81b8;
border-left: 3px solid #e41c77;
}
css
Manifestación
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"
});
}
}
csusing 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();
}
}
}
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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Usar estilos de fila
El IgbTreeGrid
control expone la propiedad que permite el RowStyles
estilo condicional de las filas de datos. De RowClasses
manera similar, acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar un peinado regular (sin ninguna condición).
The callback signature for both
RowStyles
andRowClasses
is:
(row) => boolean
razor
Definamos nuestros estilos:
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
Manifestación
using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
public string Address { get; set; }
public double Age { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string Fax { get; set; }
public string HireDate { get; set; }
public double ID { get; set; }
public string Name { get; set; }
public double ParentID { get; set; }
public string Phone { get; set; }
public double PostalCode { get; set; }
public string Title { get; set; }
public string LastName { get; set; }
public string FullAddress { get; set; }
}
public class EmployeesFlatDetails
: List<EmployeesFlatDetailsItem>
{
public EmployeesFlatDetails()
{
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Obere Str. 57",
Age = 55,
City = @"Berlin",
Country = @"Germany",
Fax = @"030-0076545",
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
ParentID = -1,
Phone = @"030-0074321",
PostalCode = 12209,
Title = @"Development Manager",
LastName = @"Winchester",
FullAddress = @"Obere Str. 57, Berlin, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Avda. de la Constitución 2222",
Age = 42,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(51) 555-3745",
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
ParentID = -1,
Phone = @"(5) 555-4729",
PostalCode = 5021,
Title = @"CEO",
LastName = @"Sanders",
FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Mataderos 2312",
Age = 49,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(5) 555-3995",
HireDate = @"2014-01-22",
ID = 18,
Name = @"Victoria Lincoln",
ParentID = -1,
Phone = @"(5) 555-3932",
PostalCode = 5023,
Title = @"Accounting Manager",
LastName = @"Lincoln",
FullAddress = @"Mataderos 2312, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"120 Hanover Sq.",
Age = 61,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-6750",
HireDate = @"2010-01-01",
ID = 10,
Name = @"Yang Wang",
ParentID = -1,
Phone = @"(171) 555-7788",
PostalCode = 39000,
Title = @"Localization Manager",
LastName = @"Wang",
FullAddress = @"120 Hanover Sq., London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berguvsvägen 8",
Age = 43,
City = @"Luleå",
Country = @"Sweden",
Fax = @"0921-12 34 67",
HireDate = @"2011-06-03",
ID = 3,
Name = @"Michael Burke",
ParentID = 1,
Phone = @"0921-12 34 65",
PostalCode = 29000,
Title = @"Senior Software Developer",
LastName = @"Burke",
FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Forsterstr. 57",
Age = 29,
City = @"Mannheim",
Country = @"Germany",
Fax = @"0621-08924",
HireDate = @"2009-06-19",
ID = 2,
Name = @"Thomas Anderson",
ParentID = 1,
Phone = @"0621-08460",
PostalCode = 68306,
Title = @"Senior Software Developer",
LastName = @"Anderson",
FullAddress = @"Forsterstr. 57, Mannheim, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"24, place Kléber",
Age = 31,
City = @"Strasbourg",
Country = @"France",
Fax = @"88.60.15.32",
HireDate = @"2014-08-18",
ID = 11,
Name = @"Monica Reyes",
ParentID = 1,
Phone = @"88.60.15.31",
PostalCode = 67000,
Title = @"Software Development Team Lead",
LastName = @"Reyes",
FullAddress = @"24, place Kléber, Strasbourg, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"C/ Araquil, 67",
Age = 35,
City = @"Madrid",
Country = @"Spain",
Fax = @"(911) 555 91 99",
HireDate = @"2015-09-17",
ID = 6,
Name = @"Roland Mendel",
ParentID = 11,
Phone = @"(91) 555 22 82",
PostalCode = 28023,
Title = @"Senior Software Developer",
LastName = @"Mendel",
FullAddress = @"C/ Araquil, 67, Madrid, Spain"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"12, rue des Bouchers",
Age = 44,
City = @"Marseille",
Country = @"France",
Fax = @"91.24.45.41",
HireDate = @"2009-10-11",
ID = 12,
Name = @"Sven Cooper",
ParentID = 11,
Phone = @"91.24.45.40",
PostalCode = 13008,
Title = @"Senior Software Developer",
LastName = @"Cooper",
FullAddress = @"12, rue des Bouchers, Marseille, France"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"23 Tsawassen Blvd.",
Age = 44,
City = @"Tsawassen",
Country = @"Canada",
Fax = @"(604) 555-3745",
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
ParentID = 4,
Phone = @"(604) 555-4729",
PostalCode = 19000,
Title = @"Director",
LastName = @"Johnson",
FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Fauntleroy Circus",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(125) 555-3798",
HireDate = @"2017-11-9",
ID = 5,
Name = @"Elizabeth Richards",
ParentID = 4,
Phone = @"(171) 555-1212",
PostalCode = 30000,
Title = @"Vice President",
LastName = @"Richards",
FullAddress = @"Fauntleroy Circus, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Cerrito 333",
Age = 39,
City = @"Buenos Aires",
Country = @"Argentina",
Fax = @"(121) 135-4892",
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
ParentID = 5,
Phone = @"(1) 135-5555",
PostalCode = 1010,
Title = @"Director",
LastName = @"Ashworth",
FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Sierras de Granada 9993",
Age = 44,
City = @"México D.F.",
Country = @"Mexico",
Fax = @"(153) 555-7293",
HireDate = @"2014-04-04",
ID = 17,
Name = @"Antonio Moreno",
ParentID = 18,
Phone = @"(5) 555-3392",
PostalCode = 5022,
Title = @"Senior Accountant",
LastName = @"Moreno",
FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Hauptstr. 29",
Age = 50,
City = @"Sao Paulo",
Country = @"Brazil",
Fax = @"(531) 555-6691",
HireDate = @"2007-11-18",
ID = 7,
Name = @"Pedro Rodriguez",
ParentID = 10,
Phone = @"0452-076545",
PostalCode = 3012,
Title = @"Senior Localization Developer",
LastName = @"Rodriguez",
FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Av. dos Lusíadas, 23",
Age = 27,
City = @"Bern",
Country = @"Switzerland",
Fax = @"(271) 335-357",
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
ParentID = 10,
Phone = @"(11) 555-7647",
PostalCode = 40000,
Title = @"Senior Localization",
LastName = @"Harper",
FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Berkeley Gardens 12",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-9199",
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
ParentID = 7,
Phone = @"(171) 555-2282",
PostalCode = 26000,
Title = @"Localization Intern",
LastName = @"Simpson",
FullAddress = @"Berkeley Gardens 12, London, UK"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"Walserweg 21",
Age = 39,
City = @"Aachen",
Country = @"Germany",
Fax = @"0241-059428",
HireDate = @"2010-03-22",
ID = 9,
Name = @"Francisco Chang",
ParentID = 7,
Phone = @"0241-039123",
PostalCode = 52066,
Title = @"Localization Intern",
LastName = @"Chang",
FullAddress = @"Walserweg 21, Aachen, Germany"
});
this.Add(new EmployeesFlatDetailsItem()
{
Address = @"35 King George",
Age = 25,
City = @"London",
Country = @"UK",
Fax = @"(171) 555-3373",
HireDate = @"2018-03-18",
ID = 16,
Name = @"Peter Lewis",
ParentID = 7,
Phone = @"(171) 555-0297",
PostalCode = 48000,
Title = @"Localization Intern",
LastName = @"Lewis",
FullAddress = @"35 King George, London, UK"
});
}
}
csusing 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();
}
}
}
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
Estilo de celda condicional de cuadrícula de árbol
Descripción general
El componente IgbTreeGrid
en Ignite UI for Blazor proporciona dos formas de aplicar estilos condicionales a las celdas según reglas personalizadas.
- Configurando la entrada
CellClasses
IgbColumn
en un objeto literal que contiene pares clave-valor. La clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano. El resultado es una cómoda colocación del material en la celda.
Usando clases de células
Puede aplicar estilo condicional a las IgbTreeGrid
celdas estableciendo el parámetro IgbColumn
CellClasses
Introduzca y defina reglas personalizadas.
<IgbColumn Field="UnitPrice" Header="Unit Price" DataType="GridColumnDataType.Currency" CellClassesScript="UnitPriceCellClassesHandler">
</IgbColumn>
razor
La entrada CellClasses
acepta un objeto literal, que contiene pares clave-valor, donde la clave es el nombre de la clase CSS, mientras que el valor es una función de devolución de llamada que devuelve un valor booleano o booleano.
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
Manifestación
using 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
});
}
}
csusing 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();
}
}
}
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
- Utilizando la entrada
IgbColumn
CellStyles
que acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación.
La firma de devolución de llamada para
cellStyles
ycellClasses
ahora se cambia a:
(rowData, columnKey, cellValue, rowIndex) => boolean
razor
Usar estilos de celda
Las columnas exponen la propiedad CellStyles
que permite aplicar estilos condicionales a las celdas de las columnas. Al igual que CellClasses
acepta un objeto literal donde las claves son propiedades de estilo y los valores son expresiones para evaluación. Además, puedes aplicar el peinado habitual con facilidad (sin condiciones).
Definamos nuestros estilos:
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
Manifestación
using 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
});
}
}
csusing 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();
}
}
}
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
Problemas y limitaciones conocidos
- Si hay celdas vinculadas a la misma condición (de diferentes columnas) y una celda se actualiza, las otras celdas no se actualizarán según el nuevo valor, si se cumple la condición.
Referencias de API
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.