このコントロールは非推奨であり、Grid に置き換えられていることに注意してください。そのため、そのコントロールに移行することをお勧めします。これは新しい機能を受け取ることはなく、バグ修正は優先されません。コードベースをデータグリッドに移行する際のヘルプや質問については、サポートにお問い合わせください。

Web Components グリッドセルの結合

Ignite UI for Web Components データテーブル / データグリッドはセルの結合をサポートします。オプトインして、特定の列の隣接する兄弟レコードに同じ値が含まれている場合に検出できます。セルがアクティブ、選択、または編集モードではない間、値はセル全体に表示されます。

Web Components グリッドセルの結合例

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

このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

概要

Web Components データグリッドでのセルの結合は、Web Components グリッド全体または個々の列の mergedCellMode オプションを使用して構成できます。このプロパティは、以下にリストされている次のオプションのいずれかに設定できます:

Never: グリッドまたは列がセルを結合することはありません。これがデフォルトの動作です。
Always: グリッドまたは列が常にセルの結合を試みます。
OnlyWhenSorted: グリッドまたは列が列がソートされたときにのみセルの結合を試みます。

このプロパティの値に関係なく、セルは兄弟レコード間でのみ結合できることに注意してください。

セルの結合は、mergedCellEvaluationCriteria プロパティを使用してデータが書式設定されているかどうかに基づいて評価できます。これは、グリッド全体または個々の列に適用され、以下にリストされている次のオプションのいずれかに設定できます。

RawValue: セルの生の値が同じ場合、隣接する行のセルを結合します。これがデフォルト値です。
FormattedText: セルからのフォーマットされた値が同じである場合、隣接する行からのセルを結合します。

Web Components グリッド セルの結合

Web Components グリッド セルの結合例

概要

API リファレンス

Web Components グリッドセルの結合

Web Components グリッドセルの結合例