Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
Blazor Column Summaries
La tabla de datos Ignite UI for Blazor / cuadrícula de datos admite resúmenes de columnas. En algunos casos, los usuarios finales pueden sentirse abrumados por la cantidad de datos que se muestran en la cuadrícula y, a menudo, pueden estar buscando un resumen de los datos. Es posible que los usuarios finales también deseen obtener información adicional de los datos de una columna específica. Los resúmenes ayudan a los usuarios finales a conseguirlo, y puede habilitarlos estableciendo la SummaryScope propiedad.
using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbDataGridModule),
typeof(IgbGridColumnOptionsModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
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.
Propiedad de alcance resumido
La cuadrícula de datos de Blazor admite 4 opciones de resumen que puede configurar mediante la SummaryScope propiedad. Estos se enumeran y describen a continuación:
Root: esto mostrará un total general para todas las filas de la cuadrícula de la columna a la que se aplica el resumen.
Groups: esto es específico de filas agrupadas y muestra el total general de todas las filas de un grupo en particular.
Both: Esto utilizará las opciones Groups y Root simultáneamente.
None: esto deshabilitará los resúmenes de la cuadrícula.
Propiedad del modo de visualización de resumen de grupo
La cuadrícula de datos de Blazor admite la configuración de las ubicaciones en las que se muestran los resúmenes. Puede configurarlo mediante la GroupSummaryDisplayMode propiedad. Las diferentes opciones para esta propiedad se enumeran y describen a continuación:
Lista: esto mostrará los resúmenes del grupo en una lista plana en el encabezado del grupo que abarca.
Celdas: esto representará el encabezado del grupo como celdas y los valores de resumen se representarán dentro de las celdas, alineados con su columna correspondiente. La cuadrícula solo mostrará un resumen por columna usando esta opción.
RowTop: esto mostrará los resúmenes del grupo como filas de resumen en la parte superior del grupo.
RowBottom: esto mostrará los resúmenes del grupo como filas de resumen en la parte inferior del grupo.
Ninguno: esto deshabilitará la representación del resumen del grupo.
Fragmentos de código
<IgbDataGridHeight="500px"Width="100%"
@ref="DataGridRef"SummaryScope="DataSourceSummaryScope.Root"GroupSummaryDisplayMode="GroupSummaryDisplayMode.RowTop"AutoGenerateColumns="false"IsGroupCollapsable="true"GroupHeaderDisplayMode="DataSourceSectionHeaderDisplayMode.Combined"DataSource="DataSource"><IgbTextColumnField="ProductName"Width="130"HeaderText="Product" /><IgbNumericColumnField="BundlePrice"PositivePrefix="$"Width="120"ShowGroupingSeparator="true"HeaderText="Price" /><IgbNumericColumnField="OrderItems"Width="140"HeaderText="Orders" /><IgbNumericColumnField="OrderValue"Width="160"ShowGroupingSeparator="true"HeaderText="Order Totals"PositivePrefix="$" /><IgbTextColumnField="Country"Width="170"HeaderText="Ship Country" /></IgbDataGrid>@code {private IgbDataGrid grid;
private IgbDataGrid DataGridRef
{
get { return grid; }
set
{
grid = value;
this.OnDataGridRef();
StateHasChanged();
}
}
privatevoidOnDataGridRef()
{
var productCount = new ColumnSummaryDescription() { Field = "ProductName", Operand = SummaryOperand.Count };
var priceMin = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Min };
var priceMax = new ColumnSummaryDescription() { Field = "BundlePrice", Operand = SummaryOperand.Max };
var orderSum = new ColumnSummaryDescription() { Field = "OrderItems", Operand = SummaryOperand.Sum };
var orderValueAvg = new ColumnSummaryDescription() { Field = "OrderValue", Operand = SummaryOperand.Average };
this.DataGridRef.SummaryDescriptions.Add(productCount);
this.DataGridRef.SummaryDescriptions.Add(priceMin);
this.DataGridRef.SummaryDescriptions.Add(priceMax);
this.DataGridRef.SummaryDescriptions.Add(orderSum);
this.DataGridRef.SummaryDescriptions.Add(orderValueAvg);
}
}razor