Cuadrícula jerárquica React para Ignite UI for React

La barra de herramientas Ignite UI for React es un contenedor para operaciones de interfaz en la React Hierarchical Grid. La barra de herramientas React se encuentra en la parte superior del componente React, es decir, elIgrHierarchicalGrid y coincide con su tamaño horizontal. El contenedor de la barra de herramientas puede alojar cualquier contenido personalizado o conjunto de controles predefinidos de la interfaz. El conjunto predeterminado para la React Jerarchical Grid incluye:

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

La barra de herramientas y los componentes de UI predefinidos admiten eventos React y exponen API para desarrolladores.

Los componentes predefinidosIgrGridToolbarActions yIgrGridToolbarTitle de interfaz se añaden dentro de laIgrGridToolbar y todo esto es necesario para tener una barra de herramientas que proporcione interacciones predeterminadas con las características correspondientes de la cuadrícula:

<IgrHierarchicalGrid>
    <IgrGridToolbar>
        <IgrGridToolbarTitle>
           Hierarchical Grid Toolbar
        </IgrGridToolbarTitle>
        <IgrGridToolbarActions>
            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
            <IgrGridToolbarPinning></IgrGridToolbarPinning>
            <IgrGridToolbarHiding></IgrGridToolbarHiding>
            <IgrGridToolbarExporter></IgrGridToolbarExporter>
        </IgrGridToolbarActions>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

[!Note] As seen in the code snippet above, the predefined Actions UI components are wrapped in the IgrGridToolbarActions 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:

<IgrHierarchicalGrid>
    <IgrGridToolbar>
    </IgrGridToolbar>
</IgrHierarchicalGrid>

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.

Debido a ciertas limitaciones en cómo se implementan las cuadrículas hijas de unIgrHierarchicalGrid y cómo funciona el alcance DI, para definir un componente de barra de herramientas dentro de élIgrRowIsland, se utiliza laToolbarTemplate propiedad de entrada. Esto permite que las cuadrículas hijos creen sus propias instancias separadas en la barra de herramientas:

const rowIslandToolbarTemplate = (ctx: IgrGridToolbarTemplateContext) => {
    return (
        <IgrGridToolbar>
            <IgrGridToolbarActions>
                <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
                <IgrGridToolbarHiding></IgrGridToolbarHiding>
                <IgrGridToolbarPinning></IgrGridToolbarPinning>
                <IgrGridToolbarExporter></IgrGridToolbarExporter>
            </IgrGridToolbarActions>
        </IgrGridToolbar>
    );
}

<IgrHierarchicalGrid>
    ...
    <IgrRowIsland toolbarTemplate={rowIslandToolbarTemplate}>
    </IgrRowIsland>
</IgrHierarchicalGrid>

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 una de otra siguiendo un patrón similar al componente de tarjeta de la suite Ignite UI for React.

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

Establecer un título para la barra de herramientas en tu cuadrícula se consigue usando elIgrGridToolbarTitle.

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

<IgrGridToolbar>
    <IgrGridToolbarTitle>
        Grid toolbar title
    </IgrGridToolbarTitle>
</IgrGridToolbar>

Actions

AhíIgrGridToolbarActions es donde los usuarios pueden colocar acciones/interacciones en relación con la cuadrícula principal. Al igual que en la parte de título de la barra de herramientas, los usuarios pueden proporcionar cualquier cosa dentro de esa parte de plantilla, incluidos los componentes de interacción predeterminados de la barra de herramientas.

<IgrGridToolbar>
    <IgrGridToolbarActions>

    </IgrGridToolbarActions>
</IgrGridToolbar>

Fijación de columnas

ElIgrGridToolbarPinning componente proporciona la interfaz predeterminada para interactuar con el fijamiento 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.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarPinning title="Grid pinned columns" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarPinning>
    </IgrGridToolbarActions>
</IgrGridToolbar>

Ocultación de columna

ProporcionaIgrGridToolbarHiding la interfaz predeterminada para interactuar con el ocultamiento de columnas. Expone las mismas propiedades de entrada para personalizar la interfaz, como el título del componente, el marcador de posición para la entrada del componente y la altura del propio desplegable.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarHiding title="Grid column hiding" prompt="Filter column collection" columnListHeight="400px"></IgrGridToolbarHiding>
    </IgrGridToolbarActions>
</IgrGridToolbar>

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.

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
    </IgrGridToolbarActions>
</IgrGridToolbar>

Data Exporting

[!Note] When exporting the IgrHierarchicalGrid or any of its child grids down the hierarchy, the exported data will be a flat collection of rows belonging to their respective grid (the child grids will not be included in the exported data).

Como en el resto de las acciones de la barra de herramientas, la exportación se realiza desde elIgrGridToolbarExporter punto de vista inicial.

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.

Estas van desde cambiar el texto de la pantalla, activar/desactivar opciones en el desplegable o personalizar el nombre del archivo generado. Para referencia completa, consulta la documentaciónToolbarExporter de la API.

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

<IgrGridToolbar>
    <IgrGridToolbarActions>
        <IgrGridToolbarExporter exportCSV={true} exportExcel={true} filename="exported_data"></IgrGridToolbarExporter>
    </IgrGridToolbarActions>
</IgrGridToolbar>

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

[!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:

const configureExport = (evt: IgrGridToolbarExportEventArgs) => {
    const args = evt.detail;
    const options: IgrExporterOptionsBase = args.options;

    options.fileName = `Report_${new Date().toDateString()}`;
    (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
        columnArgs.cancel = columnArgs.header === 'Photo';
    });
}

<IgrHierarchicalGrid onToolbarExporting={configureExport}>
</IgrHierarchicalGrid>

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.

Además, los usuarios pueden establecer la propiedad de barra de herramientasshowProgress y usarla para sus propias operaciones de larga duración o simplemente como otra forma de señalar una acción que está ocurriendo 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:

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:

<IgrHierarchicalGrid className="grid"></IgrHierarchicalGrid>

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

Known Limitations

[!Note] Currently, defining a toolbar component directly inside the IgrRowIsland is not supported. Use the ToolbarTemplate property instead.

API References

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

IgrHierarchicalGrid Events:

ToolbarExporting

Additional Resources

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

Barra de herramientas de cuadrícula jerárquica React

Toolbar with Child Grids