Visão geral da seleção de grade do Web Components

Com o recurso Ignite UI for Web Components Select no Web Components 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

Web Components Grid Selection Example

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

Web Components Grid Selection Options

O componente Ignite UI for Web Components IgcGridComponent 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 IgcGridComponent. Para alterar/ativar o modo de seleção, cellSelection você pode usar rowSelection ou selectable propriedades.

Web Components Grid Row Selection

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

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

Web Components Grid Cell Selection

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

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

Web Components Grid Column Selection

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

    public rightClick(event: any) {
        const eventArgs = event.detail;
        eventArgs.event.preventDefault();
        this.multiCellArgs = {};
        if (this.multiCellSelection) {
          const node = eventArgs.cell.selectionNode;
          const isCellWithinRange = this.grid.getSelectedRanges().some((range) => {
            if (
              node.column >= range.columnStart &&
              node.column <= range.columnEnd &&
              node.row >= range.rowStart &&
              node.row <= range.rowEnd
            ) {
              return true;
            }
            return false;
          });
          if (isCellWithinRange) {
            this.multiCellArgs = { data: this.multiCellSelection.data };
          }
        }
        this.contextmenuX = eventArgs.event.clientX;
        this.contextmenuY = eventArgs.event.clientY;
        this.clickedCell = eventArgs.cell;
        this.toggleContextMenu();
      }

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 copySelectedRowData() {
        const selectedData = this.grid.getRowData(this.clickedCell.id.rowID);
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }

    public copySelectedCellData() {
        const selectedData = this.clickedCell.value;
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        this.toggleContextMenu();
    }


    public copySelectedData() {
        const selectedData = this.grid.getSelectedData();
        this.copyData(selectedData);
        const selectedDataArea = document.getElementById('selectedArea');
        selectedDataArea.innerText = JSON.stringify(selectedData);
        
        this.toggleContextMenu();
    }

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

O IgcGridComponent 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 class="container sample">
      <div class="wrapper">
        <igc-grid auto-generate="false" width="50%" height="100%" name="grid" id="grid">
          <igc-column field="ProductID" header="Product ID">
          </igc-column>
          <igc-column field="ProductName" header="Product Name">
          </igc-column>
          <igc-column field="UnitsInStock" header="Units In Stock" data-type="number">
          </igc-column>
          <igc-column field="UnitPrice" header="Units Price" data-type="number">
          </igc-column>
          <igc-column field="Discontinued" data-type="boolean">
          </igc-column>
          <igc-column field="OrderDate" header="Order Date" data-type="date">
          </igc-column>
        </igc-grid>
        <div id="selectedArea" class="selected-data-area">
        </div>
      </div>
    </div>
    <div id="menu" style="display: none;" class="contextmenu">
      <span id="copySingleCell" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Cell Data
      </span>
      <span id="copyRow" class="item">
        <igc-icon name="content_copy"></igc-icon>Copy Row Data
      </span>
      <span id="copyMultiCells" class="item">
        <igc-icon name="content_copy"></igc-icon>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ã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

IgcGridComponent

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.