React Master-Detail Grid

    El componente IgrGrid admite la especificación de una plantilla de detalles que muestra detalles adicionales para una fila en particular expandiendo/contrayendo su contenido. Cuando se especifica, cada registro actúa como un maestro, que al expandirse muestra una plantilla de detalles personalizable con datos contextuales para el registro actual.

    Este modo es útil cuando necesita mostrar datos de estilo maestro-detalle en una estructura jerárquica.

    React Grid Master-Detail Example

    Configuration

    Para configurar IgrGrid para que se muestre en modo maestro-detalle, debe especificar una plantilla para la cuadrícula:

    <IgrGrid detailTemplate={masterDetailTemplate} autoGenerate="false" data={nwindData}>

    El contexto de la plantilla son los datos del registro maestro, de modo que los valores del registro maestro se pueden mostrar en la plantilla de detalles. Por ejemplo:

    const masterDetailTemplate = ({dataContext}:{dataContext: IgrGridMasterDetailContext}) => {
    const data = dataContext.implicit;
    return (
        <div className="contact-container">
            <span><strong>Name:</strong> {data.ContactName}</span> <br/>
            <span><strong>Title:</strong> {data.ContactTitle}</span> <br/>
            <span><strong>Company:</strong> {data.CompanyName}</span> <br/>
        </div>
    );
}

    API

    También se exponen métodos API adicionales para controlar los estados de expansión:

    Navegación por teclado

    • Cuando el foco está en una fila de detalles:

      • 🡑: navega una fila hacia arriba, enfocando una celda de la fila anterior.
      • 🡓: navega una fila hacia abajo, enfocando una celda de la siguiente fila.
      • Tabulador: permite que el foco se mueva al siguiente elemento enfocable dentro de la plantilla si hay elementos enfocables; de lo contrario, se mueve a la siguiente fila de la cuadrícula.
      • Shift + Tab: mueve el foco a la fila anterior.

    • Cuando el foco está en una fila de datos con expansor:

      • Alt + 🡒 or Alt + 🡓 - expands the row.
      • Alt + 🡐 or Alt + 🡑 - collapses the row.

    Known Issues and Limitations

    Limitaciones conocidas Descripción
    Es posible que la navegación con pestañas dentro de la plantilla de detalles personalizada no actualice la posición de desplazamiento de la cuadrícula maestra en caso de que el siguiente elemento enfocado esté fuera del puerto de visualización visible. La navegación por pestañas dentro de la plantilla de detalles personalizada se deja en manos del navegador.
    Al crear una plantilla de cuadrícula dentro de la vista de detalles que tiene una<igc-column> definiciones, la cuadrícula principal también representará esas columnas. Esto se puede evitar usando autoGenerate=true para la cuadrícula anidada. En caso de que sea necesario modificar algún aspecto de esas columnas,ColumnInit Se puede utilizar el evento.
    La plantilla de detalles no se exportará a Excel. Como la plantilla de detalles puede contener cualquier tipo de contenido, no podemos exportarla a Excel de forma inmediata.
    La función de búsqueda no resaltará elementos de la plantilla de detalles.

    API References