Web Components Tree Grid Toolbar

    La barra de herramientas Ignite UI for Web Components es un contenedor para las operaciones de la interfaz de usuario en la cuadrícula de árbol Web Components. La barra de herramientas Web Components se encuentra en la parte superior del componente Web Components, es decir, el IgcTreeGridComponent y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede hospedar cualquier contenido personalizado o conjunto de controles de interfaz de usuario predefinidos. El conjunto predeterminado para la cuadrícula de árbol de Web Components incluye:

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

    La barra de herramientas y los componentes predefinidos de la interfaz de usuario admiten eventos Web Components y exponen la API para los desarrolladores.

    Ejemplo de cuadrícula de barra de herramientas de Web Components

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

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

    Los componentes predefinidos Actions y title de la interfaz de usuario se agregan dentro de y IgcGridToolbar todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las características de cuadrícula correspondientes:

    <igc-tree-grid id="treeGrid" primary-key="ID" foreign-key="ParentID" auto-generate="true">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>Tree Grid Toolbar</igc-grid-toolbar-title>
        <igc-grid-toolbar-actions>
            <igc-grid-toolbar-advanced-filtering><igc-grid-toolbar-advanced-filtering>
            <igc-grid-toolbar-hiding></igc-grid-toolbar-hiding>
            <igc-grid-toolbar-pinning></igc-grid-toolbar-pinning>
            <igc-grid-toolbar-exporter></igc-grid-toolbar-exporter>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-tree-grid>
html

    Como se ve en el fragmento de código anterior, los componentes predefinidos de la interfaz de usuario de acciones están incluidos en el contenedor IgcGridToolbarActions. 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:

    <igc-tree-grid primary-key="ID" foreign-key="ParentID" auto-generate="true">
    <igc-grid-toolbar>
    </igc-grid-toolbar>
</igc-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, lo que afecta a la cuadrícula en su conjunto.

    Como se muestra arriba, se puede configurar para proporcionar componentes predeterminados para controlar, ocultar columnas, fijar columnas, filtrar avanzado y exportar datos desde 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 Web Components.

    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
    DATA
    TS
    HTML
    CSS
    Edit in:

    Título

    Establecer un título para la barra de herramientas en su cuadrícula se logra utilizando IgcGridToolbarTitle.

    Los usuarios pueden proporcionar cualquier cosa, desde texto simple hasta plantillas más complejas.

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

    Comportamiento

    ​IgcGridToolbarActions es 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.

    <igc-grid-toolbar>
    <igc-grid-toolbar-actions>
    <!-- ... -->
    </igc-grid-toolbar-actions>
</igc-grid-toolbar>
html

    Fijación de columnas

    El componente IgcGridToolbarPinning 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.

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

    Ocultación de columnas

    ​IgcGridToolbarHiding 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.

    <igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-hiding
            title="Grid column hiding"
            prompt="Filter column collection"
            column-list-height="400px">
        </igc-grid-toolbar-hiding>
    </igc-grid-toolbar-actions>
</igc-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.

    <igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-advanced-filtering>Custom text for the toggle button</igc-grid-toolbar-advanced-filtering>
    </igc-grid-toolbar-actions>
</igc-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 realiza a través de IgcGridToolbarExporter listo para usar.

    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 de ToolbarExporter.

    Aquí hay un fragmento que muestra algunas de las opciones que se pueden personalizar a través de la plantilla Web Components:

    <igc-grid-toolbar>
    <igc-grid-toolbar-actions>
        <igc-grid-toolbar-exporter export-csv="true" export-excel="true" filename="exported_data">
        </igc-grid-toolbar-exporter>
    </igc-grid-toolbar-actions>
</igc-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 ToolbarExporting 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:

    <igc-tree-grid id="treeGrid"></igc-tree-grid>
html
    constructor() {
    var treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
    treeGrid.addEventListener("toolbarExporting", this.configureExport);
}

public configureExport(evt: CustomEvent<IgcGridToolbarExportEventArgs>) {
    const args = evt.detail;
    const options: IgcExporterOptionsBase = args.options;
    if (options) {
        options.fileName = `Report_${new Date().toDateString()}`;
        (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
            columnArgs.cancel = columnArgs.header === 'Name';
        });
    }
}
ts

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Ignite UI for Web Components | CTA Banner

    Indicador de exportación

    Cuando se utiliza el componente exportador de la 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 configurar la propiedad ShowProgress la barra de herramientas y utilizarla 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 ejemplo que se utiliza a continuación tiene una cantidad significativa de datos, a fin de aumentar el tiempo necesario para exportar los datos para que se pueda ver la barra de progreso. Además cuenta con otro botón que simula una operación de larga duración en la red:

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Contenido personalizado

    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:

    <igc-tree-grid id="grid">
    <igc-grid-toolbar>
        <igc-grid-toolbar-title>title</igx-grid-toolbar-title>
        <!--
            Everything between the toolbar tags except the default toolbar components/directives
            will be projected as custom content.
         -->
        <igc-grid-toolbar-actions>
        </igc-grid-toolbar-actions>
    </igc-grid-toolbar>
</igc-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
    DATA
    TS
    HTML
    CSS
    Edit in:

    Estilo

    Además de los temas predefinidos, la cuadrícula se puede personalizar aún más configurando algunas de las propiedades CSS disponibles. En caso de que desee cambiar algunos de los colores, primero debe establecer una clase para la cuadrícula:

    <igc-tree-grid class="grid"></igc-tree-grid>
html

    Luego configure las propiedades CSS relacionadas para esa clase:

    .grid {
    --ig-grid-toolbar-background-color: #2a2b2f;
    --ig-grid-toolbar-title-text-color: #ffcd0f;
    --ig-grid-toolbar-dropdown-background: #2a2b2f;
}
css

    Manifestación

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Referencias de API

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

    Recursos adicionales

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