Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.

Fusión de celdas de cuadrícula Web Components

La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite la combinación de celdas. Puede optar por participar y detectar cuándo los registros del mismo nivel adyacentes para una columna específica contienen el mismo valor. Mientras las celdas no están activas, seleccionadas o en modo de edición, el valor se muestra en todas las celdas.

Web Components Ejemplo de fusión de celdas de cuadrícula

import './odatajs-4.0.0';
import { IgcDataGridModule } from 'igniteui-webcomponents-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';
import { MergedCellMode } from 'igniteui-webcomponents-grids';
import { IgcColumnSortDescription } from 'igniteui-webcomponents-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { ODataVirtualDataSource } from 'igniteui-webcomponents-datasources';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { HeaderClickAction } from 'igniteui-webcomponents-grids';

ModuleManager.register(
    IgcDataGridModule,
    IgcGridColumnOptionsModule
);

export class DataGridCellMerging {

    private grid: IgcDataGridComponent;

    constructor() {

        this.grid = document.getElementById('grid') as IgcDataGridComponent;
        this.dropDownValueChanged = this.dropDownValueChanged.bind(this);

        const vds = new ODataVirtualDataSource();
        vds.baseUri = 'https://services.odata.org/V4/Northwind/Northwind.svc';
        vds.entitySet = 'Orders';
        vds.pageSizeRequested = 200;

        this.grid.dataSource = vds;
        this.grid.mergedCellMode = MergedCellMode.Always;
        this.grid.headerClickAction = HeaderClickAction.SortByMultipleColumnsTriState;

        let dropDown = document.getElementById('selectionDropBox');
        dropDown!.addEventListener('change', this.dropDownValueChanged);

        let g = new IgcColumnSortDescription();
        g.field = 'ShipName';
        g.sortDirection = ListSortDirection.Ascending;
        this.grid.sortDescriptions.add(g);
    }

    dropDownValueChanged() {

        let dropDown = document.getElementById('selectionDropBox') as any;
        let grid = document.getElementById('grid') as IgcDataGridComponent;

        switch (dropDown.value) {
            case 'Always': {
                grid.mergedCellMode = MergedCellMode.Always;
                break;
            }
            case 'Never': {
                grid.mergedCellMode = MergedCellMode.Never;
                break;
            }
            case 'OnlyWhenSorted': {
                grid.mergedCellMode = MergedCellMode.OnlyWhenSorted;
                break;
            }
        }
    }

}

new DataGridCellMerging();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>DataGridCellMerging</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">

      <div class="options horizontal">
        <span class="options-label">Merged Cell Mode: </span>
        <select id="selectionDropBox" class="options-label">
            <option>Always</option>
            <option>Never</option>
            <option>OnlyWhenSorted</option>
        </select>
    </div>

<igc-data-grid id="grid" width="100%" height="100%"
merged-cell-mode="Always"
    auto-generate-columns="false"
    is-column-options-enabled="true">
    <igc-text-column field="OrderID" header-text="ID" width="*>90" horizontal-alignment="center">
    </igc-text-column>
    <igc-date-time-column field="OrderDate" header-text="Order Date" width="*>130">
    </igc-date-time-column>
    <igc-text-column field="ShipName" header-text="Name"  width="*>185">
    </igc-text-column>
    <igc-numeric-column field="Freight" header-text="Freight" width="*>115"
        positive-prefix="$" min-fraction-digits="2">
    </igc-numeric-column>
    <igc-date-time-column field="ShippedDate" header-text="Ship Date" width="*>125"
        horizontal-alignment="right">
    </igc-date-time-column>
    <igc-text-column field="ShipAddress" header-text="Shipping Address" width="*>250">
    </igc-text-column>
    <igc-text-column field="ShipCity" header-text="City" width="*>130">
    </igc-text-column>
    <igc-text-column field="ShipCountry" header-text="Country" width="*>110">
    </igc-text-column>
</igc-data-grid>

</div>

    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

Descripción general

La fusión de celdas en la cuadrícula de datos de Web Components se puede configurar mediante la mergedCellMode opción de toda la cuadrícula de Web Components o columnas individuales. Esta propiedad se puede establecer en una de las siguientes opciones, que se enumeran a continuación:

Never: la cuadrícula o columna nunca fusionará celdas. Este es el comportamiento predeterminado.
Always: la cuadrícula o columna siempre intentará fusionar celdas.
OnlyWhenSorted: la cuadrícula o columna solo intentará fusionar celdas cuando una columna esté ordenada.

Tenga en cuenta que, independientemente del valor de esta propiedad, las celdas solo se pueden combinar entre registros hermanos.

La combinación de celdas se puede evaluar en función de si los datos están formateados o no utilizando la propiedad mergedCellEvaluationCriteria. Esto se aplica a toda la cuadrícula o a columnas individuales y se puede configurar en una de las siguientes opciones, que se enumeran a continuación:

RawValue: combina celdas de filas adyacentes cuando los valores sin procesar de las celdas son los mismos. Este es el valor predeterminado.
FormattedText: combina celdas de filas adyacentes cuando el valor formateado de las celdas es el mismo.

Fusión de celdas de cuadrícula Web Components

Web Components Ejemplo de fusión de celdas de cuadrícula

Descripción general

Referencias de API