Blazor DataGrid - Un componente de cuadrícula personalizable
- Carga millones de registros en segundos.
- Diseño adaptable para móviles.
- Edición flexible y selección intuitiva.
- Personalización total de columnas y datos.
- Exportación sencilla a PDF, CSV y Excel.
- Optimizado para grandes volúmenes.
Quick Overview Video
Confiado por las empresas líderes del mundo
Resumen
El Blazor DataGrid, también conocido como Blazor Grid, es un componente rico en funciones útil para mostrar datos en un formato tabular. Su amplia gama de funcionalidades incluye enlace de datos, diseño de interfaz de usuario adaptable para todos los dispositivos, edición, filtrado similar a Excel, clasificación personalizada, agregación de filas, selección y compatibilidad con formatos Excel, CSV y PDF.
¿Por qué elegir Syncfusion Essential Studio® Blazor DataGrid?
Alto rendimiento
Esfuerzos bien pensados, y se centra principalmente en el rendimiento rápido para cargar millones de registros en solo un segundo.
Enlace de datos sin problemas
Enlace datos sin problemas con varias fuentes de datos locales y remotas, como IEnumerable/List, servicios RESTful, servicios OData, servicios WCF, Observable Collection, ExpandoObject y DynamicObject.
Se adapta a cualquier resolución
DataGrid tiene un diseño altamente responsivo y un diseño optimizado para escritorios, pantallas táctiles y teléfonos inteligentes. Funciona bien en todos los teléfonos móviles que usan iOS, Android o Windows OS.
Edición flexible
El Blazor Grid realiza operaciones de crear, leer, actualizar y eliminar más fácilmente con una lista de objetos de negocio o un servicio de datos remoto con la ayuda de un administrador de datos.
Cree sus propios diseños de plantilla
Permite a los usuarios crear experiencias de usuario personalizadas en el Blazor Grid según las necesidades de su aplicación utilizando una amplia gama de opciones de plantilla.
Temas personalizables atractivos
Diseño de vanguardia con más de 5 temas incorporados como Fluent, Tailwind CSS, Bootstrap, Material, Fabric y más. Utilice la herramienta en línea Theme Studio para personalizar temas fácilmente.
Exportación e impresión sencillas
Exporte la cuadrícula de datos en varios formatos de archivo, incluidos Excel, PDF y CSV. Imprima todas las filas, independientemente del número de páginas, así como la página que se está viendo actualmente.
Globalización y localización
Permite a los usuarios de diferentes regiones utilizarla formateando fechas, moneda y numeración para adaptarse a las preferencias.
Cuadrícula preparada para IA para datos más inteligentes
Cree aplicaciones Blazor más inteligentes con un DataGrid que admita funciones de IA de forma predeterminada. Agregue búsqueda semántica y detección de anomalías para descubrir información y mejorar la fiabilidad de los datos.
-
Búsqueda semántica: Conecte su modelo de procesamiento de lenguaje natural (PNL) para habilitar consultas en lenguaje natural, eliminando la necesidad de palabras clave exactas.
- Vea cómo agregar búsqueda semántica
-
Detección de anomalías: Integre servicios de aprendizaje automático (ML) para identificar tendencias irregulares y prevenir problemas de datos.
- Vea cómo agregar detección de anomalías
Ejemplo de código de Blazor DataGrid
Comience fácilmente con el Blazor DataGrid usando unas pocas líneas de código C# como se muestra a continuación. Explore también nuestro Ejemplo de Blazor DataGrid que le muestra cómo renderizar y configurar el Blazor Grid.
@using Syncfusion.Blazor.Grids
<SfGrid DataSource="@Orders">
</SfGrid>
@code{
public List<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order {
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}Diseño adaptable de la interfaz de usuario
La interfaz de usuario de Blazor Data Grid se personaliza y rediseña para obtener excelentes vistas y usabilidad en pantallas pequeñas. Sus funciones incluyen filtro, ordenación, búsqueda, selector de columnas, menú de columnas, desplegable de paginador y diálogos de edición que se adaptan al tamaño de la pantalla y renderizan los elementos de la fila en dirección vertical.
Columna
Las columnas definen el esquema de la fuente de datos en el componente Blazor DataGrid. Admite formato, generación automática de columnas, definiciones de columna, congelación de filas y columnas, expansión de columnas, ajuste de texto, selector de columnas, menú de columnas y otras características.
Paginación
Mediante la paginación, se puede ver un segmento de datos de la fuente de datos asignada. El Blazor DataGrid ofrece una interfaz de usuario de paginación incorporada con opciones para personalizar toda su interfaz de usuario. También tiene un modo de paginación bajo demanda para una recuperación eficiente de datos de servicios web remotos.
Ordenación
Ordene las filas en orden ascendente o descendente según una columna simplemente haciendo clic en el encabezado. Ordene los datos de varias columnas manteniendo presionada la tecla Ctrl + clic en el encabezado. Además, puede definir su propia lógica de ordenación personalizada según las necesidades de la aplicación en Blazor DataGrid.
Filtrado
El filtrado ayuda a ver registros particulares o relacionados que cumplen con un criterio dado en la cuadrícula de datos. El Blazor DataData admite varios tipos de filtro, incluidos potentes filtros similares a Excel. Elija el tipo de filtro apropiado, defina su propia lógica de filtrado personalizada y personalice la interfaz de usuario de filtrado según las necesidades de la aplicación. También se pueden filtrar caracteres diacríticos.
Selección
El Blazor DataGrid permite seleccionar filas o celdas. También se pueden seleccionar una o más filas o celdas manteniendo presionada la tecla Ctrl o Comando, o programáticamente.
Edición
El Blazor DataGrid ofrece soporte completo para las operaciones de crear, leer, actualizar y eliminar (CRUD). Además de los componentes de editor integrados para editar un valor de columna particular, se pueden crear componentes de editor personalizados utilizando plantillas según las necesidades de la aplicación. Con la ayuda de un administrador de datos, puede realizar operaciones de edición con una colección de arreglos o un servicio de datos remoto.
Agrupación
Agrupe filas para mostrar los datos en una estructura jerárquica organizada en orden ascendente o descendente para facilitar la expansión y el colapso de los registros. Existe una opción para agrupar registros de la columna deseada mediante la sencilla operación de arrastrar y soltar de esa columna en un área de destino interactiva.
Agregación
Los agregados para los valores de las columnas se pueden mostrar fácilmente utilizando la función de agregación. Los agregados se pueden personalizar para mostrar los valores en filas de resumen individuales, filas de resumen de grupo individuales o filas de título de grupo.
Filas y columnas congeladas
Las filas y columnas congeladas son visibles en la parte superior y a la izquierda, derecha, en ambas, o en una posición fija, respectivamente, lo que hace que el contenido restante de la cuadrícula sea desplazable. Esta característica se utiliza principalmente para comparar valores de celda en el componente JavaScript DataGrid.
Encabezado fijo
El encabezado de Blazor Data Grid debe estar en una posición fija al desplazar el documento verticalmente para visualizar el contenido de la cuadrícula de datos junto con el encabezado de la columna.
Arrastrar y soltar filas
El Blazor Grid permite a los usuarios arrastrar y soltar filas a otro DataGrid o componente personalizado. Los usuarios también pueden arrastrar y soltar filas dentro del mismo DataGrid usando el icono de arrastre y transferir filas entre diferentes grupos.
Grid maestro-detalle
Blazor Master Detail Grid es un escenario de caso de uso en el que los detalles de un registro se ven en una cuadrícula de datos separada al hacer clic en una fila en particular.
Blazor Live DataGrid
Live Blazor DataGrid está optimizado para manejar y actualizar un gran número de registros en tiempo real, adecuado para enlazar registros financieros y más.
Características adicionales
Altura de fila
La altura de la fila es un factor importante al mostrar el número de registros en la ventana de visualización, y es fácilmente personalizable según los requisitos de la interfaz de usuario de la aplicación. También es posible establecer la altura de la fila de forma condicional.
Copiar al portapapeles
El portapapeles permite a los usuarios copiar los datos de las filas o celdas seleccionadas. Utilice las combinaciones de teclas Ctrl+C y Ctrl+Shift+H para copiar datos con y sin encabezados, respectivamente.
Menú contextual
Realiza varias acciones en un JavaScript DataGrid utilizando el menú emergente que aparece al hacer clic con el botón derecho en la celda, el encabezado o el paginador. Además de los elementos de menú predeterminados integrados, se pueden agregar elementos de menú contextual personalizados.
Ancho y alto
Establezca las propiedades de ancho y alto para cambiar el tamaño de la cuadrícula de datos. Cuando el contenido desborda el elemento de la cuadrícula, aparecerán barras de desplazamiento horizontales y verticales. Para llenar el contenedor principal de la cuadrícula de datos, simplemente establezca la altura y el ancho en 100%.
Encabezados apilados
Los encabezados apilados permiten agrupar y visualizar los encabezados de las columnas de forma apilada. El número de columnas que se pueden apilar es ilimitado. Realice todas las acciones del Blazor Data Grid incluso cuando las columnas estén apiladas.
Información sobre herramientas
Mejore la experiencia del usuario con información sobre herramientas que admite contenido enriquecido en Blazor DataGrid. Muestre imágenes, iconos y componentes personalizados junto con texto sin formato para interacciones más contextuales y visualmente atractivas que mejoren la claridad y la usabilidad dentro de la interfaz de la cuadrícula.
Accesibilidad
Navegación por teclado
Blazor DataGrid garantiza que cada celda sea accesible mediante teclado. Las funciones principales como ordenar, seleccionar y editar se pueden realizar solo con comandos de teclado; no se requiere interacción con el ratón. Esto ayuda a crear aplicaciones altamente accesibles utilizando este componente.
Lector de pantalla
La vista de Blazor DataGrid tiene soporte completo de accesibilidad WAI-ARIA. La interfaz de usuario de Blazor Data Grid incluye elementos visuales de alto contraste, lo que ayuda a las personas con discapacidad visual a tener la mejor experiencia de visualización. Además, las descripciones válidas de la interfaz de usuario son fácilmente accesibles a través de tecnologías de asistencia como los lectores de pantalla.
De derecha a izquierda (RTL)
La representación de derecha a izquierda permite mostrar el texto y el diseño de Blazor DataGrid de derecha a izquierda. Esto mejora la experiencia del usuario y la accesibilidad para los idiomas RTL.
Optimizado para dispositivos móviles y fácil de usar con el tacto
El Blazor Grid tiene un diseño altamente responsivo y un diseño finamente optimizado para escritorios, pantallas táctiles y teléfonos inteligentes.
Soporte táctil
Los gestos táctiles fáciles de usar y el diseño de interfaz de usuario interactiva ayudan a producir la mejor experiencia de usuario. Todas las funciones de Blazor Grid funcionan en dispositivos táctiles con cero configuración.
Paginador responsivo
El paginador de Blazor DataGrid actúa de forma inteligente y cambia su interfaz de usuario completa de forma responsiva en función de la dimensión de la cuadrícula. Su diseño optimizado proporciona la mejor interacción de la interfaz de usuario en diferentes dispositivos.
Otros frameworks compatibles
El DataGrid está disponible para los frameworks React, Angular, JavaScript y Vue. Explore sus opciones específicas de plataforma a través de los siguientes enlaces:
Navegadores compatibles
El Blazor DataGrid funciona bien con todos los navegadores web modernos, incluidos Chrome, Firefox, Edge, Safari y Opera.
¿No está seguro de cómo crear su primer Blazor DataGrid? Nuestros videotutoriales y documentación pueden ayudarle.
Me encantaría verlo ahora Comenzar con Blazor Server-side DataGridComponentes de Blazor: más de 145 componentes de interfaz de usuario y DataViz
TODOS LOS COMPONENTES
COMPONENTES INTELIGENTES
CUADRÍCULAS
VISUALIZACIÓN DE DATOS
ENTRADAS DE DATOS
EDITORES
MENÚS DESPLEGABLES
BOTONES
CHAT INTERACTIVO
NAVEGACIÓN
NOTIFICACIÓN
FORMULARIOS
Preguntas frecuentes
¿Por qué debería elegir Syncfusion Essential Studio® Blazor DataGrid?
El componente Blazor Grid de Syncfusion admite las siguientes características:
Carga millones de registros en solo un segundo.
Enlace de datos flexible con soporte para usar fuentes de datos como Web API, OData, Entity Framework y más.
Rica interacción de interfaz de usuario y navegación por teclado tanto en aplicaciones Blazor del lado del servidor como del lado del cliente (WebAssembly).
Repleto de una gran cantidad de características con opciones de personalización adecuadas para construir aplicaciones complejas y a gran escala.
- Uno de los mejores Blazor DataGrid del mercado que ofrece una interfaz de usuario rica en funciones para interactuar con el software.
Configuración y API sencillas.
- Compatible con todos los navegadores modernos.
- Amigable con el tacto móvil y responsivo.
Demostraciones extensas, documentación y vídeos para aprender rápidamente y empezar a usar Blazor DataGrid.
¿Cuál es el precio de Syncfusion Blazor DataGrid?
No vendemos el Blazor DataGrid por separado. Solo está disponible para su compra como parte de la licencia de equipo de Syncfusion, que contiene más de 145 componentes Blazor, incluido el DataGrid. El precio de la licencia de equipo comienza en $395 al mes para 5 desarrolladores, e incluye soporte y actualizaciones hasta que expire la suscripción. Además de esto, podríamos ofrecer descuentos adicionales basados en las promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Dónde puedo encontrar la demostración de Syncfusion Blazor DataGrid?
Puede encontrar nuestra demostración de Blazor DataGrid, que muestra cómo renderizar y configurar el DataGrid.
¿Puedo comprar el componente Syncfusion Blazor DataGrid por separado?
No, nuestros más de 1,600 componentes y frameworks para web, móvil y escritorio, incluido nuestro Blazor DataGrid, no se venden individualmente. Solo están disponibles como parte de una licencia de equipo. Sin embargo, hemos puesto un precio competitivo al producto, por lo que solo cuesta un poco más de lo que algunos otros proveedores cobran solo por su componente DataGrid. También hemos descubierto que, en nuestra experiencia, nuestros clientes suelen empezar usando uno de nuestros productos y luego se expanden rápidamente a varios productos, por lo que consideramos que era mejor ofrecer todos los más de 1,600 componentes y frameworks por una tarifa de suscripción que comienza en $395 al mes para un equipo de 5 desarrolladores. Además, podríamos ofrecer descuentos basados en las promociones activas actualmente. Póngase en contacto con nuestros especialistas de producto hoy mismo para ver si califica para algún descuento adicional.
¿Puedo descargar y usar el Syncfusion Blazor DataGrid de forma gratuita?
No, este es un producto comercial y requiere una licencia de pago. Sin embargo, también existe una licencia comunitaria gratuita para empresas e individuos cuyas organizaciones tengan ingresos brutos anuales inferiores a 1 millón de USD y cinco o menos desarrolladores.
¿Cómo empiezo con Syncfusion Blazor DataGrid?
Un buen punto de partida sería nuestra completa documentación de inicio.
Nuestros clientes nos aman
Con un excelente conjunto de herramientas y un gran equipo de soporte, Syncfusion® reduce el tiempo de desarrollo de los clientes.Estas son algunas de sus experiencias.
The best tool to operate grid-like data out there
Good documentation helps you with everything you need to know. What I like the most is that it takes you from configuration to usage. I have mainly used grid and toolbar options along with dashboard.
Ivan G,
Business Application Developer
Superior components:any day anytime
Essential Studio is one of a kind. The fact that they give us the community developer license has always shown how much they value the small teams creating their own startups. Essential Studio has helped a lot in my almost ready business intelligence platform for the healthcare industry. The grid and the kanban components are what made us fall in love with all the other components.
Kelvin M.
Software Development Engineer
Calificado por usuarios de todo el mundo
Recursos de Syncfusion Blazor DataGrid
Kits de IU
Descarga de Figma
Descarga de Figma
Premios
Grandeza: Decir que la tienes es una cosa, pero significa más cuando otros la reconocen. Syncfusion® se enorgullece de haber recibido los siguientes premios de la industria.
Actividades recientes en tutoriales y blogs de Blazor DataGrid
Los videos tutoriales y las publicaciones de blog de Blazor DataGrid lo guiarán en la creación de su primera aplicación con los componentes de Blazor. Le darán ideas para resolver problemas, describirán las características y su funcionalidad, anunciarán la disponibilidad de nuevas características, explicarán las mejores prácticas de los componentes de Blazor DataGrid y describirán escenarios de ejemplo utilizando los componentes de Blazor DataGrid. Consulte nuestra actividad reciente en nuestro blog y canales de videos tutoriales para Blazor DataGrid.
