Ignite UI for Blazor proporciona una biblioteca completa de componentes de interfaz de usuario nativos Blazor y basados en Material, incluida la cuadrícula de datos Blazor virtualizada más rápida del mundo.
En este ejemplo de cuadrícula Blazor, puede ver cómo los usuarios pueden personalizar su vista de datos aprovechando las distintas funciones integradas en la cuadrícula, como la búsqueda y el filtrado de datos, la clasificación, el cambio de tamaño, la fijación y ocultación de columnas, la selección de filas, la exportación a Excel y CSV, y el desplazamiento horizontal y vertical. Hemos proporcionado ejemplos de plantillas de celdas que incluyen componentes como el indicador de barra de progreso lineal y el minigráfico. Vea más funciones aquí.
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(IgbGridModule)
);
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/
*/#grid {
--ig-size: var(--ig-size-medium);
}
</style><divclass="container vertical ig-typography"><divclass="container vertical fill"><IgbGridAutoGenerate="false"Id="grid"Name="grid"
@ref="grid"Data="NwindData"PrimaryKey="ProductID"AllowFiltering="true"FilterMode="FilterMode.ExcelStyleFilter"><IgbPaginatorPerPage="10"></IgbPaginator><IgbColumnField="ProductName"Header="Product Name"DataType="GridColumnDataType.String"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="UnitPrice"Header="Unit Price"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="UnitsInStock"Header="Units in Stock"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="OrderDate"Header="Order Date"DataType="GridColumnDataType.Date"Sortable="true"HasSummary="true"Editable="true"Resizable="true"></IgbColumn><IgbColumnField="Discontinued"Header="Discontinued"DataType="GridColumnDataType.Boolean"Sortable="true"HasSummary="true"Editable="true"BodyTemplateScript="WebGridBooleanCellTemplate"Name="column1"
@ref="column1"></IgbColumn><IgbColumnField="ReorderLevel"Header="Reorder Level"DataType="GridColumnDataType.Number"Sortable="true"HasSummary="true"Editable="true"Filterable="true"></IgbColumn></IgbGrid></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var grid = this.grid;
var column1 = this.column1;
}
private IgbGrid grid;
private IgbColumn column1;
private NwindData _nwindData = null;
public NwindData NwindData
{
get
{
if (_nwindData == null)
{
_nwindData = new NwindData();
}
return _nwindData;
}
}
}razor
igRegisterScript("WebGridBooleanCellTemplate", (ctx) => {
var html = window.igTemplating.html;
if (ctx.cell.value) {
return html`<imgsrc="https://static.infragistics.com/xplatform/images/grid/active.png"title="Continued"alt="Continued" />`
} else {
return html`<imgsrc="https://static.infragistics.com/xplatform/images/grid/expired.png"title="Discontinued"alt="Discontinued" />`;
}
}, false);
js
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/#grid {
--ig-size: var(--ig-size-medium);
}
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.
¿Qué es una cuadrícula Blazor?
La cuadrícula de datos Blazor es un componente que se utiliza para mostrar datos tabulares en una serie de filas y columnas. Las cuadrículas de datos, también conocidas como tablas, son muy conocidas en el mundo de los escritorios con software popular como Microsoft Excel. Si bien las cuadrículas han estado disponibles en plataformas de escritorio durante mucho tiempo, recientemente se han convertido en parte de las interfaces de usuario de aplicaciones web, como Blazor UI. Las cuadrículas modernas pueden ser complejas y pueden incluir una variedad de funcionalidades, que incluyen enlace de datos, edición, filtrado similar al de Excel, ordenación personalizada, agrupación, reordenamiento de filas, congelamiento de filas y columnas, agregación de filas y exportación a formatos Excel, CSV y PDF.
¿Por qué utilizar una cuadrícula Blazor?
Las cuadrículas de datos Blazor son esenciales en casos de uso en los que se deben almacenar y clasificar rápidamente una gran cantidad de datos. Esto puede incluir industrias como la financiera o la de seguros que utilizan datos de gran volumen y alta velocidad con frecuencia. A menudo, el éxito de estas empresas depende de la funcionalidad y el rendimiento de estas cuadrículas de datos. Cuando se deben tomar decisiones bursátiles en microsegundos, por ejemplo, es imperativo que la cuadrícula de datos funcione sin retrasos ni parpadeos.
Características clave
La Ignite UI for Blazor Data Grid no es solo para datos de gran volumen y en tiempo real. Es una cuadrícula Blazor repleta de funciones que le brinda capacidades que nunca podría lograr con tan poco código por su cuenta.
Estas son algunas de las características clave de la cuadrícula de datos:
[**Filas y columnas virtualizadas**](grid/virtualization.md) para que puedas cargar millones de registros
[**Edición en línea**](grid/editing.md) con [**Celda**](grid/cell-editing.md) y [**Fila**](grid/row-editing.md) Opciones de actualización
[**Filtrado estilo Excel**](grid/excel-style-filtering.md) y capacidad completa de [**Navegación con teclado Excel**](grid/keyboard-navigation.md)
Interactivo [**Agrupación estilo Outlook**](grid/groupby.md)
[**Resúmenes de columnas**](grid/summaries.md) basado en cualquier dato en una celda o columna de la cuadrícula
[**Tamaño**] (grid/size.md) para ajustar la altura y el tamaño de las filas
Virtualización y rendimiento de datos
Desplácese sin problemas por un número ilimitado de filas y columnas en su cuadrícula Blazor, con la virtualización a nivel de filas y columnas de la cuadrícula de datos. Con soporte para fuentes de datos locales o remotas, obtendrá el mejor rendimiento sin importar dónde se encuentren sus datos. Sus usuarios experimentarán un desplazamiento similar al de Excel, con velocidad empresarial (sin demoras, parpadeos de pantalla ni retrasos visuales), lo que le brindará la mejor experiencia de usuario (UX) sin comprometer el rendimiento.
Rápido y fácil de personalizar, construir e implementar
La cuadrícula de datos Blazor Ignite UI puede manejar filas y columnas ilimitadas de datos, a la vez que brinda acceso a plantillas personalizadas y actualizaciones de datos en tiempo real. Con una API intuitiva para crear temas y marcas fácilmente, puede vincularse rápidamente a los datos con un código mínimo.
Paginación, ordenación, filtrado y búsqueda en cuadrículas Blazor
Permita que los usuarios naveguen por su conjunto de datos con nuestro [buscapersonas] predeterminado (grid/paging.md) o cree su propia plantilla para brindar su propia experiencia de paginación. Con soporte completo para clasificación de una o varias columnas, [búsqueda] de texto completo (grid/search.md) en la cuadrícula y varias opciones de [filtrado avanzado](grid/advanced-filtering.md), incluidas las basadas en tipos de datos. [Filtrado estilo Microsoft Excel] (grid/excel-style-filtering.md).
Edición de cuadrícula en línea Blazor
Le proporcionamos [plantillas de celda para columnas editables] predeterminadas (data-grid.md#cell-editing-template) que se basan en el tipo de datos de la columna. Puede definir sus propias plantillas personalizadas para columnas editables y anular el comportamiento predeterminado para confirmar y descartar cambios en el valor de la celda.
Navegación por teclado y selección de fila/celda
Asegúrese de que se cumplan las normas de accesibilidad y mejore la usabilidad, habilitando la [navegación con teclado](grid/keyboard-navigation.md) similar a la de Excel en la cuadrícula de datos Blazor, utilizando las teclas arriba, abajo, derecha, izquierda, tabulador e Intro. Puede alternar la selección de una o varias filas en la cuadrícula Blazor utilizando el mouse o el teclado para seleccionar o deseleccionar filas completas, o utilizar la casilla de verificación integrada Seleccionar todo/Deseleccionar todo en la barra de herramientas de la cuadrícula para trabajar con la selección de filas. Obtenga más información sobre nuestras mejoras más recientes a esta función.
Accesibilidad de Blazor Grid y compatibilidad con ARIA
Cada uno de nuestros componentes Blazor en Ignite UI for Blazor se ha implementado de acuerdo con las últimas pautas y especificaciones de accesibilidad. Nuestros componentes Blazor se han probado utilizando tecnología de accesibilidad proporcionada por el sistema operativo o el navegador: lectores de pantalla. Nuestro equipo no solo se asegura de que se implementen las pautas, sino también de que el contenido real entregado a las personas ciegas o con discapacidad visual sea realmente consumible y fácil de usar para ellas. La cuadrícula de datos Ignite UI for Blazor es completamente accesible con accesibilidad de teclado a11y, ARIA y una paleta de colores accesible. Obtenga más información.
Agrupación de columnas, fijación, resúmenes
Agrupe columnas o grupos de columnas preestablecidos mediante la interacción del mouse, el tacto o nuestra API, con soporte para [resúmenes] de columnas integrados (grid/summaries.md) o plantillas de resumen personalizadas. Permita a los usuarios [ocultar](grid/column-hiding.md) o [mover columnas](grid/column-moving.md) de forma interactiva, con soporte completo para [fijar columnas](grid/column-pinning.md) interactivo, durante las operaciones de mover, arrastrar y reordenar.
Encabezados de varias columnas
Habilite [encabezados de varias columnas] (grid/multi-column-headers.md), lo que le permitirá agrupar columnas bajo un encabezado común. Cada grupo de columnas podría ser una representación de combinaciones entre otros grupos o columnas, con soporte completo para fijar columnas, mover columnas interactivas dentro de grupos, ordenar y ocultar grupos.
Características de Blazor Grid
[Inline Editing](grid/editing.md)
[Filtrado de filas y columnas](grid/filtering.md)
[Grid Sorting](grid/sorting.md)
[Agrupación de columnas](grid/groupby.md)
[Column Summaries](grid/summaries.md)
[Columnas fijas/fijadas](grid/column-pinning.md)
[Columna en movimiento](grid/column-moving.md)
[Estilo de celda](grid/condicional-cell-styling.md)
¿Por qué debería elegir Infragistics Ignite UI for Blazor Data Grid?
[Filas y columnas virtualizadas](grid/virtualization.md) para que puedas cargar millones de registros
[Filtrado estilo Excel](grid/excel-style-filtering.md) y capacidad completa de [Navegación por teclado Excel](grid/keyboard-navigation.md)
Interactivo [Agrupación estilo Outlook](grid/groupby.md)
[Resúmenes de columnas](grid/summaries.md) basado en cualquier dato en una celda o columna de la cuadrícula
[Tamaño] (grid/size.md) para ajustar la altura y el tamaño de las filas
¿Cuál es el precio de la interfaz de usuario Infragistics Ignite UI for Blazor Data Grid?
Nuestros componentes Blazor están incluidos como parte de nuestro paquete de Ignite UI. Una sola licencia de desarrollador comienza en $ 1,295 USD por una suscripción de un año, que incluye un año de soporte y actualizaciones estándar. También ofrecemos descuentos para licencias de varios años. Consulte nuestra página de precios para obtener más información sobre los precios.Si está desarrollando aplicaciones en varias plataformas, considere nuestro paquete completo de desarrollo de aplicaciones, Infragistics Ultimate, que incluye plataformas de escritorio como WPF y Windows Forms, además de todos los conjuntos de herramientas web modernos para Blazor, Web Components, ASP.NET MVC y ASP.NET Core.
¿Puedo comprar la interfaz de usuario Infragistics Ignite UI for Blazor Data Grid por separado?
No, no puede comprar el Blazor Data Grid por separado. Es parte de un producto de Ignite UI for Blazor, que incluye docenas de controles y componentes de interfaz de usuario, además de más de 60 gráficos, incluido Blazor Financial Charting. Si está interesado en otras plataformas web modernas como Angular, ASP.NET MVC, Web Components o ASP.NET Blazor, consulte nuestro paquete de productos Ignite UI, que le brinda todas las plataformas web por solo $ 100 más en su suscripción. Es decir, cientos de controles, componentes y visualizaciones de datos por un precio muy bajo.
How do I Install Blazor and the Infragistics Ignite UI for Blazor Data Grid control?
Para comenzar a usar la cuadrícula de datos de Blazor, siga los pasos de la [guía de introducción](.. /general-getting-started.md). También mantenemos una biblioteca de aplicaciones de muestra, que están diseñadas no solo para inspirar, sino también para ser guías de mejores prácticas para el desarrollo Blazor.