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

Nenhum
Solteiro
Seleção múltipla

React Grid Selection Example

A amostra abaixo demonstra três tipos de comportamentos de seleção celular 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 ReactIgrGrid 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.IgrGrid Para alterar/ativar o modo de seleção você pode usarrowSelection propriedadescellSelection ouselectable propriedades.

React Grid Row Selection

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

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

React Grid Cell Selection

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

None- A seleção de células seria desativada para oIgrGrid.
Single- A seleção de apenas uma célula dentro doIgrGrid seria disponível.
Multiple- Atualmente, este é o estado padrão da seleção noIgrGrid. 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.

React Grid Column Selection

Aselectable propriedade permite que você especifique as seguintes opções para cadaIgrColumn 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.

Using the ContextMenu event you can add a custom context menu to facilitate your work with IgrGrid. 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:

const rightClick = (event: IgrGridContextMenuEventArgs) => {
  const eventArgs = event.detail;
  eventArgs.event.preventDefault();
  const node = eventArgs.cell.cellID;
  const isCellWithinRange = gridRef.current
    .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.

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

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

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

const 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();
  const dataStringified = JSON.stringify(data);
  navigator.clipboard.writeText(dataStringified).catch((err) => {
     console.error("Failed to copy: ", err);
  });
  document.body.removeChild(tempElement);
  setSelectedData(dataStringified);
};

The IgrGrid 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 className="container sample">
    <div className="wrapper" onClick={closeContextMenu}>
      <IgrGrid
        autoGenerate={false}
        data={northWindData}
        primaryKey="ProductID"
        ref={gridRef}
        onContextMenu={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ã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

IgrGrid

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.