Semanas atrás echamos un vistazo por encima a Blazor UI Components, los componentes profesionales para Blazor de Syncfusion, y algún tiempo después revisamos más en detalle uno de los grandes protagonistas en el mundo de los componentes, los de creación de gráficas estadísticas o Charts.
Sin embargo, si hay un tipo de componentes que todos usamos de forma frecuente en nuestras aplicaciones profesionales son, sin duda alguna, los grids o rejillas de datos. Por esa razón, los componentes que de alguna forma simplifican su creación son probablemente los más populares en todas las suites profesionales o gratuitas, sea cual sea la tecnología en la que trabajemos.
En esta post, centraremos el foco en Blazor DataGrid, la propuesta de Syncfusion para crear interfaces de rejillas de datos de forma sencilla y eficaz para Blazor Server y WebAssembly.
Pero antes de empezar, recordad que, aunque se trata de un producto comercial, dispone de una licencia community bastante permisiva, que permite que en muchos casos podamos utilizar los componentes de forma totalmente gratuita.
Nota: lo que estás leyendo es un post patrocinado por Syncfusion, pero en ningún momento han revisado previamente o condicionado de alguna forma su contenido.
Blazor DataGrid
Blazor DataGrid es un completo componente, perteneciente a la familia Blazor Components de Syncfusion, destinado a crear interfaces de visualización y edición de datos en formato tabular.
Diseñado bajo el concepto mobile-first, proporciona funcionalidades de visualización, consulta y edición de datos, aportando un gran número de características que seguro cubren la mayoría de escenarios:
- Enlace a datos locales (colecciones o listas en memoria, EF) o remotos (JSON, APIs, OData, WCF).
- Ordenación, filtrado y paginación de datos.
- Agrupación y agregación de columnas.
- Edición de registros en línea, dentro del propio grid, en cuadros de diálogo o en modo bulk/batch.
- Selección de filas o columnas.
- Soporte para rejillas maestro-detalle.
- Personalización visual mediante temas y plantillas custom.
- Exportación de datos a formatos frecuentes (Excel, CSV y PDF).
Y todo ello, utilizando técnicas de virtualización de filas y columnas que hacen posible trabajar con conjuntos de datos con miles o millones de filas sin despeinarse.
Veamos cómo utilizarlo.
Puesta en marcha
Como ya hemos visto en otros posts, los componentes de Syncfusion se distribuyen de forma individual a través de NuGet, por lo que sólo tenemos que añadir a nuestros proyectos los que utilicemos. En este caso, para utilizar la rejilla de datos debemos instalar el paquete Syncfusion.Blazor.Grid.
Pero como también hemos visto en artículos anteriores, antes de usar estos componentes debemos disponer de claves de licencia del producto. Podéis descargar la free trial, que os permitirá trastear con el componente durante 30 días, o bien, si sois desarrolladores individuales o empresas con menos de 5 empleados, registraros para recibir una licencia community, que os dará acceso a todos los componentes sin limitación, de forma totalmente gratuita.
Sea como sea, una vez registrados, desde el dashboard de Syncfusion podremos obtener una clave de licencia e introducirla en el código de inicialización de nuestra aplicación:
using Syncfusion.Licensing;
...
public class Program
{
public static void Main(string[] args)
{
SyncfusionLicenseProvider.RegisterLicense("YOUR-LICENSE-KEY-HERE");
...
}
}
También es importante añadir a la etiqueta de la página contenedora de la aplicación (_Host.cshtml en Blazor Server o index.html en WebAssembly) la referencia a la hoja de estilos del tema visual elegido (hay cinco diferentes):
...
También, como es habitual en estos casos, suele ser una buena idea insertar un @using en el archivo _Imports.razor de la raíz del proyecto para que los componentes estén disponibles en todos los archivos .razor de la aplicación:
@using Syncfusion.Blazor.Grids
Por último, debemos registrar los servicios de Syncfusion en el inyector de dependencias:
services.AddSyncfusionBlazor();
Hecho esto, lo tenemos todo listo para crear nuestra primera rejilla de datos, para lo que utilizaremos el componente
Mostrando datos con el componente
Supongamos una fuente de datos bastante simple, como la siguiente:
public class Person
{
public int Id { get; set; }
public string Name { get; set; }
public DateTime BirthDate { get; set; }
public string FavoriteColor { get; set; }
}
public class DataServices
{
public static List GetAll()
{
var rnd = new Random();
var people = new List();
for (int i = 1; i {
people.Add(new Person() {
Id = i,
Name = $"Person {i}",
BirthDate = DateTime.Today.AddDays(-rnd.Next(1, 36500)),
FavoriteColor = ((KnownColor)rnd.Next(1, 150)).ToString()
});
}
return people;
}
}
La rejilla de Syncfusion admite distintos tipos de enlace a fuentes de datos. Aquí vamos a ver el más simple para que podáis entender fácilmente su funcionamiento, pero en la documentación oficial podéis consultar cómo utilizar otros orígenes como Entity Framework, SqlClient, Web API, OData y más.
Ahora, introduzcamos en una página nuestra primera instancia del grid, el componente
@page "/"
Grid demo
@code
{
IEnumerable _data;
protected override void OnInitialized()
{
_data = DataServices.GetAll();
}
}
Como podemos ver en la siguiente captura, dado que no hemos configurado aún nada de la rejilla,
Obviamente, a falta de más personalización, los datos no están paginados, las columnas usan como encabezado el nombre del campo, y en su contenido el formato por defecto de cada tipo de datos.
Podemos mejorar todo esto muy fácilmente. Por ejemplo, para activar la paginación basta con establecer el atributo AllowPaging de SfGrid a true, mientras que si queremos definir detalladamente las columnas podemos usar un elemento
HeaderText="Birthdate" Format="dd/MM/yyyy"/>
HeaderText="Favorite color"/>
Como podemos ver, sólo con esto la cosa ya habrá mejorado bastante:
Esto pinta bien, así que continuemos explorando el componente. Mirando su extensa documentación, vemos que incluye capacidad de ordenar y filtrar por columnas, así que vamos a ello ;)
Para habilitar la ordenación simplemente hay que establecer a cierto el atributo AllowSorting de forma general, en el componente
También podemos habilitar el filtrado usando el atributo AllowFiltering de la misma forma, y establecer algunas propiedades con
AllowPaging="true" AllowSorting="true" AllowFiltering="true">
AllowSorting="true" AllowFiltering="true"/>
HeaderText="Birthdate" Format="dd/MM/yyyy"
AllowSorting="true" AllowFiltering="true" />
HeaderText="Favorite color"
AllowSorting="true" AllowFiltering="true"/>
Con estos simples cambios, ya tenemos una completa rejilla capaz de mostrar datos, ordenarlos y filtrarlos:
¿Vamos a por el CRUD completo?
El componente grid de Syncfusion también es capaz de gestionar las operaciones de actualización. Aunque obviamente requiere algo más de trabajo de configuración del componente, el tiempo a dedicar a esto siempre será muy inferior al que supondría implementar una solución por nuestra cuenta.
Para conseguirlo, lo primero que debemos asegurar es que SfGrid conoce cuál es la columna que actúa como clave primaria de las filas. Para ello es necesario definir la columna, aunque sea invisible, con el atributo IsPrimaryKey de la siguiente forma:
...
... resto de columnas
A continuación, vamos a configurar el componente para que habilite las operaciones de creación, actualización y eliminación de filas.
Para ello, en primer lugar, le añadiremos una barra de herramientas usando el atributo Toolbar de
AllowPaging="true" AllowSorting="true" AllowFiltering="true"
Toolbar="@(new List() { "Add", "Edit", "Delete", "Cancel", "Update" })">
...
Aparte, dentro del componente
...
ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog" />
El código completo quedaría así:
AllowPaging="true" AllowSorting="true" AllowFiltering="true"
Toolbar="@(new List() { "Add", "Edit", "Delete", "Cancel", "Update" })">
ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog" />
IsPrimaryKey="true" Visible="false" />
AllowSorting="true" AllowFiltering="true"/>
HeaderText="Birthdate" Format="dd/MM/yyyy"
AllowSorting="true" AllowFiltering="true"/>
HeaderText="Favorite color"
AllowSorting="true" AllowFiltering="true"/>
¡Y eso es todo! Con algo más de una decena de líneas tenemos en funcionamiento una rejilla completa con paginación, ordenación, filtros, altas, bajas y modificaciones.
Obviamente, siempre la realidad será más compleja que esto y tendremos que sumergirnos en configuraciones más avanzadas del componente, pero como punto de partida no está nada mal, ¿verdad?
Como decíamos al principio, el componente Grid para Blazor de Syncfusion es una solución bastante completa, cuyas funcionalidades sobrepasan en mucho lo que podríamos abarcar en un post introductorio como este:
- Enlace a prácticamente cualquier tipo de fuente de datos.
- Uso de data annotations para especificar formatos, validaciones y otras características de las columnas.
- Múltiples opciones de configuración de filas y columnas.
- Uso de plantillas personalizas para definir exactamente cómo queremos mostrar los datos.
- Mantenimiento del estado de grids (página actual, orden, filtros...), para conservarlo entre cambios de página.
- Exportación e impresión de datos.
- Barras de herramientas y menús contextuales personalizados.
- Sistema de eventos para introducir lógica personalizada en múltiples puntos.
- Copiar y pegar filas o celdas.
- Selección individual o múltiple de filas.
- Agrupaciones y agregaciones de datos.
Publicado en Variable not found.
