From 4fa36c9c0b51fea850e24afe59a9bad006a3b642 Mon Sep 17 00:00:00 2001 From: mkamiishi Date: Thu, 23 Jul 2026 14:10:25 +0900 Subject: [PATCH 1/3] docs: update Japanese row adding and editing topics --- .../components/grids/_shared/row-adding.mdx | 126 +++++++---- .../components/grids/_shared/row-editing.mdx | 214 +++++++++--------- 2 files changed, 189 insertions(+), 151 deletions(-) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index aa7efae696..a75f9c3e5c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -1,6 +1,6 @@ --- title: "{Platform} {ComponentTitle} 行の追加 - {ProductName}" -description: "{Platform} を使用して、定義済みの行追加機能の使用およびカスタマイズする方法を学びます。直感的なグリッド行の追加と CRUD 機能を利用できます。" +description: "{Platform} で組み込みの行追加機能を使用およびカスタマイズする方法を説明します。直感的なグリッドの行追加と CRUD 機能を活用できます。" keywords: "{Platform}, {ComponentKeywords}, {ProductName}, Infragistics, インフラジスティックス" license: commercial mentionedTypes: [{ComponentApiMembers}] @@ -18,13 +18,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} 行の追加 -{Platform} {ComponentTitle} の {ProductName} 行追加機能を使用すると、ユーザーは別のフォームやページに移動することなく、新しいデータ レコードを入力して送信できます。 を使用すると、ユーザーはインライン行追加と CRUD 操作用の強力な API を通じてデータを操作できます。 -グリッドのテンプレートで編集操作が有効になっている コンポーネントを追加します。その後、行にカーソルを置き、提供されたボタンを使用します。最後に ALT + + を押して、行追加 UI を表示します。 +{Platform} {ComponentTitle} の {ProductName} 行追加機能を使用すると、ユーザーは別のフォームやページに移動せずに新しいデータ レコードを入力して送信できます。 では、インラインでの行追加と、CRUD 操作のための強力な API によってデータを操作できます。 +グリッド テンプレートに、編集アクションを有効にした コンポーネントを追加します。次に行へホバーして表示されたボタンを使用し、最後に ALT + + を押して行追加 UI を表示します。 - はインライン行追加や {Platform} CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている コンポーネントを追加し、ホバーして提供されたボタンを使用するか、ALT + + を押して、行追加 UI を生成するか、ALT + SHIFT + + を押して、選択した行に子を追加するための UI を生成します。 + では、インライン行追加と {Platform} 向け CRUD API により、便利な方法でデータを操作できます。グリッド テンプレートに編集アクションを有効化した を追加し、行へホバーして表示されるボタンを使用します。ALT + + で行追加 UI を表示し、ALT + SHIFT + + で選択行の子行追加 UI を表示できます。 @@ -50,17 +50,17 @@ export class AppModule {} -次に、バインドしたデータ ソースに を定義をして `RowEditable` を true に設定し、編集アクションを有効にした コンポーネントを定義します。 入力は、行追加 UI を生成するボタンの表示状態を制御します。 +次に、データ ソースをバインドした を定義し、 を true に設定します。さらに、編集アクションを有効にした コンポーネントを追加します。 入力は、行追加 UI を表示するボタンの表示状態を制御します。 ```html <{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" [autoGenerate]="false" [rowEditable]="true"> - - - - + + + + @@ -74,12 +74,12 @@ export class AppModule {} ```html <{ComponentSelector} id="grid" primary-key="ProductID" auto-generate="false" row-editable="true"> - - - - - - + + + + + + @@ -91,7 +91,7 @@ export class AppModule {} ```tsx -<{ComponentSelector} autoGenerate={false} data={NwindData} primaryKey="ProductID" rowEditable={true}> +<{ComponentSelector} autoGenerate={false} data={nwindData} primaryKey="ProductID" rowEditable={true}> @@ -152,12 +152,12 @@ export class AppModule {} ```html <{ComponentSelector} id="treeGrid" primary-key="ID" foreign-key="ParentID" row-editable="true"> - - - - + + + + - + @@ -246,12 +246,12 @@ export class AppModule {} ```html <{ComponentSelector} id="hGrid" auto-generate="false" primary-key="Debut" row-editable="true"> - - + + - - - + + + @@ -259,14 +259,14 @@ export class AppModule {} - - - + + + - - - - + + + + @@ -391,11 +391,11 @@ export class AppModule {} > プライマリ キーは行追加操作で必須です。 > **注**: -> プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、`Editable` 列の入力を **false** に設定します。 +> プライマリ キーを除くすべての列は、デフォルトで行追加 UI で編集可能です。特定の列の編集を無効にする場合、 列の入力を **false** に設定します。 > **注**: -> [行の追加] のボタンの表示状態を制御する 入力は、アクション ストリップ コンテキスト (タイプ を使用して、ボタンが表示するレコードを調整できます。 +> [行の追加] ボタンの表示状態を制御する 入力では、アクション ストリップのコンテキスト (型: ) を使用して、ボタンを表示するレコードを調整できます。 @@ -405,11 +405,11 @@ export class AppModule {} -内部の `BaseTransactionService` は に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。 +`BaseTransactionService` は に内部的に提供され、行の状態が送信またはキャンセルされるまで保留中のセル変更を保持します。 ## プログラムで行の追加を開始 - allows to programmatically spawn the add row UI by using two different public methods. One that accepts a row ID for specifying the row under which the UI should spawn and another that works by index. You can use these methods to spawn the UI anywhere within the current data view. Changing the page or specifying a row that is e.g. filtered out is not supported. + では、2 つの公開メソッドを使って行追加 UI をプログラムから表示できます。1 つは UI を表示する位置の基準となる行 ID を受け取り、もう 1 つはインデックスで位置を指定します。これらのメソッドを使うことで、現在のデータ ビュー内の任意の位置に UI を表示できます。ページ変更や、たとえばフィルターで除外された行を指定することはサポートされません。 を使用すると、2 つの異なるパブリック メソッドを使用して、プログラムで行追加 UI を生成できます。1 つは UI が生成される行を指定するための行 ID を受け入れ、もう 1 つはインデックスによって機能します。これらのメソッドを使用して、現在のデータ ビュー内の任意の場所に UI を生成できます。ページの変更や、たとえばフィルターで除外された行の指定はサポートされていません。 @@ -437,7 +437,7 @@ gridRef.current.beginAddRowById(null); // Spawns the add row UI as the first ``` -`BeginAddRowById` を使用するには、`RowID` (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。最初のパラメーターに `null` を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。 + メソッドも同様に機能しますが、UI が表示されるインデックスを指定する必要があります。指定可能な値の範囲は 0 からデータ ビューのサイズ - 1 までです。 ```typescript @@ -465,7 +465,7 @@ gridRef.current.beginAddRowByIndex(0); // Spawns the add row UI as the first -`BeginAddRowByIndex` メソッドも同様に機能しますが、UI が生成されるインデックスを指定する必要があります。許可される値の範囲は、0 からデータ ビューのサイズ -1 までです。 + を使用する場合は、`RowID` (PK) で操作コンテキストとなる行を指定します。このメソッドは、エンド ユーザーが指定行の [行の追加] ボタンをクリックした場合と同様に動作し、その行の下に UI を表示します。2 番目のパラメーターで、行をコンテキスト行の子として追加するか兄弟として追加するかを制御できます。最初のパラメーターに `null` を渡すと、UI をグリッドの先頭行として表示できます。 ```typescript @@ -483,7 +483,7 @@ this.treeGrid.beginAddRowById(null); // Spawns the add row UI as the ``` -`BeginAddRowById` を使用するには、`RowID` (PK) によって操作のコンテキストとして使用する行を指定する必要があります。このメソッドは、エンドユーザーが指定された行の [行の追加] アクション ストリップ ボタンをクリックしたかのように機能し、その下に UI を生成します。2 番目のパラメーターは、行を子としてコンテキスト行に追加するか、兄弟として追加するかを制御します。最初のパラメーターに `null` を渡すことで、UI をグリッドの最初の行としてス生成させることもできます。 + も同様に機能しますが、コンテキスト行をインデックスで指定します。 ```typescript @@ -513,9 +513,9 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi ## 動作 -行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、[{ComponentTitle} 行の編集](row-editing.mdx)のトピックを参照してください。 +行追加 UI は、エンド ユーザーに一貫した編集エクスペリエンスを提供するため、行編集 UI と同じ動作をします。詳細は [{ComponentTitle} 行の編集](row-editing.mdx) を参照してください。 -行追加 UI を介して新しい行が追加された後、その位置や表示状態は、 のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない では、最後のレコードとして表示されます。スナックバーが短時間表示され、 が表示されていない場合にはエンド ユーザーがコントロールの位置までスクロールするためのボタンが含まれています。 +行追加 UI から新しい行を追加した後、その位置や表示状態は のソート、フィルタリング、グループ化の状態によって決まります。これらの状態が適用されていない では、新しい行は末尾レコードとして表示されます。また、追加行が表示領域外にある場合は、 のその位置までスクロールできるボタンを含むスナックバーが短時間表示されます。 ## キーボード ナビゲーション @@ -545,11 +545,11 @@ this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the fi ### テキストのカスタマイズ -行追加オーバーレイのテキストのカスタマイズは、 `RowAddTextTemplate` を使用して可能です。 +行追加オーバーレイのテキストは、 を使用してカスタマイズできます。 -行追加オーバーレイのテキストのカスタマイズは、`RowAddTextDirective` を使用して可能です。 +行追加オーバーレイのテキストは、`RowAddTextDirective` でカスタマイズできます。 ```html @@ -606,7 +606,7 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { ### ボタンのカスタマイズ -`RowEditActionsDirective` を使用して行編集オーバーレイのボタンのカスタマイズが可能です。 +`RowEditActionsDirective` を使用すると、行編集オーバーレイのボタンをカスタマイズできます。 キーボード ナビゲーションにボタンを含める場合、各ボタンに `RowEditTabStopDirective` が必要です。 @@ -617,13 +617,13 @@ gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => { ``` -> **Note**: -> Using `RowEditActions` directive will change edit actions for both editing and adding overlay buttons. +> **注**: +> `RowEditActions` ディレクティブを使用すると、編集オーバーレイと追加オーバーレイの両方で編集アクション ボタンが変更されます。 ### ボタンのカスタマイズ -行編集オーバーレイのボタンをカスタマイズするには、`RowEditActions` テンプレートを使用します。 +行編集オーバーレイのボタンは、`RowEditActions` テンプレートでカスタマイズできます。 ```ts @@ -654,11 +654,39 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { }, false); ``` +> **注**: +> `RowEditActions` テンプレートを使用すると、編集オーバーレイと追加オーバーレイの両方で編集アクション ボタンが変更されます。 + + + +## リモート シナリオ + +多くのリモート データ シナリオでは、プライマリ キーは作成時のサーバー リクエストで割り当てられます。そのため、クライアント側で追加されたレコードは、サーバーのデータベースに保存されるまで最終的なプライマリ キー値を持ちません。この場合、 での推奨対応は次のとおりです。 + +- がトランザクションを使用していない場合。 + + 作成リクエストが成功し、追加レコードのデータが返却されたら、ローカル データ インスタンス内の該当レコード ID を置き換えます。 + +- がトランザクションを使用している場合。 + + 作成リクエストまたは一括更新リクエストが成功し、DB で生成された ID を持つ追加レコードが返却されたら、`Clear` API メソッドで関連する ADD トランザクションをトランザクション ログからクリアします。ローカル トランザクションに含まれる生成 ID とデータベース側で生成された ID が異なる可能性があるためです。その後、レスポンスで返されたレコードをローカル データに追加します。 + +これにより、リモートで生成された ID が常にローカル データに反映され、以降の更新/削除処理でも正しいレコード ID を対象にできます。 + + +## スタイリング + +行追加 UI は、 の編集アクション ボタン、編集エディターとオーバーレイ、さらに新規追加行へスクロールするためのスナックバーで構成されています。これらのスタイル設定は、各トピックのガイドを参照してください。 + +- [{ComponentTitle} 行の編集](row-editing.mdx#styling) +- [Snackbar](../../notifications/snackbar.mdx#styling) + ## API リファレンス -
+ + ## その他のリソース diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index 889632fa28..cba68d9228 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -18,16 +18,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} 行の編集 -{Platform} {ComponentTitle} の {ProductName} 行編集機能を使用すると、`{ComponentName}` 内でデータを直接編集できます。データを操作するこの便利な方法に加えて、完全な CRUD 操作のための強力な API があります。行をクリックして **Enter キー**を押すと、グリッド行の編集を実行できます。もう 1 つの簡単な方法は、変更する必要がある行をマウスでダブルクリックすることです。 +{Platform} {ComponentTitle} の {ProductName} 行編集機能では、`{ComponentName}` 内でデータを直接編集できます。直感的な編集操作に加えて、完全な CRUD 操作を実現する強力な API も提供されます。行をクリックして **Enter キー**を押すと行編集を開始できます。もう 1 つの方法として、編集したい行をマウスでダブルクリックしても開始できます。 ## {Platform} {ComponentTitle} 行編集の例 -以下の手順では、`{ComponentName}` で行編集を有効にする方法を示します。セル値を変更してから同じ行の他のセルをクリックまたはナビゲーションした場合も **[完了]** ボタンを使用して確定するまで行値を更新しません。または **[キャンセル]** ボタンを使用して破棄します。 +次のサンプルは、`{ComponentName}` で行編集を有効にする方法を示します。セル値を変更した後、同じ行内の別セルへクリックまたは移動しても、**[完了]** ボタンで確定するまで行の値は更新されません。**[キャンセル]** ボタンで変更を破棄することもできます。 -行が編集モードにある場合、他の行のセルをクリックすると [完了] ボタンが押されたように動作し、前の行の変更をすべての変更をサブミットします。新しくフォーカスされたセルが編集可能な場合、新しい行も編集モードになります。ただし、セルが編集可能でない場合は、前の行のみが編集モードを終了します。 +行が編集モードのときに別の行のセルをクリックすると、[完了] ボタンを押した場合と同様に動作し、直前の行の変更がすべて送信されます。新しくフォーカスされたセルが編集可能であれば、その行も編集モードに入ります。編集不可セルの場合は、前の行のみが編集モードを終了します。 ## 行編集の使用 @@ -48,7 +48,7 @@ export class AppModule {} -次に をバインドしたデータソースで定義し、`RowEditable` を true に設定してバインドします。 +次に、データ ソースをバインドした `{ComponentName}` を定義し、 を true に設定します。 @@ -75,7 +75,7 @@ export class AppModule {} - + ``` @@ -107,10 +107,10 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { <{ComponentSelector} primaryKey="ProductID" width="100%" height="500px" rowEditable={true}> - - - - + + + + @@ -157,7 +157,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { <{ComponentSelector} [data]="data" [primaryKey]="'ID'" width="100%" height="500px" [rowEditable]="true"> - + ``` @@ -169,7 +169,7 @@ const unitsInStockCellTemplate = (ctx: IgrCellTemplateContext) => { - + ``` @@ -225,7 +225,7 @@ constructor() { ```html - + @@ -425,23 +425,30 @@ RowEditable="true"> -個々の列の編集を有効にする必要はありません。 の `RowEditable` プロパティを使用すると、定義された `Field` プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の `Editable` 入力を **false** に設定するだけです。 +個々の列の編集を有効にする必要はありません。 プロパティを使用すると、定義された `Field` プロパティを持つすべての行 (主行を除く) が編集可能になります。特定の列の編集を無効にしたい場合は、その列の 入力を **false** に設定するだけです。 -```html -<{ComponentSelector} [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px" [rowEditable]="true"> - - - - - - - - - - - +```typescript +import { Component, ViewChild } from '@{Platform}/core'; +import { data } from './data'; +import { {ComponentName} } from 'igniteui-{Platform}'; + +@Component({ + selector: 'app-grid-row-edit', + styleUrls: [app-grid-row-edit.component.css], + templateUrl: 'app-grid-row-edit.component.html' +}) +export class {ComponentName}RowEditSampleComponent { + @ViewChild('gridRowEdit', { read: {ComponentName} }) public gridRowEdit: {ComponentName}; + + public data: any[]; + + constructor() { + this.data = data; + } +} + ``` @@ -451,27 +458,27 @@ RowEditable="true"> ## 位置 -- オーバーレイのデフォルトの位置は編集モードで行の下にあります。 +- オーバーレイの既定位置は、編集モードの行の下です。 - 行の下にスペースがない場合、オーバーレイが行の上に表示されます。 -- 一番上または下に表示されると、オーバーレイは閉じられるまでスクロール時にこの位置を保持します。 +- 一度表示されたオーバーレイ (上または下) は、閉じるまでスクロールしてもその位置を維持します。 ## 動作 -- 行が編集モードの場合、編集が継続します。同じ行のセルがクリックされたかどうか。 +- 行が編集モードのとき、同じ行内のセルをクリックすると編集は継続されます。 -- [完了] ボタンをクリックすると行編集を完了し、変更をデータソースまたはトランザクションへサブミットします。更に行が編集モードを完了します。 +- [完了] ボタンをクリックすると行編集が完了し、変更はデータ ソースまたはトランザクションに送信され、行は編集モードを終了します。 -- [キャンセル] ボタンがをクリックすると現在の行のすべての変更を元に戻し、行編集モードを終了します。 +- [キャンセル] ボタンをクリックすると、その行に対する現在の変更はすべて元に戻り、行は編集モードを終了します。 -- 行が編集モードにある場合、他の行のセルをクリックすると現在の行編集を終了し、行の新規の変更をサブミット ([完了] ボタンをクリックした場合と同じ) します。フォーカスのある新しいセルが編集可能かどうか、新しい行が編集モードに入るかどうか、セルが編集できない場合は前の行のみ編集モードを終了します。 +- 行が編集モードのときに別の行のセルをクリックすると、現在の行編集を終了し、変更を送信します ([完了] ボタンと同じ動作)。新しくフォーカスされたセルが編集可能であれば新しい行も編集モードに入ります。編集不可セルの場合は、前の行のみが編集モードを終了します。 -- 行が編集モードの時にグリッドがスクロールされると行が表示領域外になりますが、`{ComponentName}` は編集モードのままです。`{ComponentName}` をスクロールすると編集行は再度表示されますが編集行が編集モードのままになります。`{ComponentName}` 以外をクリックしたときにセルも編集モードに残ります。 +- 行が編集モードのまま表示領域外へスクロールされても、編集状態は維持されます。再び行が表示される位置までスクロールすると、その行は引き続き編集モードです。また、`{ComponentName}` の外側をクリックしてもセルは編集モードのままです。 - **ソート**、**フィルタリング**、**検索**、および**非表示**操作を実行すると、現在の行のすべての変更が元に戻され、行の編集モードを終了します。 -- **ページング**、**サイズ変更**、**ピン固定**、**移動**操作を実行すると、編集モードを終了して最新の値を送信します。 +- **ページング**、**サイズ変更**、**ピン固定**、**移動**操作を実行すると、編集モードを終了して最新値を送信します。 - 編集した各セルは行編集が終了するまで変更スタイルを取得します。`{ComponentName}` がトランザクションで提供されない場合の動作です。トランザクションが有効な場合、すべての変更がコミットされるまでセル編集スタイルが適用されます。 @@ -479,15 +486,15 @@ RowEditable="true"> - ENTER と F2 で行編集モードに入ります -- ESC で行編集モードを終了し、行の編集モード時に変更されたいずれのセルの変更もサブミットしません +- ESC で行編集モードを終了し、編集中に行ったセル変更は送信されません -- TAB - 行の編集可能なセルから次のセルへフォーカスを移動、右端の編集可能なセルから [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンからのナビゲーションは現在の編集行内で編集可能なセルへ移動します。 +- TAB は、行内の編集可能セル間でフォーカスを移動し、右端セルの次は [キャンセル] と [完了] ボタンへ移動します。[完了] ボタンの次は現在編集中の行の左端の編集可能セルへ移動します。 ## 機能の統合 -- すべてのデータ変更操作は行変更操作を終了し、現在の行の変更をサブミットします。ソート、グループの変更、フィルタリング条件、ページングなどが含まれます。 +- データを変更する操作を行うと、行編集は終了し、現在の行の変更が送信されます。これにはソート、グループ化条件の変更、フィルタリング条件の変更、ページングなどが含まれます。 -- 行編集が終了した後に集計が更新されます。同様にソートやフィルタリングなどの他の機能が有効になります。 +- 行編集が完了すると集計も更新されます。ソートやフィルタリングなど他の機能にも同様に反映されます。 - グループ行の展開と縮小は現在の行の編集を終了しません。 @@ -498,7 +505,7 @@ RowEditable="true"> ### テキストのカスタマイズ -テンプレート化を使用した行編集オーバーレイのテキストのカスタマイズが可能です。 +テンプレートを使って、行編集オーバーレイのテキストをカスタマイズできます。 `RowChangesCount` プロパティが公開されて変更されたセルのカウントを保持します。 @@ -508,23 +515,26 @@ RowEditable="true"> Changes: {{rowChangesCount}} - ``` - -```razor +``` +```javascript +igRegisterScript("RowEditTextTemplate", (ctx) => { + var html = window.igTemplating.html; + return html`
+ Changes: ${ctx.implicit} +
`; +}, false); ``` - -```ts +```ts +public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => { + return html`Changes: ${ctx.implicit}`; +} ``` - - - -```tsx @@ -541,12 +551,12 @@ const rowEditTextTemplate = (ctx: IgrGridRowEditTextTemplateContext) =>{ -### Customizing Buttons +### ボタンのカスタマイズ -Customizing the buttons of the row editing overlay also possible via templating. +テンプレートを使用して、行編集オーバーレイのボタンもカスタマイズできます。 -If you want the buttons to be part of the keyboard navigation, then each on of them should have the `RowEditTabStopDirective`. +ボタンをキーボード ナビゲーション対象に含める場合は、それぞれに `RowEditTabStopDirective` を付与してください。 @@ -601,36 +611,36 @@ const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => { -## Styling +## スタイリング -Using the [{ProductName} Theme Library](themes/index.mdx), we can greatly alter the Row Editing overlay. +[{ProductName} Theme Library](themes/index.mdx) を使用すると、行編集オーバーレイの見た目を大きく変更できます。 -The Row Editing overlay is a composite element - its UI is comprised of a couple of other components: +行編集オーバーレイは複合要素で、UI は複数のコンポーネントで構成されています。 -- [igx-banner](banner.mdx) in order to render its contents -- [igx-button](button.mdx)s are rendered in the default template (for the `Done` and `Cancel` buttons). +- [igx-banner](banner.mdx): コンテンツの表示に使用 +- [igx-button](button.mdx): 既定テンプレート内の `Done` / `Cancel` ボタンに使用 -In the below example, we will make use of those two components' styling options, ([button styling](button.mdx#styling) & [banner-styling](../banner.mdx#styling)), to customize the experience of our `{ComponentName}`'s Row Editing. +次の例では、これら 2 つのコンポーネントのスタイル機能 ([button styling](button.mdx#styling) と [banner-styling](../banner.mdx#styling)) を利用して、`{ComponentName}` の行編集をカスタマイズします。 -We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.mdx#styling). +さらに、現在のセルのエディターと背景にもスタイルを適用して、視認性を高めます。セルのスタイル設定についてはこの[トピック](cell-editing.mdx#styling)を参照してください。 -### Import Theme +### テーマのインポート -The easiest way to style the Row Editing banner is to define styles in our `app`'s global style file (typically `styles.scss`). -The first thing we need to do is import the `themes/index` file - this gives us access to all the powerful tools of the {ProductName} Sass framework: +行編集バナーをスタイル設定する最も簡単な方法は、`app` のグローバル スタイル ファイル (通常は `styles.scss`) にスタイルを定義することです。 +まず `themes/index` ファイルをインポートします。これで {ProductName} Sass フレームワークの各種機能を利用できます。 ```scss @use "igniteui-{Platform}/theming" as *; -// IMPORTANT: Prior to {ProductName} version 13 use: +// 重要: {ProductName} 13 より前のバージョンでは次を使用: // @import '~igniteui-{Platform}/lib/core/styles/themes/index'; ``` -Once we've imported the themes file, we can create custom themes. +テーマ ファイルをインポートしたら、カスタム テーマを作成できます。 -#### Define the Theme +#### テーマの定義 -We can now define a custom that will affect our Row Editing background and make use of one of the predefined palettes namely `$purple-palette` : +次に、 を定義して行編集の背景に適用します。ここでは定義済みパレットの `$purple-palette` を利用します。 ```scss $my-light-gray: #e3e3e3; @@ -642,25 +652,25 @@ We can now define a custom -If the component is using an [Emulated](themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid. -We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component: +コンポーネントが [Emulated](themes/styles.mdx#view-encapsulation) の ViewEncapsulation を使用している場合、グリッドをスタイル設定するには `::ng-deep` でカプセル化を通過する必要があります。 +コンポーネント外の要素へ影響しないよう、` :host` セレクター内で定義します。 ```scss @@ -673,14 +683,14 @@ We wrap the statement inside of a `:host` selector to prevent our styles from af } ``` -With the above syntax, our custom banner theme properly applies to the grid's Row Editing overlay. +上記の構文で、カスタム バナー テーマをグリッドの行編集オーバーレイへ正しく適用できます。 -### Custom Templates +### カスタム テンプレート -To further customize our Row Editing overlay, we can pass a custom template so we can style the `Done` and `Cancel` buttons separately: +行編集オーバーレイをさらにカスタマイズするには、カスタム テンプレートを渡して `Done` ボタンと `Cancel` ボタンを個別にスタイル設定できます。 ```html - + <{ComponentSelector}>
@@ -695,7 +705,7 @@ To further customize our Row Editing overlay, we can pass a custom template so w ``` -After we've defined our custom buttons, we can make use of the to style them. You can learn more about `igx-button` styling in this [topic](../button.mdx#styling). We can create a custom theme for our `Done` and `Cancel`: +カスタム ボタンを定義したら、 を使ってスタイルを適用できます。`igx-button` の詳細はこの[トピック](../button.mdx#styling)を参照してください。`Done` と `Cancel` 用に次のようなテーマを作成できます。 ```scss // custom.component.scss @@ -710,11 +720,11 @@ $button-theme: button-theme( } ``` -We scope our `@include` statement in `.custom-buttons` so that it is only applied to the `Done`and `Cancel` buttons. +`@include` は `.custom-buttons` に限定することで、`Done` と `Cancel` ボタンのみに適用されます。 -### Demo +### デモ -After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.mdx#styling). The result of all the combined styles can be seen below: +バナーとボタンのスタイル設定に加えて、[編集モードのセル](cell-editing.mdx#styling)にもカスタム スタイルを定義します。組み合わせた結果は次のサンプルで確認できます。 @@ -722,16 +732,16 @@ After styling the banner and buttons, we also define a custom style for [the cel -The sample will not be affected by the selected global theme from **Change Theme**. +このサンプルは **Change Theme** で選択したグローバル テーマの影響を受けません。 -## Styling +## スタイリング -In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.mdx). -In case you would like to change some of the colors, you need to set a class for the grid first: +定義済みテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx) を設定することでグリッドをさらにカスタマイズできます。 +色を変更したい場合は、まずグリッドにクラスを設定します。 ```html @@ -751,7 +761,7 @@ In case you would like to change some of the colors, you need to set a class for ``` -Then set the related CSS properties for that class: +続いて、そのクラスに対して関連する CSS プロパティを設定します。 ```css .grid { @@ -760,42 +770,42 @@ Then set the related CSS properties for that class: } ``` -### Demo +### デモ -## Known Issues and Limitations +## 既知の問題と制限事項 -- When the grid has no set and remote data scenarios are enabled (when paging, sorting, filtering, scrolling trigger requests to a remote server to retrieve the data to be displayed in the grid), a row will lose the following state after a data request completes: +- グリッドに が設定されておらず、かつリモート データ シナリオが有効な場合 (ページング、ソート、フィルタリング、スクロールによりリモート サーバーへのデータ要求が発生する場合)、データ要求完了後に行の次の状態が失われます。 -- Row Selection -- Row Expand/collapse -- Row Editing -- Row Pinning +- 行選択 +- 行の展開/折りたたみ +- 行編集 +- 行のピン固定 -## API References +## API リファレンス -## Additional Resources +## その他のリソース -- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.mdx) +- [igxGrid で CRUD 操作を構築](/general/how-to/how-to-perform-crud.mdx) -- [{ComponentTitle} Editing](editing.mdx) -- [{ComponentTitle} Transactions](batch-editing.mdx) +- [{ComponentTitle} 編集](editing.mdx) +- [{ComponentTitle} トランザクション](batch-editing.mdx) -- [{ComponentTitle} Editing](editing.mdx) +- [{ComponentTitle} 編集](editing.mdx) -Our community is active and always welcoming to new ideas. +コミュニティに参加して新しいアイデアをご提案ください。 -- [{ProductName} **Forums**]({ForumsLink}) -- [{ProductName} **GitHub**]({GithubLink}) +- [{ProductName} **フォーラム (英語)**]({ForumsLink}) +- [{ProductName} **GitHub (英語)**]({GithubLink}) From 32bf6e144c2d802a534f9626b9c74d79b0fb8ba4 Mon Sep 17 00:00:00 2001 From: mkamiishi Date: Thu, 23 Jul 2026 14:30:18 +0900 Subject: [PATCH 2/3] docs: fix markdownlint issue in Japanese row editing topic --- .../src/content/jp/components/grids/_shared/row-editing.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index cba68d9228..f6e6f37cac 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -516,6 +516,7 @@ export class {ComponentName}RowEditSampleComponent { Changes: {{rowChangesCount}} ``` + From 2a030c438bbc1fd1f976c98fb534a6c8cbad370f Mon Sep 17 00:00:00 2001 From: mkamiishi Date: Thu, 23 Jul 2026 18:14:22 +0900 Subject: [PATCH 3/3] docs: refine Japanese row adding and editing topics --- .../src/content/jp/components/grids/_shared/row-adding.mdx | 6 +++--- .../src/content/jp/components/grids/_shared/row-editing.mdx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx index a75f9c3e5c..8f44950d66 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx @@ -674,12 +674,12 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => { これにより、リモートで生成された ID が常にローカル データに反映され、以降の更新/削除処理でも正しいレコード ID を対象にできます。 -## スタイリング +## スタイル設定 行追加 UI は、 の編集アクション ボタン、編集エディターとオーバーレイ、さらに新規追加行へスクロールするためのスナックバーで構成されています。これらのスタイル設定は、各トピックのガイドを参照してください。 -- [{ComponentTitle} 行の編集](row-editing.mdx#styling) -- [Snackbar](../../notifications/snackbar.mdx#styling) +- [{ComponentTitle} 行の編集](row-editing.mdx#スタイル設定) +- [Snackbar](../../notifications/snackbar.mdx#スタイル設定) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx index f6e6f37cac..6dc63d020e 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx @@ -612,7 +612,7 @@ const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => { -## スタイリング +## スタイル設定 [{ProductName} Theme Library](themes/index.mdx) を使用すると、行編集オーバーレイの見た目を大きく変更できます。 @@ -725,7 +725,7 @@ $button-theme: button-theme( ### デモ -バナーとボタンのスタイル設定に加えて、[編集モードのセル](cell-editing.mdx#styling)にもカスタム スタイルを定義します。組み合わせた結果は次のサンプルで確認できます。 +バナーとボタンのスタイル設定に加えて、[編集モードのセル](cell-editing.mdx#スタイル設定)にもカスタム スタイルを定義します。組み合わせた結果は次のサンプルで確認できます。 @@ -739,7 +739,7 @@ $button-theme: button-theme( -## スタイリング +## スタイル設定 定義済みテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx) を設定することでグリッドをさらにカスタマイズできます。 色を変更したい場合は、まずグリッドにクラスを設定します。