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

    O componente Ignite UI for BlazorIgbGrid oferece três modos diferentes de seleção -seleção de linha, seleção de células e seleção de colunas. Por padrão, apenas o modo de seleção Multi-célula está ativado no.IgbGrid Para alterar/ativar o modo de seleção você pode usarRowSelection propriedadesCellSelection ouSelectable propriedades.

    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

    Usando oContextMenu evento, você pode adicionar um menu de contexto personalizado para facilitar seu trabalhoIgbGrid. Com um clique direito no corpo da grade, o evento emite a célula em que é acionado. O menu de contexto funcionará 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();
    }

    ElesIgbGrid vão buscar os dados copiados e colá-los em um elemento container.

    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.