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 aRowSelection propriedade, você pode especificar:

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

    Blazor Grid Selection Example

    A amostra abaixo demonstra três tipos de comportamentos de seleção celular no.IgbGrid Use os botões abaixo para ativar cada um dos modos de seleção disponíveis.

    Blazor Grid Selection Options

    The Ignite UI for Blazor IgbGrid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgbGrid. In order to change/enable selection mode you can use RowSelection, CellSelection or Selectable properties.

    Blazor Grid Row Selection

    PropriedadeRowSelection permite que você especifique as seguintes opções:

    • None- A seleção de linhas seria desativada para oIgbGrid.
    • Single- A seleção de apenas uma linha dentro doIgbGrid seria disponível.
    • Multiple- A seleção multi-linha seria possível usando os seletores de linha, com uma combinação de teclas como CTRL + click, ou pressionando o space key botão quando uma célula é focada.

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

    Blazor Grid Cell Selection

    PropriedadeCellSelection permite que você especifique as seguintes opções:

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

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

    Blazor Grid Column Selection

    ASelectable propriedade permite que você especifique as seguintes opções para cadaIgbColumn um. A seleção correspondente de colunas será ativada ou desativada se essa propriedade for definida como verdadeiro ou falso, 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

    Using the ContextMenu event you can add a custom context menu to facilitate your work with IgbGrid. With a right click on the grid's body, the event emits the cell on which it is triggered. The context menu will operate with the emitted cell.

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

    The IgbGrid will fetch the copied data and will paste it in a container element.

    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ãoPrimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisições de gatilho 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.