Visão geral da seleção de grade do React

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

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

Com a rowSelection propriedade, você pode especificar:

Nenhum
Solteiro
Seleção múltipla

React Grid Selection Example

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

React Grid Selection Options

O componente Ignite UI for React IgrGrid 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 de várias células está habilitado no IgrGrid. Para alterar/ativar o modo de seleção, cellSelection você pode usar rowSelection ou selectable propriedades.

React Grid Row Selection

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

None- A seleção de linha seria desativada para o IgrGrid.
Single- A seleção de apenas uma linha dentro do IgrGrid 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.

React Grid Cell Selection

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

None- A seleção de células seria desativada para o IgrGrid.
Single- A seleção de apenas uma célula dentro do IgrGrid estaria disponível.
Multiple- Atualmente, este é o estado padrão da seleção no IgrGrid. A seleção de várias células 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.

React Grid Column Selection

A selectable propriedade permite que você especifique as opções a seguir para cada um IgrColumn. 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.

Usando o evento, ContextMenu você pode adicionar um menu de contexto personalizado para facilitar seu trabalho IgrGrid. Com um clique com o botão direito do mouse no corpo da grade, o evento emite a célula na qual é 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:

function rightClick(grid: IgrGridBaseDirective, event: IgrGridCellEventArgs) {
    const eventArgs = event.detail;
    eventArgs.event.preventDefault();
    const node = eventArgs.cell.id;
    const isCellWithinRange = grid.getSelectedRanges().some((range: any) => {
        if (node.columnID >= range.columnStart &&
            node.columnID <= range.columnEnd &&
            node.rowIndex >= range.rowStart &&
            node.rowIndex <= range.rowEnd
            ) {
                return true;
            }
        return false;
    });
    setIsCellWithinRange(isCellWithinRange);
    setClickedCell(eventArgs.cell);
    openContextMenu(eventArgs.event.clientX, eventArgs.event.clientY)
}

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.

function copySelectedRowData() {
    const selectedData = gridRef.current.getRowData(clickedCell.id.rowID);
    copyData(selectedData);
    closeContextMenu();
}

function copySelectedCellData() {
    const selectedData = clickedCell.value;
    copyData(selectedData);
    closeContextMenu();
}

function copySelectedData() {
    const selectedData = gridRef.current.getSelectedData(null,null);
    copyData(selectedData);
    closeContextMenu();
}

function copyData(data: any[]) {
    const tempElement = document.createElement('input');
    document.body.appendChild(tempElement);
    tempElement.setAttribute('id', 'temp_id');
    (document.getElementById('temp_id') as HTMLInputElement).value = JSON.stringify(data);
    tempElement.select();
    document.execCommand('copy');
    document.body.removeChild(tempElement);
    setSelectedData(JSON.stringify(data));
}

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

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

 <>
    <div className="container sample">
        <div className="wrapper" onClick={closeContextMenu}>
            <IgrGrid
                autoGenerate="false"
                data={northWindData}
                primaryKey="ProductID"
                ref={gridRef}
                contextMenu={rightClick}>
            <IgrColumn field="ProductID" header="Product ID">
            </IgrColumn>
            <IgrColumn field="ProductName" header="Product Name">
            </IgrColumn>
            <IgrColumn field="UnitsInStock" header="Units In Stock" dataType="number">
            </IgrColumn>
            <IgrColumn field="UnitPrice" header="Units Price" dataType="number">
            </IgrColumn>
            <IgrColumn field="Discontinued" dataType="boolean">
            </IgrColumn>
            <IgrColumn field="OrderDate" header="Order Date" dataType="date">
            </IgrColumn>
            </IgrGrid>
            <div className="selected-data-area">
                {selectedData}
            </div>
        </div>
    </div>
    <div style={{display: "none"}} className="contextmenu" ref={contextMenuRef}>
        <span className="item" onClick={copySelectedCellData}>
            <IgrIcon ref={iconRef} collection='material' name="content_copy"></IgrIcon>Copy Cell Data
        </span>
        <span className="item" onClick={copySelectedRowData}>
            <IgrIcon collection='material' name="content_copy"></IgrIcon>Copy Row Data
        </span>
        {isCellWithinRange && (
        <span className="item" onClick={copySelectedData}>
            <IgrIcon collection='material' name="content_copy"></IgrIcon>Copy Cells Data
        </span>)}
    </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 tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitaçõ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

IgrGrid

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.