Web Components Grid Selection Overview

    With the Ignite UI for Web Components Select feature in Web Components Grid you can easily interact with and manipulate data using simple mouse interactions. There are three selection modes available:

    • Row selection
    • Cell selection
    • Column selection

    With the rowSelection property, you can specify:

    • None
    • Single
    • Multiple Select

    Web Components Grid Selection Example

    The sample below demonstrates three types of cell selection behaviors in the IgcGridComponent. Use the buttons below to enable each of the available selection modes.

    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

    Property rowSelection enables you to specify the following options:

    • None - Row selection would be disabled for the IgcGridComponent.
    • Single - Selection of only one row within the IgcGridComponent would be available.
    • Multiple - Multi-row selection would be available by using the row selectors, with a key combination like ctrl + click, or by pressing the space key once a cell is focused.

    Go to Row selection topic for more information.

    Web Components Grid Cell Selection

    Property cellSelection enables you to specify the following options:

    • None - Cell selection would be disabled for the IgcGridComponent.
    • Single - Selection of only one cell within the IgcGridComponent would be available.
    • Multiple - Currently, this is the default state of the selection in the IgcGridComponent. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.

    Go to Cell selection topic for more information.

    Web Components Grid Column Selection

    The selectable property enables you to specify the following options for each IgcColumnComponent. The corresponding column selection will be enabled or disabled if this property is set to true or false, respectively.

    This leads to the following three variations:

    • Single selection - mouse click over the column cell.
    • Multi column selection - holding ctrl + mouse click over the column cells.
    • Range column selection - holding shift + mouse click selects everything in between.

    Go to Column selection topic for more information.

    Web Components Grid Context Menu

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

    If there is a multi-cell selection, we will put logic, which will check whether the selected cell is in the area of the multi-cell selection. If it is, we will also emit the values of the selected cells.

    Basically the main function will look like this:

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

    The context menu will have the following functions:

    • Copy the selected cell's value.
    • Copy the selected cell's dataRow.
    • If the selected cell is within a multi-cell selection range, copy all the selected data.
        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);
    }

    The IgcGridComponent will fetch the copied data and will paste it in a container element.

    The template we are going to use to combine the grid with the context menu:

        <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>

    Select multiple cells and press the right mouse button. The context menu will appear and after selecting Copy cells data the selected data will appear in the right empty box.

    The result is:

    Known Issues and Limitations

    When the grid has no primaryKey set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes:

    • Row Selection
    • Row Expand/collapse
    • Row Editing
    • Row Pinning

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.