Angular grade mestre-detalhe

    OigxGrid componente suporta a especificação de um modelo de detalhes que exibe detalhes adicionais para uma linha específica, expandindo/colapsando seu conteúdo. Quando especificado, cada registro atua como um mestre, que ao expandir mostra um modelo de detalhes personalizável com dados contextuais para o registro atual.

    Esse modo é útil quando você precisa exibir dados de estilo mestre-detalhe em uma estrutura hierárquica.

    Angular Grid Master-Detail Example

    Configuração

    Para configurar oigxGrid exibição no modo mestre-detalhe, você precisa especificar um modelo dentro da grade, marcado com aigxGridDetail diretiva:

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

    O contexto do modelo são os dados do registro mestre, de modo que os valores do registro mestre possam ser exibidos no modelo detalhado. Por exemplo:

        <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

    Os estados de expansão podem ser controlados via entradaexpansionStates daigxGrid. Estados são armazenados em pares-chave-valor [identificador de linha, estado de expansão]. A propriedade recebe/define os estados atuais de expansão e suporta vinculação bidirecional:

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

    Métodos de API adicionais para controlar os estados de expansão também são expostos:

    Navegação pelo teclado

    • Quando o foco está em uma linha de detalhes:

      • Arrow Up- navega uma fileira acima, focando uma célula da linha anterior.
      • Arrow Down- navega uma fileira para baixo, focando uma célula da próxima linha.
      • Tab- Permite que o foco avance para o próximo elemento focalizável dentro do template se houver elementos focáveis, caso contrário avança para a próxima linha da grade.
      • Shift + Tab- move o foco para a linha anterior.

    • Quando o foco está em uma linha de dados com expansor:

      • Alt + Arrow Right/ Down- expande a fileira.
      • Alt + Arrow Left/Down- Colapsa a fileira.

    Known Issues and Limitations

    Limitações conhecidas Descrição
    A navegação por guia dentro do modelo de detalhes personalizado pode não atualizar a posição de rolagem da grade mestra caso o próximo elemento focado esteja fora da porta de exibição visível. A navegação por guias dentro do modelo de detalhes personalizado é deixada para o navegador.
    O modelo de detalhes não será exportado para o Excel. Como o modelo de detalhes pode conter qualquer tipo de conteúdo, não podemos exportá-lo para o Excel pronto para uso.
    O recurso de pesquisa não destacará elementos do modelo de detalhes.

    API References