Descripción general y configuración de la red de Blazor

    La tabla de datos Ignite UI for Blazor / cuadrícula de datos es un componente de cuadrícula de Blazor tabular que le permite vincular y mostrar rápidamente sus datos con poca codificación o configuración. Las características de la cuadrícula de datos Blazor en nuestra caja de herramientas incluyen filtrado, clasificación, plantillas, selección de filas, agrupación de filas, fijación de filas y columnas móviles.

    Las tablas Blazor están optimizadas para datos de transmisión en vivo, con la capacidad de manejar un tamaño ilimitado de conjunto de datos en un número de filas o columnas.

    Cuadrícula de datos Blazor

    Ejemplo de cuadrícula de datos de Blazor

    En este ejemplo de cuadrícula Ignite UI for Blazor, puede ver cómo los usuarios pueden realizar filtrados básicos y de estilo Excel, clasificación de datos en vivo y usar resúmenes de cuadrícula, así como plantillas de celdas. La demostración también incluye un conjunto de paginación para mostrar 10 elementos por página.

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS
    Blazor grid example

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

    Introducción a Blazor Data Grid

    dependencias

    Para comenzar a utilizar Blazor Data Grid, primero debe instalar el paquete Blazor.

    Consulte estos temas sobre cómo agregar el paquete IgniteUI.Blazor:

    También debe incluir el siguiente enlace CSS en el archivo index.html de su aplicación para proporcionar los estilos necesarios a la cuadrícula:

    <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
    razor

    Luego, puede comenzar a implementar el control agregando los siguientes espacios de nombres:

    @using IgniteUI.Blazor.Controls
    razor

    Módulos de componentes

    El DataGrid requiere los siguientes módulos:

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(typeof(IgbGridModule));
    razor

    Uso

    Ahora que hemos importado los paquetes de cuadrícula, comencemos con la configuración básica y vinculemos a los datos locales:

    <IgbGrid Id="grid1" Data="data" AutoGenerate="true"></IgbGrid>
    razor

    La propiedad Id es un valor de cadena y es el identificador único de la cuadrícula que se generará automáticamente si no se proporciona, mientras que data vinculan la cuadrícula, en este caso a los datos locales.

    La propiedad AutoGenerate le dice a la cuadrícula que genere automáticamente los componentes IgbColumn de la cuadrícula en función de los campos de origen de datos. También intentará deducir el tipo de datos apropiado para la columna si es posible. De lo contrario, el desarrollador debe definir explícitamente las columnas y la asignación a los campos de la fuente de datos.

    Cuadrícula de Blazor editable

    Cada operación de edición de cuadrícula incluye operaciones por lotes, lo que significa que la API le brinda la opción de agrupar ediciones en una sola llamada al servidor o puede realizar operaciones de edición/actualización de cuadrícula a medida que ocurren con las interacciones de cuadrícula. Junto con una excelente experiencia para desarrolladores como cuadrícula editable con operaciones CRUD, la cuadrícula incluye navegación con teclado similar a la de Excel. Se incluye la navegación de cuadrícula predeterminada común, además de la opción de anular cualquier opción de navegación para satisfacer las necesidades de sus clientes. Una cuadrícula editable con un excelente esquema de navegación es fundamental para cualquier aplicación de línea de negocios moderna, con la cuadrícula Ignite UI lo hacemos fácil.

    Después de este tema, aprenderá más sobre la plantilla de celdas y la plantilla de edición de celdas y la edición.

    Configuración de columna de cuadrícula

    IgbColumn se usa para definir la colección de columnas de la cuadrícula y para habilitar funciones por columna como ordenar y filtrar. Las plantillas de celda, encabezado y pie de página también están disponibles.

    Definición de columnas

    Desactivemos la propiedad AutoGenerate y definamos la colección de columnas en el marcado:

    <IgbGrid AutoGenerate=false AllowFiltering=true>
        <IgbColumn Field="Name" Sortable=true />
        <IgbColumn Field="AthleteNumber" Sortable=true Header="Athlete Number" Filterable=false/>
        <IgbColumn Field="TrackProgress" Header="Track Progress" Filterable=false />
    </IgbGrid>
    razor

    Plantilla de encabezado

    La plantilla de encabezado se puede configurar para modificar los encabezados de las columnas. Los fragmentos a continuación le muestran cómo formatear el texto del encabezado en mayúsculas.

    <IgbColumn Field="Name" HeaderTemplateScript="UpperCaseTemplate" />
    
    //In JavaScript:
    igRegisterScript("UpperCaseTemplate", (ctx) => {
    
        var html = window.igTemplating.html;
    
        return html`${this.formatUppercase(ctx.column.field)}`;
    
    }, false)
    
    function formatUppercase(value) {
        return value.toUpperCase();
    }
    razor

    Nota: Cada vez que se usa una plantilla de encabezado junto con la funcionalidad de agrupar/mover, el área del encabezado de la columna se puede arrastrar y no puede acceder a la parte de elementos personalizados de la plantilla de encabezado hasta que los marque como no arrastrables. Ejemplo a continuación.

    <IgbColumn Field="ProductName" Header="Product Name" Groupable=true HasSummary=true HeaderTemplateScript="ProductNameHeaderTemplate" />
    
    //In JavaScript:
    igRegisterScript("ProductNameHeaderTemplate", (ctx) => {
    
        var html = window.igTemplating.html;
    
        return html`
            <div class="text">${ctx.column.field}</div>
            <igc-icon name="functions" draggable="false"></igc-icon>
        `;
    }, false)
    razor

    Como puede ver, estamos agregando el atributo Draggable establecido en falso.

    Plantilla de celda

    Cuando se establece la plantilla de celda, cambia todas las celdas de la columna. El objeto de contexto proporcionado en la plantilla consiste en el valor de celda proporcionado implícitamente y el propio objeto de celda. Se puede usar para definir una plantilla en la que el texto de las celdas se podría formatear, por ejemplo, como título.

    <IgbColumn Field="Name" BodyTemplateScript="NameCellTemplate"/>
    
    //In JavaScript:
    igRegisterScript("NameCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
    
        return html`${this.formatTitleCase(ctx.implicit)}`;
    }, false);
    
    function formatTitleCase(value) {
        return value.toUpperCase();
    }
    razor

    En el fragmento de código anterior, tomamos una referencia al valor de celda proporcionado implícitamente. Esto es suficiente si solo desea presentar algunos datos y tal vez aplicar algún estilo personalizado o transformaciones de barra vertical sobre el valor de la celda. Sin embargo, aún más útil es tomar la Cell instancia en sí, como se muestra a continuación:

    <IgbGrid Id="grid" AutoGenerate=false>
        <IgbColumn Field="Name" BodyTemplateScript="NameCellTemplate" />
        <IgbColumn Field="Subscription" BodyTemplateScript="SubscriptionCellTemplate" />
    </IgbGrid>
    
    //In JavaScript:
    igRegisterScript("NameCellTemplate", (ctx) => {
           var html = window.igTemplating.html;
        return html`
            <span tabindex="0" @keyup=${(e) => this.deleteRow(e, ctx.cell.id.rowIndex)}> ${this.formatTitleCase(ctx.cell.value)}</span >
        `;
    }, false);
    
    igRegisterScript("SubscriptionCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
         if (ctx.cell.value) {
                return html` <input type="checkbox" checked /> `;
        } else {
                return html` <input type="checkbox"/> `;
        }
    }, false);
    
    function deleteRow(e, rowIndex) {
        if (e.code === "Delete") {
            this.grid.deleteRow(rowIndex);
        }
    }
    
    function formatTitleCase(value) {
        return value.toUpperCase();
    }
    razor

    Nota: la cuadrícula expone un manejo predeterminado para los tipos de columna numérica, cadena, fecha y booleana. Por ejemplo, la columna mostrará el icono check o close, en lugar de verdadero/falso de forma predeterminada, para el tipo de columna booleana.

    Cuando se implementa correctamente, la plantilla de edición de celdas también garantiza que el EditValue de la celda pase correctamente por el ciclo de eventos de edición de la cuadrícula.

    Plantilla de edición de celdas

    La columna también acepta una última plantilla que se usará cuando una celda esté en modo de edición. Al igual que con las otras plantillas de columna, el objeto de contexto proporcionado es nuevamente el valor de la celda y el objeto de la celda en sí. Por supuesto, para que los usuarios finales puedan acceder a la plantilla de modo de edición, debe establecer la propiedad Editable de la columna en verdadero.

    <IgbColumn Field="Price" Editable=true DataType="GridColumnDataType.Number" InlineEditorTemplateScript="PriceCellTemplate" />
    
    //In JavaScript:
    igRegisterScript("PriceCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
    
        return html`
            <label>
                Enter the new price tag
            </label>
            <input name="price" type="number" value="${ctx.cell.value}"
            @change=${(e) => this.updateValue(e, ctx.cell.value)} />
        `;
    }, false);
    
    function updateValue(event, value) {
    }
    razor

    Asegúrese de consultar la API para Cell familiarizarse con las propiedades proporcionadas que puede usar en sus plantillas.

    API de plantilla de columna

    Cada una de las plantillas de columna se puede cambiar mediante programación en cualquier punto a través del propio objeto IgbColumn. Por ejemplo, en el siguiente código, hemos declarado dos plantillas para nuestros datos de usuario. En nuestro código TypeScript, obtendremos referencias a las plantillas y luego, según alguna condición, representaremos la plantilla adecuada para la columna en nuestra aplicación.

    <IgbGrid ColumnInit=OnColumnInit />
    
    @code {
        public void OnColumnInit(IgbColumnComponentEventArgs args)
        {
            IgbColumn column = args.Detail;
            // Return the appropriate template based on some condition.
            // For example saved user settings, viewport size, etc.
            column.BodyTemplateScript = "NormalViewTemplate";
        }
    }
    
    //In JavaScript:
    igRegisterScript("NormalViewTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html`
            <div class="user-details">${ctx.cell.value}</div>
            <user-details-component></user-details-component>
        `;
    }, false);
    
    igRegisterScript("SmallViewTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html`
            <div class="user-details-small" style="color: blue">${ctx.cell.value}</div>
        `;
    }, false);
    razor

    Las propiedades de columna también se pueden establecer en código en el evento ColumnInit que se emite cuando las columnas se inicializan en la cuadrícula.

    <IgbGrid ColumnInit=OnColumnInit />
    
    @code {
        public void OnColumnInit(IgbColumnComponentEventArgs args)
        {
            IgbColumn column = args.Detail;
            if (column.Field == "ProductName") {
                column.Sortable = true;
                column.Editable = true;
            }
        }
    }
    razor

    El código anterior hará que la columna ProductName se pueda ordenar y editar y creará una instancia de la interfaz de usuario de las funciones correspondientes (como entradas para editar, etc.).

    Formato de visualización personalizado

    Hay parámetros opcionales para formatear:

    • Format: determina qué partes de fecha/hora se muestran; el valor predeterminado es 'mediumDate', equivalente a 'MMM d, y'
    • Timezone: el desplazamiento de la zona horaria para las fechas. De forma predeterminada, utiliza la zona horaria del sistema local del usuario final
    • DigitsInfo- objetos de representación decimal. Predeterminado a 1.0-3

    Para permitir la personalización del formato de visualización mediante estos parámetros, se expone la entrada PipeArgs. Una columna respetará solo las propiedades correspondientes para su tipo de datos, si se establece PipeArgs. Ejemplo:

    <IgbColumn Field="OrderDate"
               DataType=GridColumnDataType.Date
               PipeArgs=@(new IgbColumnPipeArgs() { Timezone="UTC+0", DigitsInfo="1.2-2", Format = "longDate" }) />
    
    <IgbColumn Field="UnitPrice"
               DataType=GridColumnDataType.Date
               PipeArgs=@(new IgbColumnPipeArgs() { Timezone="UTC+0", DigitsInfo="1.2-2", Format = "longDate" }) />
    razor

    La columna OrderDate solo respetará las propiedades Format y Timezone, mientras que UnitPrice solo respetará DigitsInfo.

    Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

    Enlace de datos complejos

    IgbGrid admite la vinculación a objetos complejos (incluido el anidamiento a más de un nivel) a través de una "ruta" de propiedades en el registro de datos.

    Eche un vistazo al siguiente modelo de datos:

    public class AminoAcid
    {
        public string Name { get; set; }
        public AminoAbbreviation Abbreviation { get; set; }
        public AminoWeight Weight { get; set; }
    }
    
    public class AminoAbbreviation
    {
        public string Short { get; set; }
        public string Long { get; set; }
    }
    
    public class AminoWeight
    {
        public double Molecular { get; set; }
        public double Residue { get; set; }
    }
    razor

    Por ejemplo, para mostrar los pesos de un aminoácido dado en la cuadrícula, bastará con el siguiente fragmento

    <IgbColumn Field="Weight.Molecular" />
    <IgbColumn Field="Weight.Residue" />
    razor

    Una forma alternativa de vincular datos complejos o visualizar datos compuestos (de más de una columna) en IgbGrid es usar una plantilla de cuerpo personalizada para la columna. Generalmente, uno puede:

    • use el value de la celda, que contiene los datos anidados
    <IgbColumn Field="Abbreviation.Long" BodyTemplateScript="AbbreviationLongCellTemplate"/>
    
    //In JavaScript:
    igRegisterScript("AbbreviationLongCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html`
            <div>
                <div>
                    ${ctx.cell.value}
                    ${this.GetName(ctx.cell.id.rowIndex)}
                    ${this.GetWeight(ctx.cell.id.rowIndex)}
                </div>
            </div>
        `;
    }, false);
    
    function GetName(rowIndex) {
        return this.grid.getRowByIndex(rowIndex).data["Name"];
    
    }
    
    function GetWeight(rowIndex) {
        return this.grid.getRowByIndex(rowIndex).data["Weight"]["Molecular"];
    }
    razor

    Aquí hay un ejemplo de cómo se usa la plantilla del cuerpo para mostrar datos complejos. A continuación se muestran los datos que vamos a utilizar:

    public class EmployeesNestedData : List<EmployeesNestedDataItem>
    {
        public EmployeesNestedData()
        {
            this.Add(new EmployeesNestedDataItem()
            {
                Age = 55,
                Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
                {
                    new EmployeesNestedDataItem_EmployeesItem()
                    {
                        Age = 43,
                        Salary = 70000,
                        Productivity = 80,
                        City = @"Hamburg",
                        Country = @"Germany",
                        Phone = @"609-444-555",
                        HireDate = @"2011, 6, 3",
                        ID = 3,
                        Name = @"Michael Burke",
                        Title = @"Senior Software Developer"
                    },
                    new EmployeesNestedDataItem_EmployeesItem()
                    {
                        Age = 29,
                        Salary = 60000,
                        Productivity = 80,
                        City = @"Munich",
                        Country = @"Germany",
                        Phone = @"609-333-444",
                        HireDate = @"2009, 6, 19",
                        ID = 2,
                        Name = @"Thomas Anderson",
                        Title = @"Senior Software Developer"
                    },
                    new EmployeesNestedDataItem_EmployeesItem()
                    {
                        Age = 31,
                        Salary = 90000,
                        Productivity = 80,
                        City = @"Warasw",
                        Country = @"Poland",
                        Phone = @"609-222-205",
                        HireDate = @"2014, 8, 18",
                        ID = 11,
                        Name = @"Monica Reyes",
                        Title = @"Software Development Team Lead"
                    },
                    new EmployeesNestedDataItem_EmployeesItem()
                    {
                        Age = 35,
                        Salary = 70000,
                        Productivity = 70,
                        City = @"Koln",
                        Country = @"Germany",
                        Phone = @"609-502-525",
                        HireDate = @"2015, 9, 17",
                        ID = 6,
                        Name = @"Roland Mendel",
                        Title = @"Senior Software Developer"
                    }}
                });
            }
        }
    }
    razor

    La plantilla personalizada para la columna, que representará los datos anidados:

    <IgbColumn Header="Employees" Field="Employees" BodyTemplateScript="WebGridNestedDataCellTemplate" />
    
    //In JavaScript:
    igRegisterScript("WebGridNestedDataCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
        window.keyUpHandler = function() {
            ctx.cell.row.data[window.event.target.id] = window.event.target.value;
        }
        const people = ctx.cell.value;
        if (people != null) {
            if (people.length === 0) return html``;
            const person = people[0];
            return html`
        <igc-expansion-panel>
            <h3 slot="title">
            ${person.Name}
            </h3>
            <div class="description">
                <div>
                    <label for="title">Title</label>
                    <input id='Title' type="text" name="title" value="${person.Title}" style="text-overflow: ellipsis;" />
                </div>
                <div>
                    <label for="age">Age</label>
                    <input id='Age' type="text" name="title" value="${person.Age}" style="text-overflow: ellipsis;" />
                </div>
            </div>
        </igc-expansion-panel>
            `;
        }
    }, false);
    razor

    Y el resultado de esta configuración es:

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Resumen de trabajo con datos planos

    El enfoque de enlace de datos planos es similar al que ya describimos anteriormente, pero en lugar del valor de la celda, usaremos la propiedad Data de IgbGridRow.

    Dado que la cuadrícula Blazor es un componente para renderizar, manipular y preservar registros de datos, tener acceso a cada registro de datos le brinda la oportunidad de personalizar el enfoque de su manejo. La data propiedad le brinda esta oportunidad.

    A continuación se muestran los datos que vamos a utilizar:

    public class CustomersData : List<CustomersDataItem>
    {
        public CustomersData()
        {
            this.Add(new CustomersDataItem()
            {
                ID = "ALFKI",
                CompanyName = "Alfreds Futterkiste",
                ContactName = "Maria Anders",
                ContactTitle = "Sales Representative",
                Address = "Obere Str. 57",
                City = "Berlin",
                Region = "East",
                PostalCode = "12209",
                Country = "Germany",
                Phone = "030-0074321",
                Fax = "030-0076545"
            });
        }
    }
    razor

    La plantilla personalizada:

    <IgbColumn Header="Address" Field="Address"
               Editable="true"
               BodyTemplateScript="AddressCellTemplate" />
    
    //In JavaScript:
    igRegisterScript("AddressCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
        return html`<div class="address-container">
        <div class="country-city">
            <span><strong>Country:</strong> ${ctx.cell.row.data.Country}</span>
            <br>
            <span><strong>City:</strong> ${ctx.cell.row.data.City}</span>
        </div>
        <div class="phone-pscode">
            <span><strong>Postal Code:</strong> ${ctx.cell.row.data.PostalCode}</span>
            <br>
            <span><strong>Phone:</strong> ${ctx.cell.row.data.Phone}</span>
        </div>
        <br />
    </div>`;
    }, false);
    razor

    Tenga en cuenta que con la plantilla definida anteriormente no podrá realizar operaciones de edición, por lo que necesitamos una plantilla de editor.

    <IgbColumn Header="Address" Field="Address"
               Editable="true"
               InlineEditorTemplateScript="AddressEditCellTemplate" />
    
    //In JavaScript:
    igRegisterScript("AddressEditCellTemplate", (ctx) => {
        var html = window.igTemplating.html;
        window.keyUpHandler = function() {
            ctx.cell.row.data[window.event.target.id] = window.event.target.value;
        }
    
        return html`<div class="address-container--edit">
        <div>
            <span><strong>Country:</strong></span>
            <input id='Country' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Country}"></input>
            <br>
            <span><strong>City:</strong></span>
            <input id='City' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.City}"></input>
        </div>
        <div>
            <span><strong>Postal Code:</strong></span>
            <input id='PostalCode' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.PostalCode}"></input>
            <br>
            <span><strong>Selected:</strong></span>
            <input id='Phone' onkeyup='keyUpHandler()' value="${ctx.cell.row.data.Phone}"></input>
        </div>
        <br>
    </div>`;
    }, false);
    razor

    Ejemplo de trabajo con datos planos

    El uso de fragmentos de código de la sección anterior dará como resultado el siguiente ejemplo de IgbGrid

    EXAMPLE
    DATA
    MODULES
    RAZOR
    JS
    CSS

    Navegación por teclado

    La navegación por teclado de IgbGrid proporciona una rica variedad de interacciones de teclado para el usuario. Mejora la accesibilidad y permite una navegación intuitiva por cualquier tipo de elementos del interior (celda, fila, encabezado de columna, barra de herramientas, pie de página, etc.).

    Estilo Blazor cuadrícula

    Nota: la cuadrícula usa el diseño de cuadrícula css, que no es compatible con IE sin prefijo, por lo que no se representará correctamente.

     <IgbGrid Class="grid"></IgbGrid>
    razor

    Luego configure las propiedades CSS--header-background y--header-text-color para esa clase:

    .grid {
        --header-background: #494949;
        --header-text-color: #FFF;
    }
    css

    Limitaciones conocidas

    Limitación Descripción
    Anchos de columna establecidos enpercentage ypx Actualmente no admitimos la combinación de anchos de columna con% ypx.
    Al intentar filtrar una columna de tiponumber Si un valor diferente anumber se ingresa en la entrada de filtrado,NaN se devuelve debido a una conversión incorrecta.
    Redwidth no depende del ancho de las columnas Elwidth de todas las columnas no determina la extensión de la cuadrícula en sí. Está determinado por las dimensiones del contenedor principal o por las dimensiones de la cuadrícula definida.width.
    Cuadrícula anidada en el contenedor principal Cuando la cuadrículawidth no está configurado y se coloca en un contenedor principal con dimensiones definidas, la cuadrícula se extiende hasta este contenedor.
    RedOnPush Estrategia de detección de cambios La red opera conChangeDetectionStrategy.OnPush Entonces, cada vez que aparezca alguna personalización, asegúrese de que se notifique a la cuadrícula sobre los cambios que ocurren.
    Las columnas tienen un ancho de columna mínimo permitido. Dependiendo de la--ig-size variable CSS, son los siguientes:
    "pequeño": 56px
    "medio": 64px
    "grande": 80px
    Si se establece un ancho inferior al mínimo permitido, no afectará a los elementos renderizados. Se renderizarán con el ancho mínimo permitido para el correspondiente--ig-size. Esto puede provocar un comportamiento inesperado con la virtualización horizontal y, por lo tanto, no es compatible.
    El alto de la fila no se ve afectado por el alto de las celdas que no se representan actualmente a la vista. Debido a la virtualización, una columna con una plantilla personalizada (que cambia la altura de la celda) que no está en la vista no afectará la altura de la fila. La altura de la fila se verá afectada solo mientras la columna relacionada se desplaza en la vista.

    Referencias de API

    Recursos adicionales

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.