We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Descripción general

Blazor DataGrid es un componente repleto de funciones útiles para presentar datos en formato de tabla. Su amplio abanico de funcionalidades permite enlazar datos, editar, filtrar como lo haría en Excel, ordenar de manera personalizada, agregar filas, seleccionar y, además, es compatible con los formatos de Excel, CSV y PDF.


Enlace de datos

Enlace datos de diversas fuentes locales y remotas fácilmente, como JSON, servicios RESTful, servicios OData y servicios WCF. Utiliza el administrador de datos para gestionar los datos y admite la personalización de las solicitudes de datos.

Enlace de datos con cuadrícula de datos blazor.


Optimizado para dispositivos móviles con control táctil

Blazor Grid tiene un diseño muy responsivo y optimizado para ordenadores de escritorio, pantallas táctiles y celulares.

Control táctil en rejilla blazor.

Control táctil

Los sencillos gestos táctiles y el diseño interactivo de la interfaz contribuyen a ofrecer la mejor experiencia de usuario. Todas las funciones de rejilla blazor son compatibles con los dispositivos táctiles sin necesidad de configuración.

Responsivo en el componente Blazor DataGrid.

Interfaz adaptable

El componente Blazor DataGrid está optimizado para dispositivos móviles. Su interfaz de usuario responsiva se adapta automáticamente a cualquier dispositivo y proporciona la mejor experiencia de usuario en la interacción con los controles. Además, permite ocultar columnas específicas para determinados tamaños de pantalla con el soporte para consulta de medios basada en columnas.

Interfaz de usuario de paginación responsiva en el componente Blazor DataGrid.

Paginación responsiva

La función de paginación de Blazor DataGrid funciona de manera inteligente y cambia toda la interfaz de usuario adaptándola a las dimensiones de Blazor Data Grid. Su diseño optimizado proporciona la mejor interacción con la interfaz de usuario en distintos dispositivos.


Alto rendimiento

Blazor DataGrid tiene un diseño optimizado para alcanzar un alto rendimiento. Solo le lleva un segundo cargar millones de registros sin pérdida de rendimiento gracias a la virtualización de filas y columnas. WebAssembly ayuda a evitar la representación innecesaria de componentes.

Alto rendimiento de Blazor DataGrid


Edición con Blazor DataGrid.

Edición

Blazor DataGrid es totalmente compatible con las operaciones CRUD (Create, Read, Update, and Delete; crear, leer, actualizar y eliminar). Además de los controles de editor incorporados para modificar un valor de columna en particular, mediante las plantillas, los usuarios pueden generar controles de editor personalizados que se adapten a sus necesidades específicas. Realiza operaciones de edición con una lista de objetos empresariales o un servicio de datos remoto con la ayuda del administrador de datos.


Agregación

La agregación permite mostrar fácilmente valores de columna añadidos. Estos valores agregados se pueden personalizar para indicar valores en filas individuales de resumen, filas individuales de resumen de grupo o filas de leyenda de grupo.

Agregación con Blazor DataGrid.


Filtrado con Blazor DataGrid.

Filtrado

La función de filtrado ayuda a ver registros específicos o relacionados que cumplen determinados criterios. Admite varios tipos de filtros, incluido un eficaz filtro al estilo de Excel. La función de filtrado de Blazor DataGrid permite a los usuarios elegir los tipos de filtro adecuados, definir su propia lógica de filtrado y personalizar la interfaz de usuario del filtrado conforme a sus necesidades específicas. También tiene una opción para filtrar caracteres diacríticos.


Temas integrados y personalizables

Hay cinco temas integrados basados en SASS, concretamente, Material, Bootstrap, Bootstrap 4, Fabric y High Contrast. Simplifique la personalización del tema anulando el estilo SASS existente o creando temas personalizados con la aplicación Theme Studio.

Blazor Grid Temas.


Exportación

Exporte a formatos PDF, CSV y Excel con el control de Blazor Grid.

Exportación a Excel, PDF y CSV

Exporte fácilmente a distintos formatos de archivo, como Excel, PDF o CSV, mediante el control de Blazor Grid.

Impresión del contenido de tabla de datos blazor.

Impresión

Permite a los usuarios imprimir datos utilizando la opción de impresión de la barra de herramientas o mediante la programación. Imprima todas las filas de una cuadrícula de Blazor DataGrid independientemente del número de páginas o imprima solo la página que aparece en la pantalla.


Accesibilidad

Navegación mediante teclado en Blazor DataGrid.

Blazor DataGrid permite acceder a todas las celdas mediante el teclado. Las funciones principales, como ordenar, seleccionar y editar, se pueden ejecutar usando solo los comandos del teclado, sin necesidad de usar el mouse. Esto ayuda a crear aplicaciones muy accesibles que utilizan este componente.

Accesibilidad y compatibilidad con los lectores de pantalla en Blazor DataGrid.

Lector de pantalla

La vista de Blazor DataGrid es totalmente compatible con la especificación 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 problemas de visión a disfrutar de la mejor experiencia visual. Además, se puede acceder fácilmente a descripciones válidas de la interfaz de usuario mediante tecnologías de asistencia, como los lectores de pantalla.


Globalización y localización

Aplicar un formato a las fechas y los números en Blazor DataGrid.

Globalización

Blazor DataGrid permite a los usuarios de diferentes regiones aplicar un formato a la fecha, la moneda y los números para adaptarlos a sus preferencias lingüísticas. Usa la biblioteca de internalización (i18n) para controlar el formato de valor.

Mostrar los textos de derecha a izquierda en Blazor DataGrid.

De derecha a izquierda (RTL)

La representación de derecha a izquierda permite mostrar el texto y el diseño de las cuadrículas de Blazor DataGrid de derecha a izquierda. Así se consigue mejorar la experiencia del usuario y la accesibilidad para los idiomas que se leen de derecha a izquierda.

Localizar cadenas de interfaz de Blazor DataGrid.

Localización

Según sus necesidades, los usuarios pueden localizar todas las cadenas que se emplean en la interfaz de usuario del control de Blazor DataGrid. Utiliza la biblioteca de localización (l10n) para localizar las cadenas de la interfaz.


Otras funcionalidades

Blazor DataGrid con altura de fila

Altura de fila

La altura de la fila es un factor importante a la hora de mostrar la cantidad de registros en una vista y se puede personalizar fácilmente según los requisitos de la interfaz de usuario de la aplicación. También es posible establecer la altura de fila condicionalmente.

Copiar al portapapeles desde Blazor DataGrid

Copiar al portapapeles

El portapapeles ofrece una opción para copiar los datos de filas o celdas seleccionadas al portapapeles. Utilice las combinaciones de teclas Ctrl+C y Ctrl+Mayús+H para copiar datos con y sin encabezados, respectivamente.

Blazor DataGrid con menú contextual

Menú contextual

El menú contextual mejora la acción del usuario con Blazor DataGrid mediante un menú emergente. Aparece cuando se hace clic con el botón secundario del mouse en la celda, el encabezado o la paginación. Además de los elementos de menú predeterminados e integrados, permite agregar elementos del menú contextual personalizados.

Ancho y altura en Blazor DataGrid.

Ancho y altura

Permite cambiar el tamaño de la cuadrícula de Blazor DataGrid definiendo el ancho y el alto. Si el contenido desborda el elemento de cuadrícula de Blazor Data Grid, aparecerán las barras de desplazamiento horizontal y vertical. Para que Blazor Data Grid llene su contenedor principal, el usuario, simplemente, debe establecer la altura y el ancho al 100 %.

Blazor DataGrid con columna de plantilla

Plantillas

Con las plantillas, los usuarios pueden desarrollar una interfaz de usuario personalizada. Se ofrecen diversas opciones de plantilla para crear encabezados, contenido de celda y filas personalizados, filas de detalles, barras de herramientas y editores personalizados para la acción de editar.

Blazor DataGrid con encabezados apilados

Encabezados apilados

Los encabezados apilados permiten agrupar y visualizar los encabezados de las columnas de manera apilada. No hay límite para apilar columnas. Permite al usuario realizar todas las acciones de Blazor DataGrid, incluso cuando las columnas están apiladas.


Selección

Blazor DataGrid permite seleccionar filas o celdas. También se pueden elegir filas o celdas manteniendo presionada la tecla Ctrl o Command, o mediante programación.

Selección con Blazor DataGrid.


Columna de Blazor DataGrid.

Columna

Las columnas definen el esquema de la fuente de datos en el control de Blazor DataGrid. Permite aplicar formato, generar automáticamente columnas, crear definiciones de columnas, congelar filas y columnas, expandir columnas, ajustar el texto, usar el seleccionador de columnas y el menú de columnas, y otras funciones.


Agrupación

Permite agrupar filas para mostrar datos de forma organizada. Los datos se pueden agrupar en orden ascendente o descendente. Las filas se pueden agrupar al arrastrar y soltar las columnas deseadas en el área de colocación interactiva.


Ordenar

Blazor DataGrid permite a los usuarios organizar las filas en orden ascendente o descendente en una columna, simplemente, haciendo clic en el encabezado. Se pueden ordenar los datos de varias columnas al mantener presionada la tecla Ctrl y hacer clic en el encabezado.


Paginación

Mediante la paginación, se puede ver un segmento de datos desde la fuente de datos asignada. Blazor DataGrid ofrece una interfaz de usuario de paginación integrada con opciones para personalizar toda esa interfaz. También tiene un modo de paginación bajo demanda para recuperar datos de manera eficaz desde servicios web remotos.

Paginación con Blazor DataGrid.


Blazor Master Detail Grid

Blazor Master Detail Grid

Blazor Master Detail Grid es un caso práctico de uso en el que los detalles de un registro se ven en una cuadrícula de datos aparte haciendo clic en una fila determinada.


Blazor Live DataGrid

Blazor Live DataGrid se ha optimizado para gestionar y actualizar un gran número de registros en tiempo real y se aplica, entre otros, para enlazar registros financieros.

Blazor Live DataGrid


Buscar en Blazor DataGrid

Buscando

Busque y resalte texto en Blazor Data Grid y filtre registros según el texto buscado. Ayuda a identificar los resultados más precisos de las predicciones.


Ejemplo de código de Blazor DataGrid

Empiece a trabajar fácilmente con Blazor DataGrid usando algunas líneas sencillas como ejemplo de código C#, como se muestra más abajo. También puede consultar nuestro ejemplo de Blazor DataGrid, que muestra cómo representar y configurar la cuadrícula 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; }
    }
}

Otros marcos compatibles

DataGrid también está disponible en marcos JavaScript, Angular, React y Vue que se crean a partir de sus propias bibliotecas TypeScript. Consulte las diferentes plataformas de DataGrid con los enlaces siguientes:


Blazor DataGrid es compatible con todos los navegadores web modernos, como Chrome, Firefox, Microsoft Edge, Safari e IE11. También admite IE11 con la ayuda de polyfills.

Navegadores web compatibles para Blazor DataGrid.




Blazor Components – 85+ UI and DataViz Components

Frequently Asked Questions

  • Cargar millones de registros solo le llevará un segundo.
  • Enlace de datos flexible compatible con fuentes de datos, como Web API, OData, Entity Framework y más.
  • Rica interacción de la interfaz de usuario y navegación mediante el teclado en las aplicaciones Blazor tanto del lado del servidor como del lado del cliente (WebAssembly).
  • Incluye numerosas funciones con opciones de personalización adecuadas para crear aplicaciones complejas a gran escala.
  • Uno de los mejores Blazor DataGrid del mercado que ofrece una interfaz de usuario repleta de funciones para interactuar con el software.
  • Configuración y API sencillas.
  • Compatible con todos los navegadores modernos.
  • Manejo táctil y responsivo en los dispositivos móviles.
  • Extensas demostraciones, documentación y videos para aprender rápido y empezar a usar Blazor DataGrid.

No vendemos Blazor DataGrid por separado. Solo está disponible si se compra como parte del paquete Syncfusion Blazor, que contiene más de 85 componentes nativos de Blazor, incluido DataGrid. Una licencia de desarrollador para el paquete Syncfusion Essential Studio para Blazor cuesta 995,00 USD e incluye un año de soporte técnico y actualizaciones. Además, podríamos ofrecer más descuentos según las promociones activas actualmente. Póngase en contacto con nuestro equipo de Ventas hoy mismo para consultar si tiene derecho a algún descuento adicional.

Puede encontrar nuestra demostración de Blazor DataGrid aquí.

No, nuestros 85+ componentes de Blazor, incluido DataGrid, no se venden individualmente, solo como parte de un paquete. No obstante, hemos fijado el precio de nuestro producto para que sea competitivo, por lo que solo cuesta un poco más de lo que otros proveedores cobran por su cuadrícula de datos únicamente. También nos hemos dado cuenta, en nuestra experiencia, de que nuestros clientes, generalmente, comienzan a usar uno de nuestros productos y pronto amplían a otros. Por eso, consideramos que era mejor ofrecer los 85+ componentes de Blazor a un precio fijo de 995 USD por licencia de desarrollador. Además, podríamos ofrecer más descuentos según las promociones activas actualmente. Póngase en contacto con nuestro equipo de Ventas hoy mismo para consultar si tiene derecho a algún descuento adicional.

No, este es un producto comercial y requiere una licencia pagada. De todos modos, sí se ofrece una licencia comunitaria gratuita para empresas y personas físicas cuyas organizaciones tengan unos ingresos brutos anuales inferiores a un millón de dólares y cinco desarrolladores o menos.

Un buen punto de partida sería nuestra completa documentación de inicio.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion is proud to hold the following industry awards.

Up arrow icon
Live Chat Icon For mobile