Web Components Tree Grid Toolbar

The Ignite UI for Web Components Toolbar in is a container for UI operations in the Web Components Tree Grid. The Web Components toolbar is located at the top of the Web Components component, i.e., the IgcTreeGridComponent and it matches its horizontal size. The toolbar container can host any custom content or set of predefined UI controls. The default set for the Web Components Tree Grid includes:

• 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.

Web Components Toolbar Grid Example

The predefined IgcGridToolbarActionsComponent and IgcGridToolbarTitleComponent UI components are added inside the IgcGridToolbarComponent and this is all needed to have a toolbar providing default interactions with the corresponding Grid features:

<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>

[!Note] As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgcGridToolbarActionsComponent container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.

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>

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.

Title

Setting a title for the toolbar in your grid is achieved by using the IgcGridToolbarTitleComponent.

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>

Actions

The IgcGridToolbarActionsComponent is where users can place actions/interactions in relation to the parent grid. As with the title portion of the toolbar, users can provide anything inside that template part, including the default toolbar interaction components.

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

Fijación de columnas

The IgcGridToolbarPinningComponent component provides the default UI for interacting with column pinning in the grid.

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>

Ocultación de columna

The IgcGridToolbarHidingComponent provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.

<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>

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>

Data Exporting

As with the rest of the toolbar actions, exporting is provided through a IgcGridToolbarExporterComponent out of the box.

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.

These range from changing the display text, to enabling/disabling options in the dropdown to customizing the name of the generated file. For full reference, consult the API documentation for the 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>

In addition to changing the exported filename, the user can further configure the exporter options by waiting for the ToolbarExporting event and customizing the options entry in the event properties.

[!Note] By default when exporting to CSV the exporter exports using a comma separator and uses a '.csv' extension for the output file. You can customize these exporting parameters by subscribing to events of the exporter or changing the values of the exporter options fields. You can also cancel the export process by setting the cancel field of the event args to true.

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>

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';
        });
    }
}

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

Exporting Indicator

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.

Moreover, users can set the toolbar showProgress property and use for their own long running operations or just as another way to signify an action taking place in the grid.

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:

Custom Content

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>

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:

Styling

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>

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;
}

Demo

API References

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

• IgcGridToolbarAdvancedFiltering
• IgcGridToolbarComponent
• IgcGridToolbarExporterComponent
• IgcGridToolbarHidingComponent
• IgcGridToolbarPinningComponent
• IgcGridToolbarTitleComponent

IgcTreeGridComponent Events:

• ToolbarExporting

Additional Resources

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

• Ignite UI for Web Components Foros
• Ignite UI for Web Components GitHub