Angular grade mestre-detalhe

    O igxGrid componente suporta a especificação de um modelo de detalhes que exibe detalhes adicionais para uma linha específica, expandindo/recolhendo seu conteúdo. Quando especificado, cada registro atua como um mestre, que, após a expansão, 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 a igxGrid exibição no modo mestre-detalhe, você precisa especificar um modelo dentro da grade, marcado com a igxGridDetail 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 através da expansionStates entrada do igxGrid. Os estados são armazenados em pares de valores-chave [identificador de linha, estado de expansão]. A propriedade obtém/define os estados de expansão atuais e dá suporte à associaçã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 linha para cima, focalizando uma célula da linha anterior.
      • Arrow Down- Navega uma linha para baixo, focalizando uma célula da próxima linha.
      • Tab- Permite que o foco se mova para o próximo elemento focalizável dentro do modelo se houver elementos focalizáveis, caso contrário, move-se 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 linha.
      • Alt + Arrow Left/Down- recolhe a linha.

    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.
    Ao modelar uma grade dentro da exibição de detalhes que tem definições<igx-column>, a grade pai também renderizará essas colunas. Isso pode ser evitado usando autoGenerate=true para a grade aninhada. Caso algum aspecto dessas colunas precise ser modificado, ocolumnInit evento pode ser usado.
    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