이 컨트롤은 더 이상 사용되지 않고 그리드 구성 요소로 대체되었으므로 해당 컨트롤로 마이그레이션하는 것이 좋습니다. 새로운 기능은 제공되지 않으며 버그 수정은 우선순위에서 제외됩니다. 코드베이스를 Data Grid로 마이그레이션하는 데 도움이 필요하거나 질문이 있으면 지원팀에 문의하세요.

Web Components 그리드 셀 병합

Ignite UI for Web Components 데이터 테이블/데이터 그리드는 셀 병합을 지원합니다. 옵트인(opt-in)하고 특정 열에 대한 인접한 형제 레코드에 동일한 값이 포함된 경우를 감지할 수 있습니다. 셀이 활성 상태이거나, 선택되어 있지 않거나, 편집 모드에 있지 않은 동안에는 값이 셀 전체에 표시됩니다.

Web Components 그리드 셀 병합 예제

import './odatajs-4.0.0';
import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
import { IgcGridColumnOptionsModule } from 'igniteui-webcomponents-data-grids';
import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';
import { MergedCellMode } from 'igniteui-webcomponents-data-grids';
import { IgcColumnSortDescription } from 'igniteui-webcomponents-data-grids';
import { ModuleManager } from 'igniteui-webcomponents-core';
import { ODataVirtualDataSource } from 'igniteui-webcomponents-datasources';
import { ListSortDirection } from 'igniteui-webcomponents-core';
import { HeaderClickAction } from 'igniteui-webcomponents-data-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 참조