Enabling Column Hiding in Ignite UI for Angular Grid

Ignite UI for Angular Grid es el más rápido Angular Grid que existe.  No solo se ejecuta rápido, sino que también es muy fácil de usar igxGrid en su aplicación. Ignite UI for Angular clase de componente Grid se denomina igxGrid y en la plantilla se puede usar como <igx-grid></igx-grid>

Más información sobre Ignite UI for Angular Grid aquí

Paso 1: Agregar Ignite UI for Angular en Angular proyecto

Hay tres formas de agregar una cuadrícula igx a un proyecto Angular:

1. Si inicia un nuevo proyecto, utilice la CLI Ignite UI para aplicar scaffolding al proyecto. Puede usar las opciones de la línea de comandos para agregar igx-grid, incluida la instalación de dependencias.
2. En un proyecto existente, puede utilizar la extensión de Ignite UI for Angular Toolbox para agregar una cuadrícula igx en el proyecto.
3. Puede usar npm para instalar Ignite UI for Angular dependencias en su proyecto.

Paso 2: Agregar igx-grid a un proyecto de Angular

Para trabajar con igxGrid, debe agregar

1. igxGridModule
2. BrowserAnimationModule

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IgxGridModule } from 'igniteui-angular';

Después de importar, pase estos dos módulos a la matriz imports de Module. A continuación, para enlazar con igxGrid, vamos a crear una fuente de datos local en el componente.

getData() {
    return [
        { model: 'BMW', color: 'Black', price: '20000' },
        { model: 'Audi', color: 'Blue', price: '10000' },
        { model: 'Merc', color: 'Red', price: '25000' },
        { model: 'Toyta', color: 'Green', price: '18000' },
        { model: 'GM', color: 'Blye', price: '10000' },
    ];
}

En el gancho del ciclo de vida ngOnInit del componente, lea los datos de la función getData() como se muestra en el código que se muestra a continuación. Estableceremos la fuente de datos de igxGrid en localData mediante el enlace de propiedades en la plantilla.

ngOnInit() {
    this.localData = this.getData();
}

Agregue igxGrid en la plantilla como se muestra en la lista de código a continuación.  Estamos configurando explícitamente las columnas de modo que podamos trabajar con la función de ocultación de columnas.

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false">
    <igx-column field="model" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

En la parte superior igxGrid;

1. Las columnas se configuran manualmente
2. Datasource is set using [data] property binding to localData
3. Dado que las columnas se configuran manualmente, autoGenerate se establece en false.

En este punto de la aplicación en ejecución, obtendrá igxGrid en Angular aplicación como se muestra en la imagen a continuación:

Step 3:  Enable Column Hiding

Ignite UI for Angular Cuadrícula, coloque la columna que oculta la interfaz de usuario en la barra de herramientas de la cuadrícula. Puede usar el menú desplegable de la barra de herramientas de la cuadrícula para mostrar u ocultar columnas.  Por lo tanto, el primer paso que debe debe es establecer showToolbar de la cuadrícula en true.

<igx-grid .... [showToolbar]="true" toolbarTitle="Cars" ...>
 
</igx-grid>

Después de establecer showToolbar en true, debe establecer columnHiding en true.

<igx-grid .... [columnHiding]="true" ...>
 
</igx-grid>

Al establecer la combinación de showToolbar y columnHiding, puede trabajar con la ocultación de columnas en igxGrid. Poniendo todo junto, con la ocultación de columnas y la configuración manual de columnas, igx-grid se verá como se muestra en la lista de códigos a continuación:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
            [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
      <igx-column field="model" header="Maker"></igx-column>
      <igx-column field="color" header="Color"></igx-column>
      <igx-column field="price" header="Price"></igx-column>
</igx-grid>

En este punto de la aplicación en ejecución, encontrará igxGrid renderizado como se muestra en la imagen a continuación:

También puede deshabilitar la ocultación de una columna estableciendo la propiedad [disabledHiding] en true. Por lo tanto, puede deshabilitar la ocultación de un modelo de columnas como se muestra en la lista de código a continuación:

<igx-grid #grid1 id="grid1" [data]="localData" [autoGenerate]="false"
          [showToolbar]="true" toolbarTitle="Cars" [columnHiding]="true">
    <igx-column field="model" [disableHiding]="true" header="Maker"></igx-column>
    <igx-column field="color" header="Color"></igx-column>
    <igx-column field="price" header="Price"></igx-column>
</igx-grid>

En este punto de la aplicación en ejecución, encontrará igxGrid renderizado con la columna del modelo deshabilitada para ocultar que se muestra en la imagen a continuación:

Además de la columna, se esconden muchos IgniteUI para Angular Grid tiene muchas características, lo que la convierte en la mejor cuadrícula para aplicaciones empresariales. Echa un vistazo a todas las características aquí.

Ahora ha visto que ocultar columnas es tan simple como configurar el enlace de propiedades. Espero que este post te sea útil.