Seleção de linha de grade Blazor

    O recurso Ignite UI for Blazor Row Selection no Blazor Grid permite que os usuários selecionem, destaquem ou desmarquem interativamente uma ou várias linhas de dados. Há vários modos de seleção disponíveis no IgbGrid:

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

    Blazor Row Selection Example

    O exemplo abaixo demonstra os três tipos de IgbGrid 's seleção de linha comportamento. Use o menu suspenso abaixo para habilitar cada um dos modos de seleção disponíveis. Use a caixa de seleção para esconder ou mostrar as caixas de seleção do seletor de linhas.

    Setup

    Para configurar a seleção de linha no IgbGrid, você só precisa definir a propriedade RowSelection. Esta propriedade aceita a enumeração GridSelectionMode.

    GridSelectionMode expõe os seguintes modos:

    • Nenhum
    • Solteiro
    • Múltiplo

    Abaixo, veremos cada um deles com mais detalhes.

    Nenhuma seleção

    No IgbGrid, por padrão, a seleção de linha é desabilitada (RowSelection é None). Portanto, você não pode selecionar ou desmarcar uma linha por meio da interação com a IU IgbGrid. A única maneira de concluir essas ações é usar os métodos de API fornecidos.

    Seleção única

    A seleção de linha única agora pode ser facilmente configurada, a única coisa que você precisa fazer é definir RowSelection para a propriedade Single. Isso lhe 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 de espaço quando você foca em uma célula da linha, e é claro que você pode selecionar uma linha clicando no campo seletor de linha. Quando a linha é selecionada ou desmarcada, o evento RowSelectionChanging é 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 habilitar a seleção de várias linhas no IgbGrid, basta definir a propriedade RowSelection como Multiple. Isso habilitará um campo seletor de linha em cada linha e no cabeçalho IgbGrid. O seletor de linha permite que os usuários selecionem várias linhas, com a seleção persistindo por meio de rolagem, paginação e operações de dados, como classificaçã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 estiver em foco. Se você selecionou uma linha e clicou em outra enquanto segura a tecla Shift, isso selecionará todo o intervalo de linhas. Neste modo de seleção, quando você clica em uma única linha, as linhas selecionadas anteriormente serão desmarcadas. Se você clicar enquanto segura a tecla Ctrl, a linha 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 acionará o evento RowSelectionChanging. Este evento fornece 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 é cancelável, o que permite que você impeça a seleção.
    • Quando a seleção de linha está habilitada, os seletores de linha são exibidos, mas se você não quiser mostrá-los, você pode definir HideRowSelectors 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 (via PrimaryKey). Além disso, o segundo parâmetro desse método é uma propriedade booleana por meio da qual você pode escolher se a seleção de linha anterior será apagada 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 às entradas de dados com IDs 1, 2 e 5 à seleção IgbGrid.

    Deselect Rows

    Se você precisar desmarcar linhas programaticamente, poderá usar o método DeselectRows.

        <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 alteração na seleção de linha, o evento RowSelectionChanging é emitido. RowSelectionChanging expõe os seguintes argumentos:

    • OldSelection- matriz de IDs de linha que contém o estado anterior da seleção de linha.
    • NewSelection- matriz de IDs de linha que correspondem ao novo estado da seleção de linha.
    • Added- matriz de IDs de linhas que estão atualmente adicionadas à seleção.
    • Removed- matriz de IDs de linhas que atualmente são removidas de acordo com o antigo estado de seleção.
    • Event- o evento original que acionou a alteração na seleção de linha.
    • Cancel- permite impedir a alteração da 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 de API útil que IgbGrid fornece é SelectAllRows. Por padrão, esse método selecionará todas as linhas de dados, mas se a filtragem for aplicada, ele selecionará apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com o parâmetro false, SelectAllRows(false) sempre selecionará todos os dados na grade, mesmo se a filtragem for aplicada.

    Observação: lembre-se de que SelectAllRows não selecionará as linhas que forem excluídas.

    Deselect All Rows

    IgbGrid fornece um método DeselectAllRows, que por padrão desmarcará todas as linhas de dados, mas se a filtragem for aplicada, desmarcará apenas as linhas que correspondem aos critérios do filtro. Se você chamar o método com o parâmetro false, DeselectAllRows(false) sempre limpará todo o estado de seleção de linha, mesmo se a filtragem for aplicada.

    How to get Selected Rows

    Se precisar ver quais linhas estão selecionadas no momento, você pode obter seus IDs de linha com o getter SelectedRows.

        <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 a SelectedRows permitirá que você altere 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 modelos de seletores de cabeçalho e linha no IgbGrid e também acessar seus contextos, que fornecem funcionalidades úteis para diferentes cenários.

    Por padrão, o IgbGrid manipula todas as interações de seleção de linha no contêiner pai do seletor de linha ou na própria linha, deixando apenas a visualização de estado para o modelo. A substituição da funcionalidade base deve geralmente ser feita usando o evento RowSelectionChanging. Caso você implemente um modelo personalizado com um manipulador Click que substitui a funcionalidade base, você deve parar a propagação do evento para preservar o estado correto da linha.

    Modelo de linha

    Para criar um modelo de seletor de linha personalizado, dentro do IgbGrid você pode usar a propriedade RowSelectorTemplate. Do modelo você pode acessar a variável de contexto fornecida implicitamente, com propriedades que dão a você informações sobre o estado da linha.

    A propriedade selected mostra se a linha atual está selecionada ou não, enquanto a propriedade index pode ser usada para acessar o índice da linha.

    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);

    A propriedade rowID pode ser usada para obter uma referência de uma linha IgbGrid. Isso é útil quando você implementa um manipulador click no elemento seletor de linha.

    No exemplo acima, estamos usando um IgbCheckbox e vinculamos rowContext.selected à sua propriedade checked. Veja isso em ação em nossa Demonstração de Numeração de Linhas.

    Header Template

    Para criar um modelo de seletor de cabeçalho personalizado, dentro do IgbGrid, você pode usar a propriedade HeadSelectorTemplate. A partir do modelo, você pode acessar a variável de contexto fornecida implicitamente, com propriedades que fornecem informações sobre o estado do cabeçalho.

    A propriedade SelectedCount mostra quantas linhas estão selecionadas no momento, enquanto totalCount mostra quantas linhas há no IgbGrid no 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>;
};

    As propriedades SelectedCount e TotalCount podem ser usadas para determinar se o seletor principal deve ser verificado ou indeterminado (parcialmente selecionado).

    Row Numbering Demo

    Esta demonstração mostra o uso de seletores de cabeçalho e linha personalizados. O último usa Index para exibir números de linha e um IgbCheckbox vinculado a Selected.

    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 o evento RowSelectionChanging e um modelo personalizado com caixa de seleção desabilitada para linhas não selecionáveis.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.