Skip to content

Commit 4a3999a

Browse files
authored
Merge pull request #1821 from IgniteUI/localization-2025-11-27
[JA] Update changelog and documentation for new Grid features and improvements
2 parents e78ba4b + 2011622 commit 4a3999a

File tree

5 files changed

+170
-38
lines changed

5 files changed

+170
-38
lines changed

doc/jp/components/general-changelog-dv-blazor.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,68 @@ alt="{Platform} user-annotation-create"/>
4343

4444
- Azure Map Imagery は RTM になりました。
4545

46+
### {PackageGrids} (グリッド)
47+
48+
#### **すべてのグリッド**
49+
50+
- **セルの結合**
51+
- 同じデータまたはその他のカスタム条件に基づいて列内のセルを 1 つのセルに構成および結合できる新しいセル結合機能を追加しました。個々の列で有効化できます:
52+
53+
```razor
54+
<IgbColumn Field="field" Merge="true"></IgbColumn>
55+
```
56+
57+
- グリッド レベルで以下のいずれかの設定が可能です:
58+
- `OnSort` - 列がソートされたときのみ結合。
59+
- `Always` - データ操作に関わらず常に結合。
60+
デフォルトの `CellMergeMode``OnSort` です。
61+
```razor
62+
<IgbGrid CellMergeMode="GridCellMergeMode.Always">
63+
</IgbGrid>
64+
```
65+
66+
- **列のピン固定**
67+
- 列をグリッドの特定の側 (先頭または末尾) にピン固定できるようになりました。これにより、両側からのピン固定が可能です。これは、列の `PinningPosition` プロパティを宣言的に設定することで実行できます。
68+
```razor
69+
<IgbColumn Field="Col1" Pinned="true" PinningPosition="ColumnPinningPosition.End">
70+
</IgbColumn>
71+
```
72+
- または:
73+
```razor
74+
col.PinningPosition = ColumnPinningPosition.End;
75+
col.Pinned = true;
76+
77+
col.PinningPosition = ColumnPinningPosition.Start;
78+
col.Pinned = true;
79+
```
80+
- 列にプロパティ `PinningPosition` が設定されていない場合、列はグリッドの columns の pinning オプションで指定された位置にデフォルト設定されます。
81+
82+
- **ソートとグループ化の改善**
83+
- Schwartzian Transformation を用いてソート アルゴリズムの効率を改善しました。この手法 (decorate-sort-undecorate とも呼ばれる) は、ソート キーを一時的に元データに関連付けることで再計算を回避します。
84+
- ソート アルゴリズムを再帰型から反復型にリファクタリングしました。
85+
- グループ化アルゴリズムを再帰型から反復型にリファクタリングしました。
86+
- グループ化処理を最適化しました。
87+
88+
89+
- **その他の改善**
90+
- 列の `MinWidth``MaxWidth` によって、ユーザーが指定した width がこれらの範囲を超えないよう制限されるようになりました。
91+
- `PagingMode` プロパティに、'local' および 'remote' の文字列を直接指定できるようになり、`GridPagingMode` 列挙型をインポートする必要がなくなりました。
92+
93+
### 一般
94+
95+
#### 追加
96+
- `DateRangePicker`
97+
98+
#### 変更
99+
- すべてのテーマにわたってフォームに関連付けられたほとんどのコンポーネントの読み取り専用スタイルを更新し、コンポーネントが読み取り専用状態にあることをより適切に示せるようになりました。
100+
- `Tooltip`
101+
- 動作変更: `Tooltip` のデフォルトの placement は 「bottom」 になりました。
102+
- 動作変更: with-arrow が設定されていない限り、`Tooltip` はデフォルトでは矢印インジケーターをレンダリングしません。
103+
- 重大な変更: `Tooltip` イベントは、detail プロパティに anchor ターゲットを返さなくなりました。引き続き event.target.anchor でアクセスできます。
104+
105+
#### 非推奨
106+
- `Tooltip` - `DisableArrow` は非推奨です。矢印インジケーターをレンダリングするには、`WithArrow` を使用してください。
107+
46108
### バグ修正
47109

48110
| バグ番号 | コントロール | 説明 |

doc/jp/components/grid-lite/binding.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,15 @@ grid.columns = [...];
4343
```
4444

4545
```razor
46+
<IgbGridLite Data="data" Columns="columns" />
4647
@code {
47-
grid.Data = new List<T>
48+
this.data = new List<T>
4849
{
4950
// レコードが続きます
5051
};
5152
5253
// 新しいデータを反映するように列の構成を更新します。
53-
grid.Columns = new List<IgbColumnConfiguration>
54+
this.columns = new List<IgbColumnConfiguration>
5455
{
5556
// 列定義
5657
};
@@ -75,14 +76,15 @@ grid.data = [];
7576
```
7677

7778
```razor
79+
<IgbGridLite Data="data" AutoGenerate="true" Columns="columns" />
80+
7881
@code {
79-
grid.AutoGenerate = true;
8082
8183
// 列定義
82-
grid.Columns = new List<IgbColumnConfiguration>();
84+
this.columns = new List<IgbColumnConfiguration>();
8385
8486
// 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
85-
grid.Data = new List<T>();
87+
this.data = new List<T>();
8688
}
8789
```
8890
<!-- React, WebComponents -->

doc/jp/components/grid-lite/sorting.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ UI を通じてソート操作が実行されると、コンポーネントは
336336
grid.addEventListener('sorting', (event: CustomEvent<SortExpression<T>>) => { ... });
337337
grid.addEventListener('sorted', (event: CustomEvent<SortExpression<T>>) => { ... });
338338
```
339-
<!-- End: React, WebComponents -->
339+
<!-- end: React, WebComponents -->
340340

341341
<!-- Blazor -->
342342
UI を介してソート操作が実行されると、コンポーネントは `Sorting` および `Sorted` イベントを発生させます。`Sorting` イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。
@@ -363,6 +363,7 @@ UI を介してソート操作が実行されると、コンポーネントは `
363363
次のサンプルでは、**Name****Rating** 列のソートを試みると操作がキャンセルされます。下記のイベント ログで動作を確認してください。
364364

365365
`sample="/{GridLiteSample}/sort-config-events", height="600", alt="{Platform} {GridLiteTitle} ソート構成イベント"`
366+
366367
<!-- React, WebComponents -->
367368
## リモート ソート操作
368369

doc/jp/components/grid-lite/theming.md

Lines changed: 12 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -39,42 +39,22 @@ _language: ja
3939

4040
## カスタム テーマの作成
4141

42-
{GridLiteTitle} パッケージに同梱のデフォルト テーマ以外に、プロジェクトのアイデンティティやブランディングに合わせて独自のテーマを作成・変更できます
42+
{GridLiteTitle} パッケージに付属するデフォルト テーマに加えて、別の CSS カスタム プロパティ セットを使用することで、データ グリッドの外観と操作感をさらにカスタマイズできます
4343

44-
---
45-
46-
SCSS CSS インターフェイスの両方のドキュメントと使用方法については、<a href="https://github.com/IgniteUI/igniteui-theming#readme" target="_blank">Ignite UI テーマ パッケージ</a> wiki を参照してください。
47-
48-
---
44+
詳細については、[テーマ設定](../grids/theming-grid.md)のトピックを参照してください。
4945

50-
```scss
51-
@use 'node_modules/igniteui-theming' as *;
52-
53-
// Our dark theme
54-
$my_dark_palette: palette(
55-
$primary: #dab785,
56-
$secondary: #d5896f,
57-
$surface: #031d44,
58-
$gray: #04395e,
59-
);
60-
61-
// Our light theme
62-
$my-light-palette: palette(
63-
$primary: #c1292e,
64-
$secondary: #f1d302,
65-
$surface: #fdfffc,
66-
$gray: #235789,
67-
);
68-
69-
.custom-light {
70-
@include palette($my_light_palette);
71-
@include typography('"Roboto Condensed", sans-serif', $bootstrap-type-scale);
46+
```css
47+
.grid-sample {
48+
--header-background: #494949;
49+
--header-text-color: #f2c43c;
50+
--cell-active-border-color: #f2c43c;
51+
--row-hover-background: #707070;
52+
--row-hover-text-color: #f2c43c;
7253
}
54+
```
7355

74-
.custom-dark {
75-
@include palette($my_dark_palette);
76-
@include typography('"Merriweather Sans", sans-serif', $bootstrap-type-scale);
77-
}
56+
```razor
57+
<IgbGridLite class="grid-lite-sample" />
7858
```
7959

8060
以下は、上記のカスタム テーマの例です。

0 commit comments

Comments
 (0)