Cuadrícula maestra-detalle Angular

    El componente igxGrid 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.

    Angular Grid Master-Detail Example

    Configuración

    Para configurar igxGrid para que se muestre en modo maestro-detalle, debe especificar una plantilla dentro de la cuadrícula, marcada con la directiva igxGridDetail:

     <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 se pueden controlar a través de la entrada expansionStates de igxGrid. Los estados se almacenan en pares clave-valor [identificador de fila, estado de expansión]. La propiedad obtiene/establece los estados de expansión actuales y admite el enlace 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 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 + Arrow Right/ Down: expande la fila.
      • Alt + Arrow Left/Down: 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.
    Al crear una plantilla de cuadrícula dentro de la vista de detalles que tiene una<igx-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