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

    • Nenhum
    • Solteiro
    • Seleção múltipla

    Web Components Grid Selection Example

    A amostra abaixo demonstra três tipos de comportamentos de seleção celular no.IgcGridComponent Use os botões abaixo para ativar cada um dos modos de seleção disponíveis.

    Web Components Grid Selection Options

    The Ignite UI for Web Components IgcGridComponent component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the IgcGridComponent. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

    Web Components Grid Row Selection

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

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

    Web Components Grid Cell Selection

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

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

    Web Components Grid Column Selection

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

    Web Components Grid Context Menu

    Usando oContextMenu evento, você pode adicionar um menu de contexto personalizado para facilitar seu trabalhoIgcGridComponent. 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 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);
    }

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