React Master-Detail Grid

    ElIgrGrid componente permite especificar una plantilla de detalle que muestre detalles adicionales para una fila concreta ampliando o colapsando 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 laIgrGrid visualización en modo detalle maestro necesitas 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 = (args: IgrGridMasterDetailContext) => {
    const data = args.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.
      • TAB- 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- moves the focus to the previous row.

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

      • ALT + 🡒 o ALT + 🡓- expande la fila.
      • ALT + 🡐 o ALT + 🡑- contrae la fila.

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