Web Components Descripción general de la selección de cuadrícula

Con la función Ignite UI for Web Components Select de Web Components Grid, puede interactuar y manipular fácilmente los datos mediante simples interacciones con el ratón. Hay tres modos de selección disponibles:

Selección de fila
Selección de celda
Column selection

Con larowSelection propiedad, puedes especificar:

Ninguno
Soltero
Selección múltiple

Web Components Grid Selection Example

La muestra siguiente muestra tres tipos de comportamientos de selección celular en elIgcGridComponent. Utiliza los botones de abajo para activar cada uno de los modos de selección disponibles.

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

PropiedadrowSelection te permite especificar las siguientes opciones:

None- La selección de filas estaría deshabilitada para elIgcGridComponent.
Single- La selección de solo una fila dentro de laIgcGridComponent estaría disponible.
Multiple- La selección de varias filas estaría disponible usando los selectores de filas, con una combinación de teclas como CTRL + click, o pulsando la space key opción una vez que una celda está enfocada.

Vaya al tema Selección de filas para obtener más información.

Web Components Grid Cell Selection

PropiedadcellSelection te permite especificar las siguientes opciones:

None- La selección de celdas estaría deshabilitada para elIgcGridComponent.
Single- La selección de solo una celda dentro de laIgcGridComponent estaría disponible.
Multiple- Actualmente, este es el estado predeterminado de la selección en elIgcGridComponent. La selección de varias celdas está disponible arrastrando el ratón sobre las celdas, después de que un botón izquierdo hiciera clic continuamente.

Vaya al tema Selección de celda para obtener más información.

Web Components Grid Column Selection

Laselectable propiedad te permite especificar las siguientes opciones para cadaIgcColumnComponent uno. La selección de columna correspondiente estará habilitada o deshabilitada si esta propiedad se establece como verdadero o falso, respectivamente.

Esto lleva a las siguientes tres variaciones:

Selección única: haga clic con el mouse sobre la celda de la columna.
Selección de varias columnas: mantener presionado CTRL + mouse click sobre las celdas de la columna.
Selección de columna de rango: mantener presionado SHIFT + mouse click selecciona todo lo que hay en el medio.

Vaya al tema Selección de columnas para obtener más información.

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.

Si hay una selección multicelda, pondremos lógica, que comprobará si la celda seleccionada está en el área de selección multicelda. Si es así, también emitiremos los valores de las celdas seleccionadas.

Básicamente la función principal se verá así:

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

El menú contextual tendrá las siguientes funciones:

Copia el valor de la celda seleccionada.
Copie el dataRow de la celda seleccionada.
Si la celda seleccionada está dentro de un rango de selección de varias celdas, copie todos los datos seleccionados.

    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.

La plantilla que vamos a utilizar para combinar la grilla con el menú contextual:

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

Seleccione varias celdas y presione el botón derecho del mouse. Aparecerá el menú contextual y después de seleccionar Copiar datos de celdas, los datos seleccionados aparecerán en el cuadro vacío de la derecha.

El resultado es:

Known Issues and Limitations

Cuando la cuadrícula noprimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:

Selección de fila
Fila Expandir/contraer
Edición de filas
Fijación de filas

API References

IgcGridComponent

Additional Resources

Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.