Angular Seleção de linha de grade hierárquica

    Com a seleção de linha no Ignite UI for Angular, há uma coluna seletora de linha que precede todas as outras colunas dentro da linha. Quando um usuário clica no seletor de linha, a linha será selecionada ou desmarcada, permitindo que o usuário selecione várias linhas de dados.

    Angular Row Selection Example

    O exemplo abaixo demonstra os três tipos de comportamento de seleção de linha da Grade Hierárquica. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação do botão por meio de uma caixa de mensagem de lanchonete. Use o botão de alternância para ocultar ou mostrar a caixa de seleção do seletor de linha.

    Setup

    Para configurar a seleção de linhasigx-hierarchical-grid, você só precisa definir a propriedade de seleção de linhas. Essa propriedade aceita a enumeração GridSelectionMode. GridSelectionMode expõe os seguintes três modos: nenhum, único e múltiplo. Abaixo, vamos analisar cada um deles com mais detalhes.

    None Selection

    Por padrão, aigx-hierarchical-grid seleção de linha está desativada, caso contrário ([rowSelection]="'nenhum'). Portanto, você não pode selecionar ou desmarcar uma linha por meio da interação com a Hierarchical Grid UI, a única forma de completar essas ações é usando os métodos de API fornecidos.

    Single Selection

    A seleção de uma única linha agora pode ser facilmente configurada, a única coisa que você precisa fazer é definir[rowSelection] = '"single"' a propriedade. Isso te dá a oportunidade de selecionar apenas uma linha dentro de uma grade. Você pode selecionar uma linha clicando em uma célula ou pressionando a tecla espaço ao focar em uma célula da linha, e claro, pode selecionar uma linha clicando no campo seletor de linhas. Quando a linha é selecionada ou desmarcada é emitido um evento de mudança de linhaSeleção.

    <igx-hierarchical-grid [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'single'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

    /* selectionExample.component.ts */

public handleRowSelection(event) {
    if (args.added.lenght && args.added[0] === 3) {
        args.cancel = true;
    }
}

    Multiple Selection

    Para permitir a seleção de múltiplas linhas, bastaigx-hierarchical-grid definir arowSelection propriedade paramultiple. Isso permitirá um campo seletor de linhas em cada linha e no cabeçalho Hierarchical Grid. O seletor de linhas permite que os usuários selecionem múltiplas linhas, com a seleção persistindo durante operações de rolagem, paginação e dados, como ordenação e filtragem. A linha também pode ser selecionada clicando em uma célula ou pressionando a tecla de espaço quando uma célula está focada em foco. Se você selecionou uma linha e clicou em outra enquanto segura a tecla shift, isso selecionará toda a faixa de linhas. Neste modo de seleção, ao clicar em uma única linha, as linhas selecionadas anteriores serão desmarcadas. Se você clicar enquanto segura a tecla ctrl, a linha será alternada e a seleção anterior será preservada.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="true"
        [rowSelection]="'multiple'" (rowSelectionChanging)="handleRowSelection($event)">
</igx-hierarchical-grid>

    <!-- selectionExample.component.ts -->

 public handleRowSelection(event: IRowSelectionEventArgs) {
    // use event.newSelection to retrieve primary key/row data of latest selected row
    this.selectedRowsCount = event.newSelection.length;
    this.selectedRowIndex = event.newSelection[0];
 }

    Notas

    • Para que a seleção adequada de linhas e células seja adequada, enquanto a Grade Hierárquica possui virtualização remota, deve ser fornecida umaprimaryKey ().

    • Quando a Grade Hierárquica tiver virtualização remota, clicar na caixa de seleção do cabeçalho selecionará/desmarcará todos os registros que estão atualmente na grade. Quando novos dados são carregados na Grade Hierárquica sob demanda, as linhas recém-adicionadas não serão selecionadas e isso é uma limitação, portanto, você deve lidar com esse comportamento por conta própria e pode selecionar essas linhas usando os métodos de API fornecidos.

    • A seleção de linha vai acionarrowSelectionChanging o evento. Este evento te dá informações sobre a nova seleção, a seleção antiga, as linhas que foram adicionadas e removidas da seleção antiga. Além disso, o evento pode ser cancelado, então isso permite evitar a seleção.

    • Quando a seleção de linhas está ativada, os seletores de fileiras são exibidos, mas se você não quiser mostrá-los, pode configurar[hideRowSelectors] = true.

    • Ao alternar entre os modos de seleção de linha em tempo de execução, isso limpará o estado de seleção de linha anterior.

    API usage

    Select rows programmatically

    O trecho de código abaixo pode ser usado para selecionar uma ou várias linhas simultaneamente (viaprimaryKey); Além disso, o segundo parâmetro desse método é uma propriedade booleana pela qual você pode escolher se a seleção da linha anterior será eliminada ou não. A seleção anterior é preservada por padrão.

    <!-- selectionExample.component.html -->

<igx-hierarchical-grid ... [primaryKey]="'artist'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.selectRows([1,2,5], false)">Select 1,2 and 5</button> // select rows and preserve previous selection state

    Isso adicionará as linhas que correspondem às entradas de dados com IDs 1, 2 e 5 à seleção da Grade Hierárquica.

    Deselect rows

    Se precisar desmarcar as linhas programaticamente, pode usar odeselectRows(rowIds: []) método.

    <!-- selectionExample.component.html -->

<igx-hierarchical-grid ... [primaryKey]="'ID'">
...
</igx-hierarchical-grid>
...
<button (click)="this.hierarchicalGrid.deselectRows([1,2,5])">Deselect 1,2 and 5</button>

    Row selection event

    Quando há alguma mudança na seleçãorowSelectionChanging de linha, é emitido um evento.rowSelectionChanging expõe os seguintes argumentos:

    • oldSelection- array de dados de linhas que contém o estado anterior da seleção de linha.

    • newSelection- array de dados de linhas que correspondem ao novo estado da seleção da linha.

    • added- array de dados de linhas que são atualmente adicionados à seleção.

    • removed- array de dados de linhas que atualmente são removidos de acordo com o estado de seleção antigo.

    • event- o evento original que desencadeou a mudança na seleção de linha.

    • cancel- permite impedir a mudança de seleção de linha.

    • owner- Se o evento for acionado a partir de uma grade filha, isso lhe dará uma referência ao componente de onde o evento é emitido.

    Evento de seleção de linha em cenários de dados remotos

    Em cenários de dados remotos, quando a grade tem umprimaryKey argumento set,rowSelectionChanging.oldSelection evento não conterá o objeto de dados da linha completa para as linhas que estão atualmente fora da visualização de dados. Nesse caso,rowSelectionChanging.oldSelection objeto conterá apenas uma propriedade, que é oprimaryKey campo. Para o restante das linhas, atualmente na visualização de dados,rowSelectionChanging.oldSelection conterá os dados da linha inteira.

    <!-- selectionExample.component.html -->

<igx-hierarchical-grid (rowSelectionChanging)="handleRowSelectionChange($event)">
...
</igx-hierarchical-grid>

    /* selectionExample.component.ts */

public handleRowSelectionChange(args) {
    args.cancel = true; // this will cancel the row selection
}

    Select all rows

    Outro método útil de API queigx-hierarchical-grid oferece éselectAll(onlyFilteredData). Por padrão, esse método seleciona todas as linhas de dados, mas se for aplicado filtro, ele seleciona apenas as linhas que correspondem aos critérios do filtro. Mas se você chamar o método com parâmetro falso,selectAll(false) sempre selecionará todos os dados na grade, mesmo que seja aplicado filtro.

    Note

    Lembre-se de que issoselectAll() não selecionará as linhas que são deletadas.

    Deselect all rows

    igx-hierarchical-gridfornecedeselectAll(onlyFilteredData) o método, que por padrão desmarca todas as linhas de dados, mas se for aplicado filtragem, desmarca apenas as linhas que correspondem aos critérios do filtro. Mas se você chamar o método com parâmetro falso,deselectAll(false) sempre vai limpar todo o estado de seleção de linha, mesmo que seja aplicado filtro.

    How to get selected rows

    Se você precisar ver quais linhas estão selecionadas no momento, pode pegar os IDs de linha delas com oselectedRows getter.

    
public getSelectedRows() {
    const currentSelection = this.hierarchicalGrid.selectedRows; // return array of row IDs
}

    Além disso, atribuir IDs de linha permiteselectedRows que você mude o estado de seleção da grade.

    // arrays of row IDs
public mySelectedRows = ['Naomi Yepes', 'Ahmad Nazeri'];
public childSelectedRows = ['Initiation', 'Emergency'];

    <igx-hierarchical-grid primaryKey="Artist" rowSelection="multiple" [autoGenerate]="false" [selectedRows]="mySelectedRows" [data]="data">
    <igx-column field="Artist"></igx-column>
    <igx-row-island [key]="'Albums'" rowSelection="multiple">
        <igx-column field="Album"></igx-column>
        <igx-column field="LaunchDate"></igx-column>
    </igx-row-island>
</igx-hierarchical-grid>

    Row selector templates

    Você pode modelar seletores de cabeçalho e linha na Grade Hierárquica e também acessar seus contextos que fornecem funcionalidades úteis para diferentes cenários.

    Por padrão, a Grade Hierárquica gerencia todas as interações de seleção de linhas no contêiner pai do seletor de linhas ou na própria linha, deixando apenas a visualização de estado do template. A substituição da funcionalidade base geralmente deve ser feita usando orowSelectionChanging evento. Caso você implemente um template personalizado com umclick handler que substitua a funcionalidade base, você deve interromper a propagação do evento para preservar o estado correto da linha.

    Modelo de linha

    Para criar um modelo seletor de linhas personalizado, dentro de,igx-hierarchical-grid declare uma<ng-template> diretiva withigxRowSelector. A partir do template, você pode acessar a variável de contexto implicitamente fornecida, com propriedades que fornecem informações sobre o estado da linha.

    Aselected propriedade mostra se a linha atual está selecionada ou não, enquanto aindex propriedade pode ser usada para acessar o índice de linhas.

    <ng-template igxRowSelector let-rowContext>
    {{ rowContext.index }}
    <igx-checkbox
        [checked]="rowContext.selected"
        [readonly]="true"
    ></igx-checkbox>
</ng-template>

    ArowID propriedade pode ser usada para obter uma referência de umaigx-hierarchical-grid linha. Isso é útil quando você implementa umclick handler no elemento seletor de linhas.

    <ng-template igxRowSelector let-rowContext>
    <igx-checkbox (click)="onSelectorClick($event, rowContext.key)"></igx-checkbox>
</ng-template>

    No exemplo acima, estamos usando umigx-checkbox e nós ligamosrowContext.selected à suachecked propriedade. Veja isso em ação em nossaRow Numbering Demo.

    Note

    OsrowContext.select() métodos erowContext.deselect() são expostos no contexto modelo de umigx-hierarchical-grid. Eles facilitam alternar a linha atual, especialmente em uma grade filha, quando você implementa um handler de cliques que sobrescreve a funcionalidade base.

    Header template

    Para criar um modelo personalizado de seletor de cabeçalhos, dentro da Grade Hierárquica, declare uma<ng-template> diretiva withigxHeadSelector. A partir do template, você pode acessar a variável de contexto implicitamente fornecida, com propriedades que fornecem informações sobre o estado do cabeçalho.

    AselectedCount propriedade mostra quantas linhas estão selecionadas no momento, enquantototalCount mostra quantas linhas há na Grade Hierárquica no total.

    <ng-template igxHeadSelector let-headContext>
    {{ headContext.selectedCount }} / {{ headContext.totalCount  }}
</ng-template>

    AsselectedCount propriedades etotalCount podem ser usadas para determinar se o seletor de cabeça deve ser verificado ou indeterminado (parcialmente selecionado).

    <igx-hierarchical-grid [data]="hGridData" primaryKey="ProductID">
    <ng-template igxHeadSelector let-headContext>
        <igx-checkbox
            [checked]="headContext.selectedCount > 0 && headContext.selectedCount === headContext.totalCount"
            [indeterminate]="headContext.selectedCount > 0 && headContext.selectedCount !== headContext.totalCount">
        </igx-checkbox>
    </ng-template>

    <igx-row-island [key]="'ProductInfo'">
        <ng-template igxHeadSelector let-childHeadContext>
            <!-- header template goes here -->
        </ng-template>
        <ng-template igxRowSelector let-childRowContext>
            <!-- row template goes here -->
        </ng-template>
    </igx-row-island>
</igx-hierarchical-grid>

    Cada nível hierárquico em umigx-hierarchical-grid pode ter sua própria linha e plantel de cabeçalho.

    Note

    OsheadContext.selectAll() métodos eheadContext.deselectAll() são expostos no contexto modelo de umigx-hierarchical-grid. Eles facilitam alternar todas as linhas, especialmente em uma grade filha, quando você implementa um handler de cliques que sobrepõe a funcionalidade base.

    Row Numbering Demo

    Esta demonstração mostra o uso de seletores personalizados de cabeçalho e linha. Este último é usadorowContext.index para exibir números de linha e umigx-checkbox bound torowContext.selected.

    Conditional Selection Demo

    Esta demonstração impede que algumas linhas sejam selecionadas usando orowSelectionChanging evento e um modelo personalizado com a caixa de seleção desativada para linhas não selecionáveis.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.