Blazor Tree Grid Summaries
La función Ignite UI for Blazor Summaries en Blazor Tree Grid funciona a nivel de columna como pie de grupo. Los resúmenes Blazor TreeGrid son una característica poderosa que permite al usuario ver la información de la columna en un contenedor separado con un conjunto predefinido de elementos de resumen predeterminados, según el tipo de datos dentro de la columna o mediante la implementación de una plantilla personalizada en IgbTreeGrid
.
Ejemplo de resumen de cuadrícula de árbol Blazor
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(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"
Data="OrdersTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="Price"
Header="Price"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Delivered"
DataType="GridColumnDataType.Boolean"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridSummariesHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleSummary = function toggleSummary(column) {
column.hasSummary = !column.hasSummary;
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right; color:${ctx.column.hasSummary ? '#e41c77' : ''}" @pointerdown=${() => toggleSummary(ctx.column)}>∑</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
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.
El resumen de la columna es una función de todos los valores de la columna; a menos que se aplique un filtrado, el resumen de la columna será función de los valores de los resultados filtrados.
Los resúmenes IgbTreeGrid
también se pueden habilitar a nivel de columna en Ignite UI for Blazor, lo que significa que puede activarlos solo para las columnas que necesite. Los resúmenes IgbTreeGrid
le brindan un conjunto predefinido de resúmenes predeterminados, según el tipo de datos en la columna, para que pueda ahorrar algo de tiempo:
Para string
y boolean
DataType
, está disponible la siguiente función:
- Contar
Para los tipos de datos number
, currency
y percent
, están disponibles las siguientes funciones:
- Contar
- mín.
- máx.
- Promedio
- Suma
Para el tipo de datos date
, están disponibles las siguientes funciones:
- Contar
- Más temprano
- El último
Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.
IgbTreeGrid
Los resúmenes se habilitan por columna configurando HasSummary
propiedad a verdadero. También es importante tener en cuenta que los resúmenes de cada columna se resuelven según el tipo de datos de columna. En IgbTreeGrid
El tipo de datos de columna predeterminado es string
, así que si quieres number
o date
resúmenes específicos, debe especificar el DataType
propiedad como number
o date
. Tenga en cuenta que los valores de resumen se mostrarán localizados, de acuerdo con la cuadrícula Locale
y columna PipeArgs
.
<IgbTreeGrid>
<IgbColumn Field="ID" Header="Order ID"></IgbColumn>
<IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
<IgbColumn Field="Units" Header="Units" HasSummary="true"></IgbColumn>
</IgbTreeGrid>
razor
La otra forma de habilitar/deshabilitar resúmenes para una columna específica o una lista de columnas es usar el método EnableSummaries
public / DisableSummaries
de la IgbTreeGrid
.
<IgbTreeGrid AutoGenerate="false" Data="OrdersTreeData" Name="treeGrid" @ref="treeGridRef" Id="treeGrid" PrimaryKey="ID">
<IgbColumn Field="ID" Header="Order ID"></IgbColumn>
<IgbColumn Field="Name" Header="Order Product" HasSummary="true"></IgbColumn>
<IgbColumn Field="Units" Header="Units" DataType="GridColumnDataType.Number" HasSummary="true"></IgbColumn>
</IgbTreeGrid>
@code {
public async void DisableSummaries()
{
object[] disabledSummaries = { "Units" };
await this.treeGrid.DisableSummariesAsync(disabledSummaries);
}
}
razor
Resúmenes de cuadrícula de árbol personalizados
Si estas funciones no cumplen con sus requisitos, puede proporcionar un resumen personalizado para las columnas específicas.
//In JavaScript
class PtoSummary {
operate(data, allData, fieldName) {
const result = [];
result.push({
key: 'totalOnPTO',
label: 'Employees On PTO',
summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'devs',
label: 'Developers',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'tl',
label: 'Team Leads',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'managers',
label: 'Managers/Directors',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'ceo',
label: 'CEO/President',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
});
return result;
}
}
razor
Como se ve en los ejemplos, las clases base exponen el método Operate
, por lo que puede elegir obtener todos los resúmenes predeterminados y modificar el resultado, o calcular resultados resumidos completamente nuevos.
El método devuelve una lista de IgbSummaryResult
.
y tomar parámetros opcionales para calcular los resúmenes. Consulte Resúmenes personalizados, que acceden a toda la sección de datos a continuación.
Para calcular correctamente la altura de la fila de resumen, la cuadrícula de árbol necesita que el método Operate devuelva siempre una matriz de IgbSummaryResult con la longitud adecuada, incluso cuando los datos están vacíos.
<IgbTreeGrid
AutoGenerate="true"
Name="treeGrid"
@ref="treeGrid"
Data="EmployeesFlatData"
PrimaryKey="ID"
ColumnInitScript="WebTreeGridCustomSummary">
</IgbTreeGrid>
// In Javascript
igRegisterScript("WebTreeGridCustomSummary", (event) => {
if (event.detail.field === "Title") {
event.detail.summaries = PtoSummary;
}
}, false);
razor
Resúmenes personalizados, que acceden a todos los datos
Ahora puede acceder a todos los datos de la cuadrícula de árbol dentro del resumen de columna personalizado. Se introducen dos parámetros opcionales adicionales en el método SummaryOperand Operate
. Como puede ver en el fragmento de código a continuación, el método operate tiene los siguientes tres parámetros:
- columnData: le proporciona una matriz que contiene los valores solo para la columna actual
- allGridData: le brinda toda la fuente de datos de la cuadrícula
- fieldName - campo de columna actual
class PtoSummary {
operate(data, allData, fieldName) {
const result = [];
result.push({
key: 'totalOnPTO',
label: 'Employees On PTO',
summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
});
return result;
}
}
razor
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(IgbInputModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
<style>
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.gridSize {
--ig-size: var(--ig-size-small);
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
Class="gridSize"
AutoGenerate="false"
Height="620px"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
Data="EmployeesFlatData"
PrimaryKey="ID"
ForeignKey="ParentID"
ColumnInitScript="WebTreeGridCustomSummary">
<IgbColumn
Field="Name"
DataType="GridColumnDataType.String">
</IgbColumn>
<IgbColumn Field="Age"
DataType="GridColumnDataType.Number">
</IgbColumn>
<IgbColumn
Field="Title"
DataType="GridColumnDataType.String"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="OnPTO"
DataType="GridColumnDataType.Boolean"
HasSummary="true">
</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;
}
}
}
razor
class PtoSummary {
count(data) {
return data.length;
};
operate(data, allData, fieldName) {
const result = [];
result.push({
key: 'totalOnPTO',
label: 'Employees On PTO',
summaryResult: this.count(allData.filter((rec) => rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'devs',
label: 'Developers',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Developer') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'tl',
label: 'Team Leads',
summaryResult: this.count(allData.filter((rec) => rec[fieldName].includes('Team Lead') && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'managers',
label: 'Managers/Directors',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('Manager') || rec[fieldName].includes('Director')) && rec['OnPTO']).map(r => r[fieldName]))
});
result.push({
key: 'ceo',
label: 'CEO/President',
summaryResult: this.count(allData.filter((rec) => (rec[fieldName].includes('CEO') || rec[fieldName].includes('President')) && rec['OnPTO']).map(r => r[fieldName]))
});
return result;
}
}
igRegisterScript("WebTreeGridCustomSummary", (event) => {
if (event.detail.field === "Title") {
event.detail.summaries = PtoSummary;
}
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
.gridSize {
--ig-size: var(--ig-size-small);
}
css
Plantilla de resumen
Summary
apunta al resumen de la columna proporcionando como contexto los resultados del resumen de la columna.
<IgbColumn HasSummary="true" SummaryTemplateScript="SummaryTemplate">
</IgbColumn>
igRegisterScript("SummaryTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<div>
<span> ${ctx.implicit[0].label} - ${ctx.implicit[0].summaryResult} </span>
</div>`
}, false);
razor
Cuando se define un resumen predeterminado, la altura del área de resumen se calcula por diseño en función de la columna con el mayor número de resúmenes y la--ig-size
de la cuadrícula. Utilice la SummaryRowHeight
propiedad input para invalidar el valor predeterminado. Como argumento, espera un valor numérico, y establecer un valor falso desencadenará el comportamiento de tamaño predeterminado del pie de página de la cuadrícula.
using System;
using System.Collections.Generic;
public class EmployeesNestedTreeDataItem
{
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 EmployeesNestedTreeData
: List<EmployeesNestedTreeDataItem>
{
public EmployeesNestedTreeData()
{
this.Add(new EmployeesNestedTreeDataItem()
{
Age = 55,
HireDate = @"2008-03-20",
ID = 1,
Name = @"Johnathan Winchester",
Phone = @"0251-031259",
OnPTO = false,
ParentID = -1,
Title = @"Development Manager"
});
this.Add(new EmployeesNestedTreeDataItem()
{
Age = 42,
HireDate = @"2014-01-22",
ID = 4,
Name = @"Ana Sanders",
Phone = @"(21) 555-0091",
OnPTO = true,
ParentID = -1,
Title = @"CEO"
});
this.Add(new EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
Age = 44,
HireDate = @"2014-04-04",
ID = 14,
Name = @"Laurence Johnson",
Phone = @"981-443655",
OnPTO = false,
ParentID = 4,
Title = @"Director"
});
this.Add(new EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
Age = 39,
HireDate = @"2010-03-22",
ID = 13,
Name = @"Trevor Ashworth",
Phone = @"981-443655",
OnPTO = true,
ParentID = 5,
Title = @"Director"
});
this.Add(new EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
Age = 27,
HireDate = @"2016-02-19",
ID = 8,
Name = @"Casey Harper",
Phone = @"0342-023176",
OnPTO = true,
ParentID = 10,
Title = @"Senior Localization"
});
this.Add(new EmployeesNestedTreeDataItem()
{
Age = 25,
HireDate = @"2017-11-09",
ID = 15,
Name = @"Patricia Simpson",
Phone = @"069-0245984",
OnPTO = false,
ParentID = 7,
Title = @"Localization Intern"
});
this.Add(new EmployeesNestedTreeDataItem()
{
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 EmployeesNestedTreeDataItem()
{
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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebTreeGrid"
IsHorizontal="true"
IsWrappingEnabled="false"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
PropertyPath="SummaryRowHeight"
Label="Summary Row Height"
ValueType="PropertyEditorValueType.Number"
Name="SummaryRowHeightEditor"
@ref="summaryRowHeightEditor">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
Label="Toggle Summaries"
ValueType="PropertyEditorValueType.Boolean1"
PrimitiveValue="true"
Changed="WebTreeGridHasSummariesChange"
Name="ToggleSummariesEditor"
@ref="toggleSummariesEditor">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
Name="SizeEditor"
@ref="sizeEditor"
Label="Grid Size:"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "Small", "Medium", "Large" })"
DropDownValues="@(new string[] { "Small", "Medium", "Large" })"
ChangedScript="WebTreeGridSetGridSize">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="EmployeesNestedTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="Name">
</IgbColumn>
<IgbColumn
Field="Age"
DataType="GridColumnDataType.Number"
HasSummary="true"
SummaryTemplateScript="WebTreeGridSummaryTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Title"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="HireDate"
DataType="GridColumnDataType.Date">
</IgbColumn>
<IgbColumn
Field="OnPTO"
DataType="GridColumnDataType.Boolean"
Editable="true"
HasSummary="true">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditorPanel1 = this.propertyEditorPanel1;
var summaryRowHeightEditor = this.summaryRowHeightEditor;
var toggleSummariesEditor = this.toggleSummariesEditor;
var sizeEditor = this.sizeEditor;
var treeGrid = this.treeGrid;
var column1 = this.column1;
this.BindElements = () => {
propertyEditorPanel1.Target = this.treeGrid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription summaryRowHeightEditor;
private IgbPropertyEditorPropertyDescription toggleSummariesEditor;
private IgbPropertyEditorPropertyDescription sizeEditor;
private IgbTreeGrid treeGrid;
private IgbColumn column1;
public void WebTreeGridHasSummariesChange(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
{
bool newValue = bool.Parse(args.NewValue.ToString());
var treeGrid = this.treeGrid;
var column1 = treeGrid.GetColumns().ElementAt(1);
var column2 = treeGrid.GetColumns().ElementAt(2);
var column3 = treeGrid.GetColumns().ElementAt(4);
column1.HasSummary = newValue;
column2.HasSummary = newValue;
column3.HasSummary = newValue;
}
private EmployeesNestedTreeData _employeesNestedTreeData = null;
public EmployeesNestedTreeData EmployeesNestedTreeData
{
get
{
if (_employeesNestedTreeData == null)
{
_employeesNestedTreeData = new EmployeesNestedTreeData();
}
return _employeesNestedTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridSummaryTemplate", (ctx) => {
const style = document.createElement('style');
style.innerHTML = `
.summary-temp {
display: flex;
flex-direction: column;
margin: 0 1px;
font-size: 14px;
line-height: 24px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
> * {
padding: 8px 0;
line-height: 18px;
border-bottom: 1px dashed hsla(var(--igx-gray-400));
&:last-child {
border - bottom: none;
}
}
}
.summary-temp span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
justify-content: space-between;
color: hsla(var(--ig-gray-900));
}
.summary-temp span span {
user - select: all;
max-width: 300px;
padding-right: 8px;
}
.summary-temp span strong {
font - size: 12px;
text-transform: uppercase;
min-width: 70px;
justify-self: flex-start;
text-align: left;
color: hsla(var(--ig-secondary-600));
user-select: none;
}
`;
document.head.appendChild(style);
var html = window.igTemplating.html;
var summaryResults = ctx.implicit;
return html`<div class="summary-temp">
<span><strong>${summaryResults[0].label}</strong><span>${summaryResults[0].summaryResult}</span></span>
<span><strong>${summaryResults[1].label}</strong><span>${summaryResults[1].summaryResult}</span></span>
<span><strong>${summaryResults[2].label}</strong><span>${summaryResults[2].summaryResult}</span></span>
<span><strong>${summaryResults[3].label}</strong><span>${summaryResults[3].summaryResult}</span></span>
</div>`;
}, false);
igRegisterScript("WebTreeGridSetGridSize", (sender, evtArgs) => {
var newVal = evtArgs.newValue.toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Resúmenes infantiles
Admite IgbTreeGrid
resúmenes independientes para los nodos raíz y para cada nivel de nodo secundario anidado. Los resúmenes que se muestran se pueden configurar mediante la SummaryCalculationMode
propiedad. Los resúmenes de nivel secundario se pueden mostrar antes o después de los nodos secundarios que utilizan la SummaryPosition
propiedad. Junto con estas dos propiedades, la propiedad exposes y ShowSummaryOnCollapse
que le permite determinar si la IgbTreeGrid
fila de resumen permanece visible cuando se contrae el nodo primario al que se hace referencia.
Los valores disponibles de la propiedad SummaryCalculationMode
son:
RootLevelOnly
- Los resúmenes se calculan solo para los nodos de nivel raíz.ChildLevelsOnly
: los resúmenes se calculan solo para los niveles secundarios.RootAndChildLevels
: los resúmenes se calculan tanto para el nivel raíz como para el nivel secundario. Este es el valor predeterminado.
Los valores disponibles de la propiedad SummaryPosition
son:
Top
- La fila de resumen aparece antes de la lista de filas secundarias.Bottom
- La fila de resumen aparece después de la lista de filas secundarias. Este es el valor predeterminado.
La ShowSummaryOnCollapse
propiedad es booleana. Su valor predeterminado se establece en false, lo que significa que la fila de resumen se ocultará cuando se contraiga la fila principal. Si la propiedad se establece en true, la fila de resumen permanece visible cuando se contrae la fila principal.
La propiedad SummaryPosition solo se aplica a los resúmenes de nivel secundario. Los resúmenes de nivel raíz aparecen siempre fijos en la parte inferior de IgbTreeGrid.
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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbTreeGridModule)
);
await builder.Build().RunAsync();
}
}
}
cs
@using IgniteUI.Blazor.Controls
@inject IJSRuntime JS
<div class="container vertical ig-typography">
<div class="options vertical">
<IgbPropertyEditorPanel
DescriptionType="WebTreeGrid"
IsHorizontal="true"
IsWrappingEnabled="false"
Name="propertyEditorPanel1"
@ref="propertyEditorPanel1">
<IgbPropertyEditorPropertyDescription
Name="SummaryCalculationModeEditor"
@ref="summaryCalculationModeEditor"
Label="Summary Calculation Mode"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "rootLevelOnly", "childLevelsOnly", "rootAndChildLevels" })"
DropDownValues="@(new string[] { "rootLevelOnly", "childLevelsOnly", "rootAndChildLevels" })"
ChangedScript="WebTreeGridChangeSummaryCalculationMode">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
Name="SummaryPositionEditor"
@ref="summaryPositionEditor"
Label="Summary Position"
ValueType="PropertyEditorValueType.EnumValue"
DropDownNames="@(new string[] { "top", "bottom" })"
DropDownValues="@(new string[] { "top", "bottom" })"
ChangedScript="WebTreeGridChangeSummaryPosition">
</IgbPropertyEditorPropertyDescription>
<IgbPropertyEditorPropertyDescription
Label="Show summary row when group row is collapsed:"
PropertyPath="ShowSummaryOnCollapse"
Name="ShowSummaryOnCollapseEditor"
@ref="showSummaryOnCollapseEditor">
</IgbPropertyEditorPropertyDescription>
</IgbPropertyEditorPanel>
</div>
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID"
Sortable="true">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product"
HasSummary="true">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Price"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true">
</IgbColumn>
<IgbColumn
Field="Delivered"
DataType="GridColumnDataType.Boolean">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
private Action BindElements { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var propertyEditorPanel1 = this.propertyEditorPanel1;
var summaryCalculationModeEditor = this.summaryCalculationModeEditor;
var summaryPositionEditor = this.summaryPositionEditor;
var showSummaryOnCollapseEditor = this.showSummaryOnCollapseEditor;
var treeGrid = this.treeGrid;
this.BindElements = () => {
propertyEditorPanel1.Target = this.treeGrid;
};
this.BindElements();
}
private IgbPropertyEditorPanel propertyEditorPanel1;
private IgbPropertyEditorPropertyDescription summaryCalculationModeEditor;
private IgbPropertyEditorPropertyDescription summaryPositionEditor;
private IgbPropertyEditorPropertyDescription showSummaryOnCollapseEditor;
private IgbTreeGrid treeGrid;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridChangeSummaryCalculationMode", (sender, evtArgs) => {
var treeGrid = document.getElementById("treeGrid");
treeGrid.summaryCalculationMode = evtArgs.newValue;
}, false);
igRegisterScript("WebTreeGridChangeSummaryPosition", (sender, evtArgs) => {
var treeGrid = document.getElementById("treeGrid");
treeGrid.summaryPosition = evtArgs.newValue;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
css
Navegación por teclado
Se puede navegar por las filas de resumen con las siguientes interacciones de teclado:
- ARRIBA: navega una celda hacia arriba.
- ABAJO: navega una celda hacia abajo.
- IZQUIERDA: navega una celda hacia la izquierda.
- DERECHA: navega una celda hacia la derecha.
- CTRL + IZQUIERDA o INICIO: navega a la celda más a la izquierda.
- CTRL + DERECHA o FINAL: navega a la celda más a la derecha.
Estilo
Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:
<IgbTreeGrid class="grid"></IgbTreeGrid>
razor
Luego configure las propiedades CSS relacionadas para esa clase:
.grid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
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(IgbInputModule),
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/
*/
#treeGrid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
</style>
<div class="container vertical ig-typography">
<div class="container vertical fill">
<IgbTreeGrid
AutoGenerate="false"
Data="OrdersTreeData"
Name="treeGrid"
@ref="treeGrid"
Id="treeGrid"
PrimaryKey="ID"
ForeignKey="ParentID">
<IgbColumn
Field="ID"
Header="Order ID">
</IgbColumn>
<IgbColumn
Field="Name"
Header="Order Product"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column1"
@ref="column1">
</IgbColumn>
<IgbColumn
Field="Category"
Header="Category"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column2"
@ref="column2">
</IgbColumn>
<IgbColumn
Field="Units"
Header="Units"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column3"
@ref="column3">
</IgbColumn>
<IgbColumn
Field="UnitPrice"
Header="Unit Price"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column4"
@ref="column4">
</IgbColumn>
<IgbColumn
Field="Price"
Header="Price"
DataType="GridColumnDataType.Number"
HasSummary="true"
Editable="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column5"
@ref="column5">
</IgbColumn>
<IgbColumn
Field="Delivered"
Header="Delivered"
DataType="GridColumnDataType.Boolean"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column6"
@ref="column6">
</IgbColumn>
<IgbColumn
Field="OrderDate"
Header="Order Date"
DataType="GridColumnDataType.Date"
HasSummary="true"
HeaderTemplateScript="WebTreeGridSummariesHeaderTemplate"
Name="column7"
@ref="column7">
</IgbColumn>
</IgbTreeGrid>
</div>
</div>
@code {
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var treeGrid = this.treeGrid;
var column1 = this.column1;
var column2 = this.column2;
var column3 = this.column3;
var column4 = this.column4;
var column5 = this.column5;
var column6 = this.column6;
var column7 = this.column7;
}
private IgbTreeGrid treeGrid;
private IgbColumn column1;
private IgbColumn column2;
private IgbColumn column3;
private IgbColumn column4;
private IgbColumn column5;
private IgbColumn column6;
private IgbColumn column7;
private OrdersTreeData _ordersTreeData = null;
public OrdersTreeData OrdersTreeData
{
get
{
if (_ordersTreeData == null)
{
_ordersTreeData = new OrdersTreeData();
}
return _ordersTreeData;
}
}
}
razor
igRegisterScript("WebTreeGridSummariesHeaderTemplate", (ctx) => {
var html = window.igTemplating.html;
window.toggleSummary = function toggleSummary(column) {
column.hasSummary = !column.hasSummary;
}
return html`<div>
<span style="float:left">${ctx.column.field}</span>
<span style="float:right; color:${ctx.column.hasSummary ? '#e41c77' : ''}" @pointerdown=${() => toggleSummary(ctx.column)}>∑</span>
</div>`;
}, false);
js/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
#treeGrid {
--ig-grid-summary-background-color:#e0f3ff;
--ig-grid-summary-focus-background-color: rgba( #94d1f7, .3 );
--ig-grid-summary-label-color: rgb(228, 27, 117);
--ig-grid-summary-result-color: black;
}
css
Referencias de API
SummaryOperand
NumberSummaryOperand
DateSummaryOperand
IgbColumnGroup
IgbColumn
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.