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:

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

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}
        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ã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.