Trabajar con columnas generadas automáticamente en la cuadrícula de Ignite UI for Angular

Ignite UI for Angular Grid es la cuadrícula de datos más rápida disponible. No solo ayuda a ejecutar aplicaciones más rápido, sino que también le permite a usted, como desarrollador, escribir aplicaciones más rápido.

Para verlo en acción, suponga que tiene una fuente de datos como se muestra en la lista de código a continuación:

this.products = [
    { Id: '1', Title: 'Book', ExpiryDate: new Date(), Price: 35, Rating: 3.5 },
    { Id: '2', Title: 'Pen', ExpiryDate: new Date(), Price: 25, Rating: 4.0 },
    { Id: '3', Title: 'Pencil', ExpiryDate: new Date(), Price: 20, Rating: 3.2 },
    { Id: '4', Title: 'Bat', ExpiryDate: new Date(), Price: 135, Rating: 4.0 },
    { Id: '5', Title: 'Ball', ExpiryDate: new Date(), Price: 65, Rating: 3.8 },
];

Puede representar los datos anteriores en igxGrid simplemente definiendo una instancia de igxGrid en la plantilla del componente y vinculando la propiedad de datos a la matriz del producto. Es fácil de agregar como se muestra en la siguiente lista de códigos:

<igx-grid [data]="products"
           [autoGenerate]="true"
           width="960px">
 </igx-grid>

Al establecer solo las propiedades data y autoGenerate, debería obtener datos representados en igxGrid como se muestra a continuación:

Dado que la propiedad autoGenerate está establecida en true, Ignite UI generará columnas con las propiedades predeterminadas configuradas. Sin embargo, Ignite UI for Angular Grid tiene un montón de características como:

• Filtración
• Paginación
• Clasificación
• Fijación de columnas
• Ocultación de columnas
• Column template
• Plantilla de encabezado, etc. y muchos más.

Como desarrollador, es posible que desee configurar estas características en función de los requisitos de su empresa. Hay dos formas de hacerlo:

1. Establezca la propiedad autoGenerate en false y configure las columnas manualmente. Más información al respecto aquí.
2. Si las columnas se generan automáticamente, configure las características anteriores en tiempo de ejecución en la clase de componente.

Podemos configurar características esenciales en tiempo de ejecución cuando se inicializan las columnas. Ignite UI for Angular igxGridComponent proporciona un evento onColumInit.

En el momento de la inicialización de la columna, se ejecuta el evento onColumnInit. Cualquier lógica de negocios que desee ejecutar en este momento, debe escribirla dentro de este evento. Por ejemplo, podemos escribir código para habilitar varias funciones como se muestra en la siguiente imagen:

Puede controlar el evento en la clase de componente, como se muestra en la lista de código a continuación:

Si desea anclar una columna determinada en una ubicación determinada, puede hacerlo de la siguiente manera

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Title') {
        column.pin();
    }
}

Encontrará la columna Título anclada en el lado izquierdo como se muestra a continuación:

Puede ocultar una columna en tiempo de ejecución durante la inicialización estableciendo el valor de la propiedad hidden en true:

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'Id') {
        column.hidden = true;
    }
}

También puede hacer que una columna sea editable estableciendo la propiedad editable en true:

public onColumnInit(column: IgxColumnComponent) {
    if (column.field === 'ExpiryDate') {
        column.editable = true;
    }
}

Cuando igxGrid se representa, la columna ExpiryDate debe ser editable como se muestra en la siguiente imagen. También puede notar que en el modo de edición, Ignite UI le da la opción de editar la columna de tipo de fecha en igxCalandar

Como puede ver, es muy fácil configurar varias funciones en columnas generadas automáticamente.  Además de configurar características, también puede dar formato a los datos de columna en una salida especificada. En Angular, las tuberías hacen eso. Por lo tanto, en el caso de las columnas generadas automáticamente, las tuberías se aplican mediante la función de formateador.

Digamos que quieres,

1. Display ExpiryDate in specific date format
2. Mostrar título en mayúsculas

Para ello, puede usar la función formateador en el evento onColumnInit, como se muestra en la siguiente imagen. Aquí estamos usando toLocaleDateString para convertir la salida de fecha a formato de fecha local y toUpperCase para mostrar la salida en mayúsculas.

Después de aplicar el formateador anterior, encontrará que los datos de la columna Título están formateados en mayúsculas y los datos de la columna ExpiryDate están formateados en el formato de cadena de fecha local.

También puede usar el formateador para lógica de negocios compleja. Puede pasar varias instrucciones como lógica mediante la función de flecha formateador. Por ejemplo, en la columna Precio, si los datos de precios son inferiores a 50, debe agregar un texto "Con descuento" junto a los datos de precios. Puede hacerlo muy rápidamente, como se muestra en la imagen a continuación:

Obtendrá Ignite UI for Angular cuadrícula renderizada con formateador aplicado como se muestra en la imagen a continuación:

Como se mencionó anteriormente, no solo formateará los datos de la columna, sino que también puede utilizar otras funciones. Muy suavemente, puede realizar otras operaciones como:

• Setting a summary
• Configuración de filtros
• Configuración de formateadores
• Setting width
• Setting header value
• Configuración de la plantilla de encabezado
• Engarce de bienes muebles
• Setting hidden attributes etc.

Cubriremos las características anteriores individualmente en otras publicaciones de blog. Sin embargo, es importante que comprenda cómo configurar las características cuando se inicializan Ignite UI for Angular columnas de cuadrícula, como se explica en este blog.  Puedes descargar una versión de prueba de 30 días de Ignite UI for Angular desde aquí. Espero que este post te sea útil.