Visão geral da seleção Blazor Grid

    Com o recurso Ignite UI for Blazor Select no Blazor Grid, você pode interagir e manipular dados facilmente usando interações simples do mouse. Há três modos de seleção disponíveis:

    • Seleção de linha
    • Seleção de células
    • Column selection

    Com a propriedade RowSelection, você pode especificar:

    • Nenhum
    • Solteiro
    • Seleção múltipla

    Blazor Grid Selection Example

    O exemplo abaixo demonstra três tipos de comportamentos de seleção de células no IgbGrid. Use os botões abaixo para habilitar cada um dos modos de seleção disponíveis.

    Blazor Grid Selection Options

    O componente Ignite UI for Blazor IgbGrid fornece três modos de seleção diferentes -Seleção de linha, Seleção de célula e Seleção de coluna. Por padrão, apenas o modo de seleção Multi-célula é habilitado no IgbGrid. Para alterar/habilitar o modo de seleção, você pode usar as propriedades RowSelection, CellSelection ou Selectable.

    Blazor Grid Row Selection

    A propriedade RowSelection permite que você especifique as seguintes opções:

    • None- A seleção de linha seria desabilitada para o IgbGrid.
    • Single- A seleção de apenas uma linha dentro do IgbGrid estaria disponível.
    • Multiple- A seleção de várias linhas estaria disponível usando os seletores de linha, com uma combinação de teclas como ctrl + clique, ou pressionando a tecla de espaço quando uma célula estiver em foco.

    Vá para o tópico Seleção de linha para obter mais informações.

    Blazor Grid Cell Selection

    A propriedade CellSelection permite que você especifique as seguintes opções:

    • None- A seleção de células seria desabilitada para o IgbGrid.
    • Single- A seleção de apenas uma célula dentro do IgbGrid estaria disponível.
    • Multiple- Atualmente, este é o estado padrão da seleção no IgbGrid. A seleção multi-célula está disponível arrastando o mouse sobre as células, após um clique do botão esquerdo do mouse continuamente.

    Vá para o tópico Seleção de célula para obter mais informações.

    Blazor Grid Column Selection

    A propriedade Selectable permite que você especifique as seguintes opções para cada IgbColumn. A seleção de coluna correspondente será habilitada ou desabilitada se essa propriedade for definida como true ou false, respectivamente.

    Isso leva às três variações seguintes:

    • Seleção única -mouse click sobre a célula da coluna.
    • Seleção de várias colunas - segurando ctrl + mouse click sobre as células da coluna.
    • Seleção de coluna de intervalo - segurando shift + mouse click seleciona tudo no meio.

    Acesse o tópico Seleção de coluna para obter mais informações.

    Blazor Grid Context Menu

    Usando o evento ContextMenu você pode adicionar um menu de contexto personalizado para facilitar seu trabalho com IgbGrid. Com um clique direito no corpo da grade, o evento emite a célula na qual ele é disparado. O menu de contexto operará com a célula emitida.

    Se houver uma seleção de várias células, colocaremos lógica, que verificará se a célula selecionada está na área da seleção de várias células. Se for, também emitiremos os valores das células selecionadas.

    Basicamente, a função principal ficará assim:

        public void RightClick(MouseEventArgs e)
    {
        this.MenuX = e.ClientX + "px";
        this.MenuY = e.ClientY + "px";
    }


    public void onMenuShow(IgbGridCellEventArgs e)
    {
        IgbGridCellEventArgsDetail detail = e.Detail;
        this.ShowMenu = true;
        this.ClickedCell = detail.Cell;
    }

    O menu de contexto terá as seguintes funções:

    • Copie o valor da célula selecionada.
    • Copie o dataRow da célula selecionada.
    • Se a célula selecionada estiver dentro de um intervalo de seleção de várias células, copie todos os dados selecionados.
        public void CopyCellData()
    {
        this.ShowMenu = false;
        this.SelectedData = this.ClickedCell.Value.ToString();
        StateHasChanged();
    }


    public async void CopyRowData()
    {
        this.ShowMenu = false;
        NwindDataItem rowData = this.NwindData.ElementAt(this.ClickedCell.Id.RowIndex);
        this.SelectedData = JsonConvert.SerializeObject(rowData);
        StateHasChanged();
}

    public async void CopyCellsData()
    {
        this.ShowMenu = false;
        var selectedData = await this.grid.GetSelectedDataAsync(true, false);
        this.SelectedData = JsonConvert.SerializeObject(selectedData);
        StateHasChanged();
    }

    O IgbGrid buscará os dados copiados e os colará em um elemento contêiner.

    O modelo que vamos usar para combinar a grade com o menu de contexto:

    <div class="container vertical">
    <div class="wrapper" oncontextmenu="event.preventDefault()">
        <IgbGrid AutoGenerate="false"
                 CellSelection="GridSelectionMode.Multiple"
                 ContextMenu="onMenuShow"
                 @oncontextmenu="RightClick"
                 Name="grid"
                 @ref="grid"
                 Data="NwindData">
            <IgbColumn Field="ProductID"
                       Header="Product ID">
            </IgbColumn>

            <IgbColumn Field="ProductName"
                       Header="Product Name">
            </IgbColumn>

            <IgbColumn Field="UnitsInStock"
                       Header="Units In Stock"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="UnitPrice"
                       Header="Units Price"
                       DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn Field="Discontinued"
                       DataType="GridColumnDataType.Boolean">
            </IgbColumn>

            <IgbColumn Field="OrderDate"
                       Header="Order Date"
                       DataType="GridColumnDataType.Date">
            </IgbColumn>

        </IgbGrid>
        <div class="selected-data-area">
            @SelectedData
        </div>
        </div>
        @if (ShowMenu)
        {
            <div id="menu" class="contextmenu" style="left: @MenuX; top: @MenuY">
                <span id="copySingleCell" class="item" @onclick="CopyCellData">
                    <IgbIcon @ref=icon IconName="content_copy" Collection="material"></IgbIcon>Copy Cell Data
                </span>
            <span id="copyRow" class="item" @onclick="CopyRowData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Row Data
                </span>
            <span id="copyMultiCells" class="item" @onclick="CopyCellsData">
                    <IgbIcon IconName="content_copy" Collection="material"></IgbIcon>Copy Cells Data
                </span>
            </div>
        }
</div>

    Selecione várias células e pressione o botão direito do mouse. O menu de contexto aparecerá e após selecionar Copy cells data os dados selecionados aparecerão na caixa vazia à direita.

    O resultado é:

    Known Issues and Limitations

    Quando a grade não tem PrimaryKey definido e cenários de dados remotos estão habilitados (quando paginação, classificação, filtragem e rolagem acionam solicitações para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:

    • Seleção de linha
    • Expandir/recolher linha
    • Edição de linha
    • Fixação de linha

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.