Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions docs/angular/src/content/jp/grids_templates/cell-merging.mdx
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
---
title: Angular Grid のセル結合 - Ignite UI for Angular
description: Ignite UI for Angular Data Grid の複数行レイアウト機能を使用して、列をより強力な方法で配置およびサイズ設定します。デモと例をお試しください
keywords: angular cell merging, cell merging, ignite ui for angular, セルの結合, セルの結合
description: Ignite UI for Angular Data Grid のセル結合機能を使用して、同じ値を持つ隣接セルを結合します。構成方法や結合モードを学び、実際の例をご覧ください
keywords: angular cell merging, cell merging, ignite ui for angular, セルの結合
license: commercial
_language: ja
llms:
description: "Ignite UI for Angular の {ComponentTitle} には、同じ値を持つ隣接セルを 1 つの大きなセルに結合するセル結合機能があります。"
---

import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
Expand All @@ -21,35 +20,32 @@ Ignite UI for Angular の {ComponentTitle} には、同じ値を持つ隣接セ

<ComponentBlock for="Grid">

<Sample src="/grid/grid-cellMerge" height={600} alt="Angular Cell Merging Example" />
<Sample src="/grid/grid-cellMerge" height={600} alt="Angular セル結合の例" />
</ComponentBlock>
<ComponentBlock for="HierarchicalGrid">

<Sample src="/hierarchical-grid/hierarchical-grid-cell-merge" height={475} alt="Angular Cell Merging Example" />
<Sample src="/hierarchical-grid/hierarchical-grid-cell-merge" height={475} alt="Angular セル結合の例" />
</ComponentBlock>
<ComponentBlock for="TreeGrid">

<Sample src="/tree-grid/treegrid-cell-merge" height={755} alt="Angular Cell Merging Example" />
<Sample src="/tree-grid/treegrid-cell-merge" height={755} alt="Angular セル結合の例" />
</ComponentBlock>


## セル結合の有効化と使用

グリッドでのセル結合は、以下の 2 つのレベルで制御されます:

- グリッド レベルの結合モード - 結合がいつ適用されるかを決定
- 列レベルの結合トグル - どの列でセルを結合できるかを決定

- Grid-level merge mode – determines when merging is applied.
- Column-level merge toggle – determines which columns can merge cells.

### グリッド結合モード

グリッドは、`GridCellMergeMode` 列挙型の値を受け入れる `cellMergeMode` プロパティを公開します。

- `always` - ソート状態に関係なく、結合条件を満たすすべての隣接セルを結合。
- `onSort` - 列がソートされているときのみ隣接セルを結合 **(デフォルト値)**。

- `always` - Merges any adjacent cells that meet the merging condition, regardless of sort state.
- `onSort` - Merges adjacent cells only when the column is sorted **(default value)**.

```html
<{ComponentSelector} [data]="data" [cellMergeMode]="cellMergeMode">
...
Expand All @@ -70,12 +66,10 @@ protected cellMergeMode: GridCellMergeMode = 'always';
```

上記の例では:

- **OrderID** 列は、隣接する重複値を結合します。
- **ShipperName** 列は、結合を行わず通常通りに描画されます。

- The **OrderID** column will merge adjacent duplicate values.
- The **ShipperName** column will render normally without merging.

### 組み合わせた例

```html
Expand Down Expand Up @@ -120,6 +114,7 @@ export interface IGridMergeStrategy {

<ComponentBlock for="Grid, HierarchicalGrid">


### デフォルトのストラテジを拡張

一部の動作 (例: comparer ロジック) のみをカスタマイズしたい場合は、組み込みの `DefaultMergeStrategy` を拡張し、必要なメソッドのみをオーバーライドできます。
Expand All @@ -140,7 +135,8 @@ export class MyCustomStrategy extends DefaultMergeStrategy {
</ComponentBlock>
<ComponentBlock for="TreeGrid">

The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: `DefaultTreeGridMergeStrategy` and `ByLevelTreeGridMergeStrategy`. `DefaultTreeGridMergeStrategy` merges all cells with the same value, regardless of their hierarchical level. In contrast, `ByLevelTreeGridMergeStrategy` only merges cells if they have the same value and are located at the same level, making level a required condition for merging.

`IgxTreeGrid` は、`IGridMergeStrategy` インターフェイスを実装する 2 つの組み込みストラテジ `DefaultTreeGridMergeStrategy` と `ByLevelTreeGridMergeStrategy` を提供します。`DefaultTreeGridMergeStrategy` は、階層レベルに関係なく同じ値を持つすべてのセルを結合します。一方、`ByLevelTreeGridMergeStrategy` は、同じ値を持ち、かつ同じレベルに存在するセルのみを結合するため、レベルが結合の必須条件になります。

### デフォルトのストラテジを拡張

Expand Down Expand Up @@ -178,38 +174,44 @@ protected customStrategy = new MyCustomStrategy();

<ComponentBlock for="Grid">


### デモ
<Sample src="/grid/grid-cellMerge-custom" height={600} alt="カスタム条件付き Angular セル結合の例" />
</ComponentBlock>
<ComponentBlock for="HierarchicalGrid">

### デモ
<Sample src="/hierarchical-grid/hierarchical-grid-cell-merge-custom" height={425} alt="カスタム条件付き Angular セル結合の例" />
<ComponentBlock for="Grid">
</ComponentBlock>
<ComponentBlock for="TreeGrid">

### デモ
<Sample src="/tree-grid/treegrid-cell-merge-custom" height={755} alt="カスタム条件付き Angular セル結合の例" />
<ComponentBlock for="Grid">
</ComponentBlock>

## 機能の統合

結合されたセルには特有の動作があるため、グリッドの他の機能と具体的にどのように連携するかに注意が必要です:
<ComponentBlock for="Grid">


- **展開/折りたたみ**: マスター/詳細やグループ化などの機能によってデータを含まない行が生成されると、セルの結合が中断され、グループが分割されます。
</ComponentBlock>
- **Excel エクスポート**: 結合されたセルは、Excel にエクスポートしても結合された状態を維持します。
- **列のピン固定**: 列がピン固定されている場合でも、セルは結合された状態を維持し、ピン固定領域に表示されます。
- **行のピン固定**: セルは、それぞれが属する領域内でのみ結合されます。つまり、ピン固定された行のセルは他のピン固定された行のセルとのみ結合され、ピン固定されていない行のセルはピン固定されていない行のセルとのみ結合されます。
- **ナビゲーション/アクティブ化**: セルがアクティブになると、同じ行内の結合されたセルはすべて単一のセルになります。つまり、結合シーケンスが解除されます。これには、キーボード ナビゲーションによるアクティブ化も含まれます。

<DocsAside type="info" title="情報">
結合セルをクリックすると、結合シーケンス内でもっとも近いセルがアクティブになります。
</DocsAside>

- **更新/編集**: アクティブ化によって結合シーケンスが分解されるため、編集モードになるのは単一セルのみです。
- **行の選択**: 選択された行が結合セルと交差する場合、関連するすべての結合セルが選択対象としてマークされます。

<DocsAside type="info" title="情報">
If a merged cell is clicked, the closest cell from the merge sequence will become active.
</DocsAside>

- **Updating/Editing**: since activation breaks the merge sequence, only a single cell will be in edit mode.
- **Row selection**: if selected rows intersect merged cells, all related merged cells should be marked as part of the selection.

<ComponentBlock for="Grid">


## 制限

|既知の制限| 説明|
Expand All @@ -219,10 +221,8 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom
</ComponentBlock>

## API リファレンス

- <ApiLink type="{ComponentApiType}" />
- <ApiLink kind="sass" module="themes" type="function-grid-theme" label="{ComponentName}Component スタイル" />

## その他のリソース


Expand Down
Loading
Loading