Saltar al contenido

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript... y lo que venga ;)

17 años online

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, tutoriales, trucos, curiosidades, reflexiones y links sobre programación web
ASP.NET Core, MVC, Blazor, SignalR, Entity Framework, C#, Azure, Javascript...

¡Microsoft MVP!
martes, 13 de julio de 2021

SyncfusionSemanas 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 este 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

Syncfusion 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 <head> 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):

<head>
  ...
  <link href="_content/Syncfusion.Blazor.Themes/bootstrap4.css" rel="stylesheet" />
</head>  

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 <SfGrid> .

Mostrando datos con el componente <SfGrid>

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<Person> GetAll()
    {
        var rnd = new Random();
        var people = new List<Person>();
        for (int i = 1; i < 101; 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 <SfGrid>, simplemente indicándole la fuente de datos:

@page "/"

<h1>Grid demo</h1>

<SfGrid DataSource="@_data"></SfGrid>
@code
{
    IEnumerable<Person> _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, <SfGrid> ha tomado varias decisiones por nosotros, mostrando una columna por cada propiedad pública del conjunto de datos:

Rejilla mostrando todos los datos en forma de tabla

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 <GridColumns> y definir en su interior un <GridColumn> por cada columna a mostrar (por ejemplo, observad que ahora no queremos mostrar la columna "Id"):

<SfGrid DataSource="@_data" AllowPaging="true">
    <GridColumns>
        <GridColumn Field="@nameof(Person.Name)"/>
        <GridColumn Field="@nameof(Person.BirthDate)" 
                    HeaderText="Birthdate" Format="dd/MM/yyyy"/>
        <GridColumn Field="@nameof(Person.FavoriteColor)" 
                    HeaderText="Favorite color"/>
    </GridColumns>
</SfGrid>

Como podemos ver, sólo con esto la cosa ya habrá mejorado bastante:

Rejilla con paginación y personalización de columnas

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 <SfGrid>, así como en todas las columnas que queremos que sean ordenables.

También podemos habilitar el filtrado usando el atributo AllowFiltering de la misma forma, y establecer algunas propiedades con <GridFilterSettings>. En el siguiente ejemplo, indicamos que deseamos filtrar mediante un menú, y que las búsquedas sean case insensitive:

<SfGrid DataSource="@_data" 
        AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridFilterSettings Type="FilterType.Menu" EnableCaseSensitivity="true" />
    <GridColumns>
        <GridColumn Field="@nameof(Person.Name)" 
                    AllowSorting="true" AllowFiltering="true"/>
        <GridColumn Field="@nameof(Person.BirthDate)" 
                    HeaderText="Birthdate" Format="dd/MM/yyyy" 
                    AllowSorting="true" AllowFiltering="true" />
        <GridColumn Field="@nameof(Person.FavoriteColor)" 
                    HeaderText="Favorite color" 
                    AllowSorting="true" AllowFiltering="true"/>
    </GridColumns>
</SfGrid>

Con estos simples cambios, ya tenemos una completa rejilla capaz de mostrar datos, ordenarlos y filtrarlos:

Rejilla con ordenación y filtros

¿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:

...
<GridColumns>
    <GridColumn Field="@nameof(Person.Id)" IsPrimaryKey="true" Visible="false" />
    ... resto de columnas
</GridColumns>        

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 <SfGrid>. Esta toolbar es totalmente configurable, aunque de momento le incluiremos sólo comandos predefinidos específicamente para facilitar la manipulación de datos:

<SfGrid DataSource="@_data" 
        AllowPaging="true" AllowSorting="true" AllowFiltering="true" 
        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
...

Aparte, dentro del componente <SfGrid> incluiremos también el componente <GridEditSettings> para configurar las opciones de edición. En este caso, como puede intuirse, permitiremos realizar todas las operaciones, la edición se realizará en un cuadro de diálogo flotante y mostraremos un diálogo de alerta antes de eliminar filas:

...
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"
                  ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog" />

El código completo quedaría así:

<SfGrid DataSource="@_data" 
        AllowPaging="true" AllowSorting="true" AllowFiltering="true" 
        Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"
                      ShowDeleteConfirmDialog="true" Mode="EditMode.Dialog" />
    <GridFilterSettings Type="FilterType.Menu" EnableCaseSensitivity="true" />
    <GridColumns>
        <GridColumn Field="@nameof(Person.Id)" 
                    IsPrimaryKey="true" Visible="false" />
        <GridColumn Field="@nameof(Person.Name)" 
                    AllowSorting="true" AllowFiltering="true"/>
        <GridColumn Field="BirthDate" 
                    HeaderText="Birthdate" Format="dd/MM/yyyy" 
                    AllowSorting="true" AllowFiltering="true"/>
        <GridColumn Field="FavoriteColor" 
                    HeaderText="Favorite color" 
                    AllowSorting="true" AllowFiltering="true"/>
    </GridColumns>
</SfGrid>

¡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.

Grid con 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.
De hecho, con lo que hemos visto aquí sólo hemos rascado levemente su superficie, pero os animo a que echéis un vistazo a su documentación y veáis sus muchas posibilidades.

Publicado en Variable not found.

2 Comentarios:

Jose Sepulveda Velez dijo...

En este momento estoy trabajando con radzen, la cual me ha parecido fascinante. Pero ahora que leo este artículo estaré dándole un vistazo y probando syncfusion

José María Aguilar dijo...

Hola,

Sin duda, Radzen tiene también buenos componentes. Pero está bien probar distintas suites y así, ya en función de lo que veamos, poder decantarnos por unas u otras cuando sea necesario.

Gracias por comentar!