[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Column Types

    La Ignite UI for Blazor admite cinco tipos de columnas, además de un tipo de columna de plantilla, lo que le brinda total flexibilidad sobre la forma en que se muestran sus datos en la cuadrícula de datos Blazor. Los tipos de columnas admitidos son columna de texto, columna numérica, columna de fecha y hora, columna de imagen, cuadro combinado y plantilla.

    Cada columna se vincula a los datos estableciendo la propiedad Field en el nombre de la propiedad correspondiente en los elementos de su fuente de datos subyacente vinculados a la cuadrícula de datos Blazor.

    Blazor Column Types Example

    Text Column

    La cuadrícula de datos Blazor se utiliza para mostrar texto formateado en sus celdas asociadas. Este es el tipo de columna predeterminado que se utiliza para mostrar datos del tipo cadena.

    Numeric Column

    ​IgbNumericColumn se utiliza para mostrar un valor numérico formateado en sus celdas asociadas y permite controlar la ubicación del lugar decimal dentro de las celdas y mostrar dígitos fraccionarios.

    DateTime Column

    ​IgbDateTimeColumn se utiliza para mostrar objetos de fecha en sus celdas asociadas y permite controlar el formato de los objetos de fecha como mejor le parezca.

    Image Column

    ​IgbImageColumn se utiliza para mostrar una imagen dentro de una celda y expone opciones para la personalización de la ampliación de imágenes para celdas mediante su opción ImageStretchOption.

    También puede elegir qué tipo de recurso es su imagen configurando la opción ImageResourceType.

    ComboBox Column

    ​IgbComboBoxColumn se utiliza para mostrar una lista desplegable desde la cual los usuarios finales pueden seleccionar un solo elemento.

    El enlace de datos se puede lograr utilizando una matriz de objetos complejos a través de la propiedad DataSource de la columna.

    La propiedad TextField determina qué valor se muestra cuando los usuarios realizan una selección.

    La propiedad ValueField determina el valor enlazado del elemento de datos subyacente seleccionado. Esto es necesario si su lista de objetos tiene varias propiedades.

    Template Column

    ​IgbTemplateColumn se utiliza junto con una plantilla de celda. Le permite aplicar una plantilla personalizada a la celda de la columna. Esto se hace manejando el evento CellUpdating de la columna de la plantilla.

    Los argumentos del evento CellUpdating exponen la IgbTemplateColumn que activa el evento, así como un parámetro IgbTemplateCellUpdatingEventArgs. Este parámetro de argumentos de evento expone una propiedad Content que devuelve el HTMLDivElement que se colocará dentro de las celdas asociadas de la columna. Luego puede agregar nuevos elementos a este div.

    ​IgbTemplateCellUpdatingEventArgs también expone una propiedad CellInfo que puede usar para obtener un objeto TemplateCellInfo. Este objeto expone información sobre la celda y la fila, como el índice, el elemento de datos subyacente y la apariencia de la celda.

    Sparkline Column

    Puede incrustar componentes Sparkline en IgbTemplateColumn para mostrar estructuras de datos más complejas. Consulte el tema Minigráfico de columnas para obtener información sobre cómo hacer esto.

    Code Snippet

    A continuación se demuestra la implementación de cada una de las columnas descritas en este tema:

    La siguiente es una fuente de datos de muestra para usar con las columnas anteriores.

    <IgbDataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"
    AutoGenerateColumns="false"
    DataSource="DataSource">
    <IgbTextColumn Field="FirstName" HeaderText="First Name" />
    <IgbTextColumn Field="LastName" HeaderText="Last Name" />
    <IgbComboBoxColumn Field="City" />
    <IgbTemplateColumn Field="Address" HeaderText="Address" CellUpdatingScript="onUpdatingAddressColumn" />
    <IgbImageColumn Field="Photo" HeaderText="Photo" />
    <IgbNumericColumn Field="Age" HeaderText="Age" />
    <IgbDateTimeColumn Field="Birthday" HeaderText="Date of Birth" />
</IgbDataGrid>

// In JS file:
function onUpdatingAddressColumn(grid, args) {
    let content = args.content;
    let info = args.cellInfo;
    let item = info.rowItem;
    let span1 = null;
    let span2 = null;

    if (content.childElementCount === 0) {
        content.style.fontFamily = "Verdana";
        content.style.fontSize = "13px";
        content.style.verticalAlign = "center";
        content.style.lineHeight = "normal";
        content.style.display = "flex";
        content.style.flexDirection = "column";
        content.style.justifyContent = "center";
        content.style.height = "100%";
        content.style.width = "100%";
        content.style.color = "rgb(24, 29, 31)";
        // stacking above elements in the content of grid's cell
        span1 = document.createElement("span");
        span2 = document.createElement("span");
        content.appendChild(span1);
        content.appendChild(span2);
    }
    else {
        span1 = content.children[0];
        span2 = content.children[1];
    }

    if (span1 && span2) {
        // updating elements in the content of grid's cell
        span1.textContent = item.Street;
        span2.textContent = item.City + ", " + item.Country;
    }
}

igRegisterScript("onUpdatingAddressColumn", onUpdatingAddressColumn, false);

    API References