Angular Tree Grid Toolbar

    La cuadrícula de árbol de Ignite UI for Angular proporciona un IgxGridToolbarComponent que es esencialmente un contenedor para las operaciones de la interfaz de usuario. La barra de herramientas Angular se encuentra en la parte superior del componente Angular, es decir, la cuadrícula de árbol, y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede alojar controles de interfaz de usuario predefinidos para las siguientes características de Tree Grid:

    • Ocultación de columna
    • Fijación de columnas
    • Exportación de Excel
    • Filtrado avanzado

    o cualquier otro contenido personalizado. La barra de herramientas y los componentes de la interfaz de usuario predefinidos admiten eventos Angular y exponen la API para los desarrolladores.

    Ejemplo de cuadrícula de barra de herramientas de Angular

    EXAMPLE
    TS
    HTML
    SCSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Las actions predefinidas y los componentes de la interfaz de usuario title se agregan dentro de <igx-grid-toolbar> y todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las funciones de Grid correspondientes:

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true">
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>Tree Grid Toolbar</igx-grid-toolbar-title>
            <igx-grid-toolbar-actions>
                <igx-grid-toolbar-advanced-filtering><igx-grid-toolbar-advanced-filtering>
                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    </igx-tree-grid>
    html

    Nota: Como se ve en el fragmento de código anterior, los componentes de la interfaz de usuario actions predefinidas están incluidos en el contenedor <igx-grid-toolbar-actions>. De esta manera, el título de la barra de herramientas se alinea a la izquierda de la barra de herramientas y las acciones se alinean a la derecha de la barra de herramientas.. De esta manera, el título de la barra de herramientas se alinea a la izquierda de la barra de herramientas y las acciones se alinean a la derecha de la barra de herramientas.

    Por supuesto, cada una de estas UI se puede agregar de forma independiente entre sí o puede que no se agreguen en absoluto. De esta manera, el contenedor de la barra de herramientas quedará vacío:

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true">
        <igx-grid-toolbar>
        </igx-grid-toolbar>
    </igx-tree-grid>
    html

    Para obtener una visión completa de cada uno de los componentes predeterminados de la interfaz de usuario, continúe leyendo la sección Funciones a continuación.

    Características

    La barra de herramientas es excelente para separar la lógica / interacciones que afectan a la cuadrícula en su conjunto. Como se muestra arriba, se puede configurar para proporcionar componentes predeterminados para el control, la ocultación de columnas, la fijación de columnas, el filtrado avanzado y la exportación de datos de la cuadrícula. Estas funciones se pueden habilitar de forma independiente entre sí siguiendo un patrón similar al componente de tarjeta del conjunto de Ignite UI for Angular. A continuación se enumeran las características principales de la barra de herramientas con código de ejemplo para cada una de ellas.

    EXAMPLE
    TS
    HTML
    SCSS

    Título

    Establecer un título para la barra de herramientas en su cuadrícula se logra utilizando IgxGridToolbarTitleComponent. Los usuarios pueden proporcionar cualquier cosa, desde texto simple hasta plantillas más complejas.

    <igx-grid-toolbar>
        <igx-grid-toolbar-title>Grid toolbar title</igx-grid-toolbar-title>
    </igx-grid-toolbar>
    html

    Comportamiento

    La barra de herramientas expone un contenedor específico donde los usuarios pueden colocar acciones/interacciones en relación con la cuadrícula principal. Al igual que con la parte del título de la barra de herramientas, los usuarios pueden proporcionar cualquier cosa dentro de esa parte de la plantilla, incluidos los componentes de interacción predeterminados de la barra de herramientas.

    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <button igxButton>Action</button>
            <igx-select></igx-select>
            ...
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    html

    Cada acción ahora expone una forma de cambiar la configuración de superposición del cuadro de diálogo de acciones utilizando la entrada overlaySettings, por ejemplo:

    <igx-grid-toolbar-actions>
        <igx-grid-toolbar-pinning [overlaySettings]="overlaySettingsScaleCenter"></igx-grid-toolbar-pinning>
        <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
    </igx-grid-toolbar-actions>
    html
    public data: any[];
    public positionStrategyScaleCenter = new GlobalPositionStrategy({
        openAnimation: scaleInCenter,
        closeAnimation: scaleOutCenter
    });
    public overlaySettingsScaleCenter = {
        positionStrategy: this.positionStrategyScaleCenter,
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: true,
        closeOnEscape: true
    };
    
    public positionStrategyAuto = new AutoPositionStrategy();
    public overlaySettingsAuto = {
        positionStrategy: this.positionStrategyAuto,
        scrollStrategy: new AbsoluteScrollStrategy(),
        modal: false,
        closeOnEscape: false
    };
    constructor() {
        this.data = athletesData;
    }
    ts

    La configuración de superposición predeterminada utiliza ConnectedPositionStrategy con estrategia de desplazamiento absoluto, modal establecido en falso, con interacciones habilitadas de cierre al escapar y cierre al hacer clic externo.

    Fijación de columnas

    El componente Fijar barra de herramientas proporciona la interfaz de usuario predeterminada para interactuar con la fijación de columnas en la cuadrícula. El componente está configurado para funcionar desde el primer momento con la cuadrícula principal que contiene la barra de herramientas, así como varias propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.

    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-pinning
                title="Grid pinned columns"
                prompt="Filter column collection"
                columnListHeight="400px"
            >
            </igx-grid-toolbar-pinning>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    html

    Ocultación de columnas

    El componente Ocultar barra de herramientas proporciona la interfaz de usuario predeterminada para interactuar con la ocultación de columnas. Expone las mismas propiedades de entrada para personalizar la interfaz de usuario, como el título del componente, el marcador de posición para la entrada del componente y la altura del menú desplegable.

    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-hiding
                title="Grid column hiding"
                prompt="Filter column collection"
                columnListHeight="400px"
            >
            </igx-grid-toolbar-hiding>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    html

    Filtrado avanzado

    El componente Filtrado avanzado de la barra de herramientas proporciona la interfaz de usuario predeterminada para la función Filtrado avanzado. El componente expone una forma de cambiar el texto predeterminado del botón.

    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-advanced-filtering>Custom text for the toggle button</igx-grid-toolbar-advanced-filtering>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    html

    Exportación de datos

    Al igual que con el resto de las acciones de la barra de herramientas, la exportación se proporciona a través de un componente Toolbar Exporter listo para usar. El componente de exportación utiliza el servicio correspondiente para el formato de datos de destino (Excel ​ ​CSV). Eso significa que si el servicio correspondiente no se proporciona a través de la cadena de inyección de dependencia, el componente no podrá exportar nada. Si necesita un repaso de la DI en Angular, consulte la guía oficial. Aquí hay un fragmento de muestra que muestra cómo habilitar todos los servicios de exportación para su aplicación.

    // app.module.ts
    
    import { IgxExcelExporterService, IgxCsvExporterService } from 'igniteui-angular';
    // import { IgxExcelExporterService, IgxCsvExporterService } from '@infragistics/igniteui-angular'; for licensed package
    
    @NgModule({
        ...
        providers: [IgxExcelExporterService, IgxCsvExporterService ]
    })
    export class AppModule { ... }
    typescript

    En v12.2.1 y posteriores, los servicios de exportación se brindan en la raíz, lo que significa que ya no es necesario declararlos en los proveedores de AppModule.

    El componente exportador de la barra de herramientas expone varias propiedades de entrada para personalizar tanto la interfaz de usuario como la experiencia de exportación. Estos van desde cambiar el texto que se muestra hasta habilitar/deshabilitar opciones en el menú desplegable y personalizar el nombre del archivo generado. Para obtener una referencia completa, consulte la documentación de la API para el componente exportador de la barra de herramientas.

    A continuación se muestra un fragmento que muestra algunas de las opciones que se pueden personalizar a través de la plantilla Angular:

    <igx-grid-toolbar>
        <igx-grid-toolbar-actions>
            <igx-grid-toolbar-exporter
                <!-- If active, enables the csv export entry in the dropdown UI -->
                [exportCSV]="csvExportEnabled"
                <!-- If active, enables the excel export entry in the dropdown UI -->
                [exportExcel]="excelExportEnabled"
                <!-- The name of the generated export file without the file extension -->
                filename="exported_data"
            >
                Custom text for the exporter button
                <span excelText>Custom text for the excel export entry</span>
                <span csvText>Custom text for the CSV export entry</span>
            </igx-grid-toolbar-exporter>
        </igx-grid-toolbar-actions>
    </igx-grid-toolbar>
    html

    Además de cambiar el nombre del archivo exportado, el usuario puede configurar aún más las opciones del exportador esperando el evento Exportación de la barra de herramientas y personalizando la entrada de opciones en las propiedades del evento.

    De forma predeterminada, al exportar a CSV, el exportador exporta utilizando un separador de coma y utiliza una extensión '.csv' para el archivo de salida. Puede personalizar estos parámetros de exportación suscribiéndose a eventos del exportador o cambiando los valores de los campos de opciones del exportador. También puede cancelar el proceso de exportación configurando el campo de cancelación de los argumentos del evento en verdadero.

    El siguiente fragmento de código demuestra la suscripción al evento de exportación de la barra de herramientas y la configuración de las opciones del exportador:

    <igx-tree-grid (toolbarExporting)="configureExport($event)" ></igx-tree-grid>
    html
    configureExport(args: IGridToolbarExportEventArgs) {
        const options: IgxExporterOptionsBase = args.options;
        
        options.fileName = `Report_${new Date().toDateString()}`;
    
        if (options instanceof IgxExcelExporterOptions) {
            options.columnWidth = 10;
        } else {
            options.fileType = CsvFileTypes.TSV;
            options.valueDelimiter = '\t';
        }
    
        args.exporter.columnExporting.subscribe((columnArgs: IColumnExportingEventArgs) => {
            
            
            // Don't export image field
            columnArgs.cancel = columnArgs.header === 'Name';
            
        });
    }
    typescript

    El siguiente ejemplo demuestra cómo personalizar los archivos exportados:

    EXAMPLE
    TS
    HTML
    SCSS

    Indicador de exportación

    Al utilizar el componente exportador de barra de herramientas predeterminado, cada vez que se realiza una operación de exportación, la barra de herramientas mostrará un indicador de progreso mientras la operación está en curso. Además, los usuarios pueden establecer la propiedad showProgress de la barra de herramientas y usarla para sus propias operaciones de larga duración o simplemente como otra forma de indicar una acción que tiene lugar en la cuadrícula. El siguiente ejemplo tiene una cantidad significativa de datos. Mientras se exportan los datos, se muestra la barra de progreso. Además, tiene otro botón que simula una operación de larga duración en la red:

    EXAMPLE
    TS
    HTML
    SCSS

    Contenido personalizado

    Esto reemplaza la antigua directiva de plantilla de barra de herramientas. Si está migrando desde una versión anterior a la v11, nuestras migraciones se encargarán del movimiento del contenido de la plantilla. Sin embargo, no manejamos los enlaces en la plantilla, así que asegúrese de verificar los archivos de plantilla modificados después de que se complete la migración.

    Si la parte de acciones del componente de la barra de herramientas no es suficiente para un caso de uso particular, la barra de herramientas en sí tiene una proyección de contenido general donde los usuarios pueden proporcionar una interfaz de usuario adicional. Si el usuario necesita la instancia de grid respectiva para llamadas o enlaces de API, puede crear una variable de referencia de plantilla.

    Aquí hay un fragmento de muestra:

    <igx-tree-grid #gridRef ...>
    
        ...
        <igx-grid-toolbar>
            <igx-grid-toolbar-title>{{ titleBinding }}</igx-grid-toolbar-title>
    
            <!--
                Everything between the toolbar tags except the default toolbar components/directives
                will be projected as custom content.
             -->
            <button igxButton="flat" igxRipple (click)="#gridRef.clearSort()">
                <igx-icon fontSet="material">clear</igx-icon>
                Clear Sort
            </button>
    
            <igx-grid-toolbar-actions>
                ...
            </igx-grid-toolbar-actions>
        </igx-grid-toolbar>
    
    </igx-tree-grid>
    html

    El siguiente ejemplo demuestra cómo agregar un botón adicional a la barra de herramientas para borrar el conjunto de clasificación haciendo clic en los encabezados de las columnas:

    EXAMPLE
    TS
    HTML
    SCSS

    App Builder | CTA Banner

    Estilo

    Para comenzar a diseñar la barra de herramientas, necesitamos importar el archivo de índice, donde se encuentran todas las funciones del tema y los mixins de componentes:

    @use "igniteui-angular/theming" as *;
    
    // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
    // @import '~igniteui-angular/lib/core/styles/themes/index';
    scss

    Primero, creemos una nueva paleta.

    $my-dark-palette: palette(
      $primary: #2466ff,
      $secondary: #ffcd0f,
      $surface: #2a2b2f,
      $grays: #fff,
    );
    
    $my-dark-color: color($my-dark-palette, 'surface');
    scss

    Ahora, cree un nuevo tema que extienda el grid-toolbar-theme y modifique los parámetros $background-color y $title-text-color.

    $dark-grid-toolbar-theme: grid-toolbar-theme(
      $background-color: $my-dark-color,
      $title-text-color: color($my-dark-palette, 'secondary'),
      $dropdown-background: $my-dark-color,
    );
    scss

    Para asignar un tema a los menús de acciones de columna de la barra de herramientas, tenemos que cambiar el tema del componente column-actions-theme.

    $dark-column-actions-theme: column-actions-theme(
      $title-color: color($my-dark-palette, 'secondary'),
      $background-color: color($my-dark-palette, 'surface')
    );
    scss

    Dado que las acciones de columna están usando otros componentes, necesitamos cambiar sus temas para que coincidan con nuestro nuevo tema de barra de igx-button​ ​igx-checkbox herramientas.

    $dark-button-theme: button-theme(
      $outlined-background: color($my-dark-palette, 'secondary'),
      $outlined-hover-background: color($my-dark-palette, 'grays', 100),
      $outlined-hover-text-color: color($my-dark-palette, 'secondary')
    );
    
    $dark-checkbox-theme: checkbox-theme(
      $tick-color: $my-dark-color,
    );
    scss

    El último paso es incluir los temas recién creados.

    @include css-vars($dark-grid-toolbar-theme);
    @include css-vars($dark-column-actions-theme);
    @include css-vars($dark-checkbox-theme);
    @include css-vars($dark-button-theme);
    scss

    Si el componente usa un Emulated ViewEncapsulation, es necesario que penetrate esta encapsulación use::ng-deep para aplicar estilo a los componentes dentro del componente de la barra de herramientas de la cuadrícula:

    @include css-vars($dark-grid-toolbar-theme);
    
    :host {
      ::ng-deep {
        @include css-vars($dark-column-actions-theme);
        @include css-vars($dark-checkbox-theme);
        @include css-vars($dark-button-theme);
      }
    }
    scss

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS

    Referencias de API

    El servicio Grid Toolbar tiene algunas API más para explorar, que se enumeran a continuación.

    IgxTreeGridComponent events:

    Styles:

    Recursos adicionales

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