React Master-Detail Grid

    The IgrGrid component supports specifying a detail template that displays additional details for a particular row by expanding/collapsing its content. When specified each record acts as a master, which upon expansion shows a customizable details template with contextual data for the current record.

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

    React Grid Master-Detail Example

    Configuration

    To configure the IgrGrid to display in master-detail mode you need to specify a template for the grid:

    <IgrGrid detailTemplate={masterDetailTemplate} autoGenerate="false" data={nwindData}>

    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:

    const masterDetailTemplate = ({dataContext}:{dataContext: IgrGridMasterDetailContext}) => {
    const data = dataContext.implicit;
    return (
        <div className="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:

      • 🡑 - navigates one row up, focusing a cell from the previous row.
      • 🡓 - navigates one row down, focusing a cell from the next row.
      • Tab - Allows focus to move to the next focusable element inside the template if there are focusable elements, otherwise moves to the next grid row.
      • 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. This can be avoided using autoGenerate=true for the nested grid. In case some aspect of those columns need to be modified the ColumnInit event can be used.
    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.
    The search feature will not highlight elements from the details template.

    API References