Web Components grade mestre-detalhe

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

    Web Components Grid Master-Detail Example

    Configuração

    Para configurar a IgcGridComponent exibição no modo mestre-detalhe, você precisa especificar um modelo para a grade:

    constructor() {
  var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
  this._bind = () => {
    grid.data = this.customersData;
    grid.detailTemplate = this.masterDetailTemplate;
  }
  this._bind();
}

    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:

        public masterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
        var data = ctx.implicit;
        return html` <div class="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

    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:

      • 🡑- navega uma linha para cima, focalizando uma célula da linha anterior.
      • 🡓- 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- moves the focus to the previous row.

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

      • Alt + 🡒 or Alt + 🡓 - expands the row.
      • Alt + 🡐 or Alt + 🡑 - collapses the row.

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