Angular Cuadrícula maestro-detalle

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

    Angular Grid Master-Detail Example

    Configuración

    Para configurar laigxGrid visualización en modo detalle maestro necesitas especificar una plantilla dentro de la cuadrícula, marcada con laigxGridDetail directiva:

     <igx-grid ... >
         <ng-template igxGridDetail let-dataItem>
              <!-- Custom detail template content here -->
        </ng-template>
    </igx-grid>

    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:

        <igx-grid ... >
         <ng-template igxGridDetail let-dataItem>
            <div *ngIf="dataItem.Category">
                <header>{{dataItem.Category.CategoryName}}</header>
                <span>{{dataItem.Category.Description}}</span>
            </div>
        </ng-template>
    </igx-grid>

    API

    Los estados de expansión pueden controlarse mediante laexpansionStates entrada de laigxGrid. Los estados se almacenan en pares clave-valor [identificador de fila, estado de expansión]. La propiedad obtiene/establece los estados actuales de expansión y soporta vinculación bidireccional:

      <igx-grid [(expansionStates)]='expansionState' >
    ...
  </igx-grid>

    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:

      • Arrow Up- Navega una fila hacia arriba, enfocando una celda de la fila anterior.
      • Arrow Down- navega una fila hacia abajo, enfocando una celda de la siguiente fila.
      • Tab- Permite que el enfoque se mueva al siguiente elemento enfocable dentro de la plantilla si hay elementos enfocables, de lo contrario pasa 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 + Arrow Right/ Down- Expande la fila.
      • Alt + Arrow Left/Down- Colapsa 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