Seleção de linha de grade Blazor

The Ignite UI for Blazor Row Selection feature in Blazor Grid allows users to interactively select, highlight, or deselect a single or multiple rows of data. There are several selection modes available in the IgbGrid:

• Nenhuma seleção
• Seleção múltipla
• Seleção única

Blazor Row Selection Example

O exemplo abaixo demonstra os três tipos deIgbGrid 's Seleção de linhas comportamento. Use o menu suspenso abaixo para ativar cada um dos modos de seleção disponíveis. Use a caixa de seleção para esconder ou programa as caixas de seleção de linhas.

Setup

Para configurar a seleção deIgbGrid linhas, basta definir a propriedadeRowSelection. Essa propriedade aceitaGridSelectionMode enumeração.

GridSelectionModeexpõe os seguintes modos:

• Nenhum
• Solteiro
• Múltiplo

Abaixo, veremos cada um deles com mais detalhes.

Nenhuma seleção

PorIgbGrid padrão, a seleção de linha está desativada (RowSelectioné nenhuma). Portanto, você não pode selecionar ou desmarcar uma linha por interação com aIgbGrid interface, a única forma de completar essas ações é usando os métodos fornecidos pela API.

Seleção única

A seleção de uma única linha agora pode ser facilmente configurada, a única coisa que você precisa fazer é definirRowSelection comoSingle 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 SPACE tecla 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 desselecionadaRowSelectionChanging, um evento é emitido.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Single
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler for selection change
    }
}

Seleção múltipla

Para permitir a seleção de múltiplas linhas, bastaIgbGrid definir aRowSelection propriedade paraMultiple. Isso permitirá um campo seletor de linha em cada linha e noIgbGrid cabeçalho. 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 SPACE tecla quando uma célula está focada. Se você selecionou uma linha e clicou em outra enquanto segura a SHIFT tecla, 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 CTRL tecla, a fileira será alternada e a seleção anterior será preservada.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbGrid>

Notas

• 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 linhas são exibidos, mas se você não quiser mostrá-los, pode definirHideRowSelectors como 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.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbGrid>
    <IgbButton @onclick=Select>Select</IgbButton>
    @code {
        public IgbGrid grid;
        private async void Select()
        {
            object[] array = new object[] { 1,2, 5 };
            await this.grid.SelectRowsAsync(array, true);
        }
    }

Isso adicionará as linhas que correspondem aos dados com IDs 1, 2 e 5 àIgbGrid seleção.

Deselect Rows

Se precisar desmarcar as linhas programaticamente, pode usar oDeselectRows método.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbGrid>
    <IgbButton @onclick=Deselect>Deselect</IgbButton>
    @code {
        public IgbGrid grid;
        private async void Deselect()
        {
            object[] array = new object[] { 1, 2, 5 };
            await this.grid.DeselectRowsAsync(array);
        }
    }

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 IDs de linha que contém o estado anterior da seleção de linha.
• NewSelection- array de IDs de linha que correspondem ao novo estado da seleção de linha.
• Added- array de IDs de linha que estão atualmente adicionados à seleção.
• Removed- array de IDs de linha que são atualmente removidos de acordo com o estado antigo de seleção.
• 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.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=Grid
             AutoGenerate=true
             RowSelectionChanging='RowSelectionChanging'
             Data=northwindEmployees>
    </IgbGrid>
@code {
    private void RowSelectionChanging(IgbRowSelectionEventArgs args)
    {
        // handler
    }
}

Select All Rows

Outro método útil de API queIgbGrid oferece éSelectAllRows. 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. Se você chamar o método com parâmetro falso,SelectAllRows(false) sempre selecionará todos os dados na grade, mesmo que seja aplicado filtragem.

Nota Lembre-se de que issoSelectAllRows não selecionará as linhas que são deletadas.

Deselect All Rows

IgbGridfornece umDeselectAllRows método que, por padrão, desmarca todas as linhas de dados, mas se for aplicado filtro, desmarca apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com parâmetro falso,DeselectAllRows(false) sempre vai limpar todo o estado de seleção de linhas, 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.

    <IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             @ref=grid
             AutoGenerate=true
             Data=northwindEmployees>
    </IgbGrid>
    <IgbButton @onclick=GetSelected>Get selected</IgbButton>
    @code {
        public IgbGrid grid;
        private async void GetSelected()
        {
            var selected = this.grid.SelectedRows;
        }
    }

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

<IgbGrid Width="100%"
             Id="grid"
             Height="100%"
             RowSelection=GridSelectionMode.Multiple
             PrimaryKey="Key"
             SelectedRows=selectedRows
             @ref=Grid
             AutoGenerate=true
             Data=northwindEmployees>
</IgbGrid>

@code {
    public object[] selectedRows = new object[] { 1, 2, 5 };
}

Row Selector Templates

Você pode criar templates de cabeçalhos e seletoresIgbGrid de linhas e também acessar seus contextos, que oferecem funcionalidades úteis para diferentes cenários.

Por padrão, eleIgbGrid gerencia todas as interações de seleção de linhas no contêiner pai do seletor de linhas ou na própria linha, restando apenas a visualização de estado do template. A substituição da funcionalidade base geralmente deve ser feita usando o evento RowSelectionChangeing. 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 personalizado de seletor de linhas, dentro doIgbGrid pode usar aRowSelectorTemplate propriedade. 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.

igRegisterScript("WebGridRowSelectorTemplate", (ctx) => {
    var html = window.igTemplating.html;
    if (ctx.implicit.selected) {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox checked></igc-checkbox>
</div>`;
    } else {
        return html`<div style="justify-content: space-evenly;display: flex;width: 70px;">
    <span> ${ctx.implicit.index}</span>
<igc-checkbox></igc-checkbox>
</div>`;
    }
}, false);

ARowID propriedade pode ser usada para obter uma referência de umaIgbGrid linha. Isso é útil quando você implementa umclick handler no elemento seletor de linhas.

No exemplo acima, estamos usando umIgbCheckbox e nós ligamosrowContext.selected à suaChecked propriedade. Veja isso em ação em nossa Demonstração de Numeração de Fileiras.

Header Template

Para criar um template personalizado de seletor de cabeçalho, dentro de,IgbGrid você pode usar aHeadSelectorTemplate propriedade. 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 existem noIgbGrid total.

public RenderFragment<IgbHeadSelectorTemplateContext> Template = (context) =>
{
    return @<div> <img style="min-width:80px;" src="https://pt-br.infragistics.com/angular-demos-lob/assets/images/card/avatars/igLogo.png"/></div>;
};

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

Row Numbering Demo

Esta demonstração mostra o uso de seletores personalizados de cabeçalho e linha. Este último é usadoIndex para exibir números de linha e umIgbCheckbox bound toSelected.

Excel Style Row Selectors Demo

Esta demonstração usa modelos personalizados para se assemelhar aos seletores de cabeçalho e linha do Excel.

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

• IgbGrid
• IgbGridRow

Additional Resources

• Escolha
• Seleção de células
• Paginação
• Filtragem
• Classificação
• Resumos
• Movimentação de Colunas
• Fixação de coluna
• Redimensionamento de colunas
• Virtualização e desempenho

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

• Ignite UI for Blazor Fóruns
• Ignite UI for Blazor GitHub