diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx index 8e15075bc5..a1625f3324 100644 --- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx @@ -480,6 +480,10 @@ const restoreGridState = () => { 1 - Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the `ColumnInit` event: + + + + ```html @@ -561,6 +565,9 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { ``` + + + ```html @@ -626,6 +633,10 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { + + + + ```html @@ -669,6 +680,10 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { + + + + 2 - Query the template view in the component using @ViewChild or @ViewChildren decorator. In the `ColumnInit` event handler, assign the template to the column property: diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx index bcf03869c5..f6d17e0bc5 100644 --- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx @@ -358,13 +358,13 @@ A good thing to note is that the Date Picker Component will always add a leading is used to format the picker's input when it is not focused. If no is provided, the picker will use the as its . -More information about these can be found in the format section. +More information about these can be found in the format section. ### Increment and decrement -The exposes and methods. Both of which come from the and can be used for incrementing and decrementing a specific of the currently set date. +The exposes and methods. Both of which come from the and can be used for incrementing and decrementing a specific of the currently set date. diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx index 341ef457de..76542f9b3c 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx @@ -16,17 +16,20 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro'; import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro'; import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; + # {Platform} {ComponentTitle} の行ドラッグ -{Platform} {ComponentTitle} の {ProductName} 行ドラッグ機能は簡単に構成でき、マウスを使用して行を新しい位置にドラッグ アンド ドロップすることで、グリッド内の行を再配置するために使用されます。これはルートの コンポーネントで初期化され、`RowDraggable` 入力を介して構成できます。 +{Platform} {ComponentTitle} の {ProductName} 行ドラッグ機能は簡単に構成でき、マウスを使用して行を新しい位置にドラッグ アンド ドロップすることで、グリッド内の行を再配置するために使用されます。これはルートの コンポーネントで初期化され、 入力を介して構成できます。 ## {Platform} {ComponentTitle} 行ドラッグの例 + + ## 構成 - の行ドラッグを有効にするには、グリッドの `RowDraggable` を **true** に設定します。これが有効になると、行ドラッグ ハンドルが各行に表示されます。このハンドルは行ドラッグを開始するために使用できます。ドラッグ ハンドルをクリックしてボタンを押しながらカーソルを動かすと、グリッドの `RowDragStart` イベントが発生します。クリックをリリースすると、`RowDragEnd` イベントが発生します。 + の行ドラッグを有効にするには、グリッドの を **true** に設定するだけです。これが有効になると、行ドラッグ ハンドルが各行に表示されます。このハンドルを使用して行ドラッグを開始できます。ドラッグ ハンドルをクリックし、マウスボタンを押したまま**カーソルを移動する**と、グリッドの イベントが発生します。ドラッグ中にマウスボタンを離すと イベントが発生します。 ```html @@ -57,22 +60,22 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; -以下は、行ドラッグをサポートするための の設定方法と、ドロップイベントの適切な処理方法についてのチュートリアルです。 +以下は、行ドラッグをサポートするための の設定方法と、ドロップ イベントの適切な処理方法についてのチュートリアルです。 -In this example, we'll handle dragging a row from a grid to a designated area and, when dropping it, removing it from the grid. +この例では、グリッドから指定した領域に行をドラッグし、ドロップ時にグリッドから削除する処理を行います。 -In this example, we'll handle dragging a row from one grid to another, removing it from the first data source and adding it to the second. +この例では、あるグリッドから別のグリッドへ行をドラッグし、最初のデータ ソースから削除して 2 番目のデータ ソースに追加する処理を行います。 -### ドロップエリア +### ドロップ エリア -行ドラッグを簡単に有効にできました。次は行ドロップを処理する方法を設定する必要があります。 -[Drop ディレクティブ](../drag-drop.mdx)を使用して、行をドロップする場所を定義できます。 +行ドラッグの有効化は簡単でしたが、次は行のドロップを処理する方法を設定する必要があります。 +[`Drop` ディレクティブ](../drag-drop.mdx)を使用して、行をドロップする場所を定義できます。 はじめに、アプリ モジュールに `DragDropModule` をインポートする必要があります。 @@ -88,35 +91,22 @@ import { ..., IgxDragDropModule } from 'igniteui-angular'; -### ドロップ エリア イベント ハンドラー +### ドロップ エリア -テンプレートでドロップ領域を定義したら、コンポーネントの **.ts** ファイルで `IgxDrop` の ENTER、`Leave` および `Dropped` イベントを宣言する必要があります。 +はじめに、`DragDropModule` を登録する必要があります。 ```typescript -export class {ComponentName}RowDragComponent { - public onEnterAllowed(args) { - this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); - } - - public onLeaveAllowed(args) { - this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); - } - - private changeGhostIcon(ghost, icon: string) { - if (ghost) { - const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); - if (currentIcon) { - currentIcon.innerText = icon; - } - } - } -} +import { IgcDragDropModule } from 'igniteui-webcomponents'; +// ... +ModuleManager.register( + IgcDragDropModule +); ``` -はじめに、ENTER と `Leave` ハンドラーを見てみましょう。これらのメソッドでは、ドラッグの **ghost** のアイコンを変更して、行をドロップできる領域の上にあることをユーザーに示すことができます。 +次に、テンプレートでディレクティブのセレクターを使用してドロップ エリアを定義します。 ```html @@ -130,7 +120,7 @@ export class {ComponentName}RowDragComponent { -In this case, our drop-area will be a whole second grid where we'll drop the rows. +この場合、ドロップ エリアは行をドロップする 2 つ目のグリッド全体になります。 ```html ``` -Since the grid will initially be empty, we also define a template that will be more meaningful to the user: +グリッドは最初は空になるため、ユーザーにとってよりわかりやすいテンプレートも定義します。 ```html @@ -151,7 +141,7 @@ Since the grid will initially be empty, we also define a template that will be m -In this case, our drop-area will be a whole second grid where we'll drop the rows. +この場合、ドロップ エリアは行をドロップする 2 つ目のグリッド全体になります。 ```html @@ -182,36 +172,49 @@ public dragHereTemplate = (ctx: IgcGridEmptyTemplateContext) => { -**changeGhostIcon** **private** メソッドは、ドラッグ ゴースト内のアイコンを変更するだけです。メソッドのロジックは、アイコンを含む要素を検索し (ドラッグインジケーターコンテナに適用される **igx-grid__drag-indicator** クラスを使用)、要素の内部テキストを渡されたものに変更します。 -アイコン自体は [**material** フォント セット](https://material.io/tools/icons/)からのもので、別の列挙型で定義されています。 + イベントの `Animation` パラメーターを使用すると、ドロップ不可の領域に行がドロップされたときにアニメーションを有効にできます。true に設定すると、ドロップ不可の領域にドロップされた場合、ドラッグされた行は元の位置にアニメーションで戻ります。 -次に、ユーザーが実際にドロップ領域内に行をドロップしたときに何が起こるかを定義する必要があります。 +次のようにアニメーションを有効にできます。 ```typescript -enum DragIcon { - DEFAULT = 'drag_indicator', - ALLOW = 'remove' +export class {ComponentName}RowDragComponent { + + public onRowDragEnd(args) { + args.animation = true; + } + } ``` -### ドラッグ ゴーストのテンプレート化 +### ドロップ エリア イベント ハンドラー -ドラッグ ゴーストは、`{ComponentSelector}` の本体内の `` に適用される `RowDragGhost` ディレクティブを使用してテンプレート化できます。 +テンプレートでドロップ エリアを定義したら、コンポーネントの **.ts** ファイルで `IgxDrop` の ENTER、`Leave` および `Dropped` イベントのハンドラーを宣言する必要があります。 -以下は、行ドラッグと複数選択を有効にした `{ComponentName}` で確認できる設定の結果です。以下のデモでは、現在ドラッグされている行の数を示します。 +まず、ENTER と `Leave` ハンドラーを見てみましょう。これらのメソッドでは、行をドロップできる領域の上にあることをユーザーに示すために、ドラッグの **ghost** のアイコンを変更するだけです。 -```html -<{ComponentSelector}> - -
- arrow_right_alt -
- - +```typescript +export class {ComponentName}RowDragComponent { + public onEnterAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.ALLOW); + } + + public onLeaveAllowed(args) { + this.changeGhostIcon(args.drag.ghostElement, DragIcon.DEFAULT); + } + + private changeGhostIcon(ghost, icon: string) { + if (ghost) { + const currentIcon = ghost.querySelector('.igx-grid__drag-indicator > igx-icon'); + if (currentIcon) { + currentIcon.innerText = icon; + } + } + } +} ``` -The **changeGhostIcon** **private** method just changes the icon inside of the drag ghost. The logic in the method finds the element that contains the icon (using the **igx-grid__drag-indicator** class that is applied to the drag-indicator container), changing the element's inner text to the passed one. -The icons themselves are from the [**material** font set](https://material.io/tools/icons/) and are defined in a separate **enum**: +**changeGhostIcon** **private** メソッドは、ドラッグ ゴースト内のアイコンを変更するだけです。このメソッドのロジックは、アイコンを含む要素を検索し (ドラッグ インジケーター コンテナーに適用される **igx-grid__drag-indicator** クラスを使用)、その要素の内部テキストを渡された値に変更します。 +アイコン自体は [**material** フォント セット](https://material.io/tools/icons/) のもので、別の **enum** で定義されています。 ```typescript @@ -231,7 +234,7 @@ enum DragIcon { ``` -Next, we have to define what should happen when the user actually drops the row inside of the drop-area. +次に、ユーザーが実際にドロップ エリア内に行をドロップしたときの動作を定義する必要があります。 ```typescript @@ -245,7 +248,7 @@ export class {ComponentName}RowDragComponent { } ``` -Once the row is dropped, we just call the row's `Delete` method +行がドロップされたら、行の `Delete` メソッドを呼び出すだけです @@ -262,9 +265,9 @@ export class {ComponentName}RowDragComponent { ``` -We define a reference to each of our grids via the **ViewChild** decorator and the handle the drop as follows: -- add a row to the `TargetGrid` that contains the data of the row being dropped -- remove the dragged row from the `SourceGrid` +**ViewChild** デコレーターを使用して各グリッドへの参照を定義し、次のようにドロップを処理します。 +- ドロップされた行のデータを含む行を `TargetGrid` に追加する +- ドラッグされた行を `SourceGrid` から削除する @@ -291,25 +294,20 @@ export class {ComponentName}RowDragComponent { -When using row data from the event arguments (**args.dragData.data**) or any other row property, note that the entire row is passed in the arguments as a reference, which means that you must clone the data you need, if you want to distinguish it from the one in the source grid. +イベント引数の行データ (**args.dragData.data**) やその他の行プロパティを使用する場合、行全体が参照として引数に渡されることに注意してください。そのため、ソース グリッド内のデータと区別したい場合は、必要なデータを複製する必要があります。 -### デモ +### ドラッグ ゴーストのテンプレート化 -ドラッグ ゴーストは各グリッド レベルでテンプレート化できます。複数のゴース トテンプレートを作成できて、または単一の行アイランドにのみテンプレートを提供できます。 +ドラッグ ゴーストは、`{ComponentSelector}` の本体内の `` に適用される `RowDragGhost` ディレクティブを使用してテンプレート化できます。 ```html <{ComponentSelector}> - +
arrow_right_alt
- - - - - ``` @@ -335,12 +333,12 @@ public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { -The result of the configuration can be seem below in a with row dragging and multiple selection enabled. The demo shows the count of the currently dragged rows: +以下は、行ドラッグと複数選択を有効にした での設定結果です。デモでは、現在ドラッグされている行数が表示されます。 -#### ドラッグ アイコンのテンプレート化 +#### デモ -The drag ghost can be templated on every grid level, making it possible to have multiple ghost templates or to only provide a template for a single row island. +ドラッグ ゴーストはすべてのグリッド レベルでテンプレート化できるため、複数のゴースト テンプレートを用意したり、単一の行アイランドにのみテンプレートを提供したりすることができます。 ```html <{ComponentSelector}> @@ -363,9 +361,10 @@ The drag ghost can be templated on every grid level, making it possible to have -### ドロップ領域のスタイル設定 -ドロップ ハンドラが正しく設定されたら、あとはドロップ領域をスタイル設定します。 +### ドラッグ アイコンのテンプレート化 + +ドラッグ ハンドル アイコンは、グリッドの `DragIndicatorIconTemplate` を使用してテンプレート化できます。作成中の例では、デフォルトのアイコン (**drag_indicator**) を **drag_handle** に変更してみましょう。 @@ -453,33 +452,18 @@ private RenderFragment dragIndicatorIconTemplate = -```css -.drop-area { - width: 160px; - height: 160px; - background-color: #d3d3d3; - border: 1px dashed #131313; - display: flex; - justify-content: center; - align-items: center; - flex-flow: column; - text-align: center; - margin: 8px; -} - -:host { - display: flex; - justify-content: center; - align-items: center; - flex-flow: column; - width: 100%; -} - +```html +<{ComponentSelector}> + + drag_handle + + ``` + ```tsx const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => { @@ -492,8 +476,8 @@ const dragIndicatorIconTemplate = (ctx: IgrGridEmptyTemplateContext) => { <{ComponentSelector} rowDraggable={true} dragIndicatorIconTemplate={dragIndicatorIconTemplate}> -``` +``` @@ -507,13 +491,13 @@ private RenderFragment dragIndicatorIconTemplate = ; }; - ``` + -結果は以下のデモで確認できます。 +新しいアイコン テンプレートを設定したら、`ChangeIcon` メソッドで正しく変更されるように、**DragIcon enum** の **DEFAULT** アイコンも調整する必要があります。 ```typescript enum DragIcon { @@ -526,9 +510,9 @@ enum DragIcon { -### Styling the Drop Area +### ドロップ エリアのスタイル設定 -Once our drop handlers are properly configured, all that's left is to style our drop area a bit: +ドロップ ハンドラーが正しく設定されたら、あとはドロップ エリアを少しスタイル設定するだけです。 ```css .drop-area { @@ -553,14 +537,14 @@ Once our drop handlers are properly configured, all that's left is to style our } ``` -The result can be seen in the demo below: +結果は以下のデモで確認できます。 -ドロップ ハンドラが正しく設定されたら、準備完了です。 +ドロップ ハンドラーが正しく設定されたら、準備完了です。 -以下は、設定の結果です。 +設定の結果は以下で確認できます。 @@ -568,33 +552,32 @@ The result can be seen in the demo below: + + ## アプリケーション デモ -### Using Row Drag Events +### 行ドラッグ イベントの使用 -The following demo demonstrates how to use row drag event information to change both states of a custom component, where the row is dropped, and the source grid itself -. -Try to drag moons from the grid and drop them to their corresponding planets. Row drag ghost background is dynamically changed, depending on the hovered planet. If you succeed then the row in the grid will be selected and dragging will be disabled for it. Clicking planets will give you useful information. +以下のデモは、行ドラッグ イベント情報を使用して、行がドロップされたカスタム コンポーネントの状態とソース グリッド自体の状態の両方を変更する方法を示しています。 +グリッドから月をドラッグし、対応する惑星にドロップしてみてください。行ドラッグ ゴーストの背景は、ホバーしている惑星に応じて動的に変更されます。成功すると、グリッド内のその行が選択され、その行のドラッグは無効になります。惑星をクリックすると役立つ情報が表示されます。 - + -The classes applied to the row drag ghost, used in the demo above, are using ::ng-deep modifier, because row drag is an internal grid feature and cannot be accessed on application level, due to the CSS encapsulation. +上記のデモで使用されている行ドラッグ ゴーストに適用されるクラスは `::ng-deep` 修飾子を使用しています。これは、行ドラッグが内部的なグリッド機能であり、CSS カプセル化のためにアプリケーション レベルではアクセスできないためです。 -### 行ドラッグ イベントの使用 +### 行の並べ替えデモ -以下のデモは、行ドラッグ イベント情報を使用して、行がドロップされたカスタム コンポーネントとソース グリッド自体の両方の状態を変更する方法を示しています。 -. -グリッドから月をドラッグして、それらを対応する惑星にドロップしてみてください。行ドラッグ ゴーストの背景は、ホバーされた惑星に応じて動的に変更されます。成功するとグリッド内の行が選択され、ドラッグは無効になります。惑星をクリックすると役に立つ情報が得られます。 - +グリッドの行ドラッグ イベントと `Drop` ディレクティブを使用すると、行をドラッグして並べ替えられるグリッドを作成できます。 +すべての操作はグリッドの本体の _内側_ で行われるため、`Drop` ディレクティブはそこにアタッチする必要があります。 ```html @@ -604,9 +587,7 @@ The classes applied to the row drag ghost, used in the demo above, are using ::n - -上記のデモで使用されている行ドラッグ ゴーストに適用されるクラスは ::ng-deep 修飾子を使用しています。これは、行ドラッグが内部グリッド機能であり、CSS カプセル化のためにアプリケーション レベルでアクセスできないためです。 - +グリッドの行ドラッグ イベントを使用すると、行をドラッグして並べ替えられるグリッドを作成できます。 @@ -617,7 +598,7 @@ The classes applied to the row drag ghost, used in the demo above, are using ::n ```ts constructor() { - var hGrid = this.grihGridd = document.getElementById('hGrid') as IgcHierarchicalGridComponent; + var hGrid = this.hGrid = document.getElementById('hGrid') as IgcHierarchicalGridComponent; hGrid.addEventListener("rowDragEnd", this.webHierarchicalGridReorderRowHandler) } ``` @@ -627,7 +608,7 @@ constructor() { ```tsx - + ``` @@ -781,28 +762,28 @@ function getCurrentRowIndex(rowList, cursorPosition) { -Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered. +グリッドに が指定されていることを確認してください。行を正しく並べ替えるには、一意の識別子が必要です。 -Once is enabled and a drop zone has been defined, you need to implement a simple handler for the drop event. When a row is dragged, check the following: + が有効になり、ドロップ エリアが定義されたら、ドロップ イベント用の簡単なハンドラーを実装する必要があります。行がドラッグされたときは、次を確認します。 -- Was the row dropped inside of the grid? -- If so, on which **other** row was the dragged row dropped? -- Once you've found the **target** row, swap the records' places in the `Data` array +- 行はグリッド内にドロップされたか +- ドロップされた場合、ドラッグされた行が**別の**どの行にドロップされたか +- **ターゲット**行が見つかったら、`Data` 配列内でレコードの位置を入れ替える -- Is the row expanded? If so, collapse it. -- Was the row dropped inside of the grid? -- If so, on which **other** row was the dragged row dropped? -- Once you've found the **target** row, swap the records' places in the `Data` array -- Was the row initially selected? If so, mark it as selected. +- 行は展開されているか。展開されている場合は折りたたむ +- 行はグリッド内にドロップされたか +- ドロップされた場合、ドラッグされた行が**別の**どの行にドロップされたか +- **ターゲット**行が見つかったら、`Data` 配列内でレコードの位置を入れ替える +- 行は元々選択されていたか。選択されていた場合は、選択済みとしてマークする -Below, you can see this implemented: +以下は、その実装例です。 @@ -1232,9 +1213,11 @@ public getCurrentRowIndex(rowList: any[], cursorPosition) { ``` + + ```razor - + ``` ```javascript @@ -1270,33 +1253,35 @@ function getCurrentRowIndex(rowList, cursorPosition) { -With these few easy steps, you've configured a grid that allows reordering rows via drag/drop! You can see the above code in action in the following demo. +これらの簡単な手順で、ドラッグ アンド ドロップによる行の並べ替えが可能なグリッドを設定できました。上記のコードの動作は、以下のデモで確認できます。 -Holding onto the drag icon will allow you to move a row anywhere in the grid: +マウスボタンでドラッグ アイコンを押したままの状態でドラッグすると、行をグリッド内の任意の場所に移動できます。 -Notice that we also have row selection enabled and we preserve the selection when dropping the dragged row. +行選択も有効になっており、ドラッグされた行をドロップしたときに選択状態が保持されることに注目してください。 + + -### Improving UX in Row Drag Scenarios +### 行ドラッグ シナリオでの UX の改善 -Being able to obtain the row index which is currently below the cursor provides you with the opportunity to build rich custom functionalities and to improve the UX of your application. For example, you can change the drag ghost or display a drop indicator, based on the position of the dragged row over the grid. Another useful behavior that you can achieve that way is to scroll the grid up or down while dragging a row, when reaching the border of the grid. +現在カーソルの下にある行のインデックスを取得できることで、リッチなカスタム機能を構築し、アプリケーションの UX を向上させる機会が得られます。たとえば、グリッド上でのドラッグされた行の位置に基づいて、ドラッグ ゴーストを変更したり、ドロップ インジケーターを表示したりできます。また、行をドラッグしてグリッドの端に達したときに、グリッドを上下にスクロールするという便利な動作を実現することもできます。 -Below you can find example snippets of a couple of custom implementations you can achieve by knowing the row's position. +以下では、行の位置を把握することで実現できる、いくつかのカスタム実装のサンプル スニペットを紹介します。 -#### Changing the Drag Ghost based on Cursor Position +#### カーソル位置に基づいてドラッグ ゴーストを変更する -In the snippets below you see how you can change the text inside the drag ghost to display the name of the hovered row. +以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーしている行の名前を表示する方法を示します。 -First, you specify a template which you'd like to use for the drag ghost. The `DropName` property will dynamically change, getting the name of the row over which the cursor is hovering: +まず、ドラッグ ゴーストに使用するテンプレートを指定します。`DropName` プロパティは動的に変化し、カーソルがホバーしている行の名前を取得します。 ```html @@ -1312,7 +1297,7 @@ public rowDragGhostTemplate = (ctx: IgcGridRowDragGhostContext) => { } ``` -Then, define a method that returns the instance of the row you're over (similar to the one used in the [row reordering demo](#row-reordering-demo)): +次に、カーソルが置かれている行のインスタンスを返すメソッドを定義します ([行の並べ替えデモ](#行の並べ替えデモ)で使用したものと同様です)。 ```typescript class MyRowGhostComponent { @@ -1344,9 +1329,9 @@ class MyRowGhostComponent { } ``` -Finally, we create a method that will be used to handle the `DragMove` event (emitted for the dragged row). The method will change the value of the property used in the `RowDragGhost` template and force a rerender. +最後に、(ドラッグされた行に対して発生する) `DragMove` イベントを処理するメソッドを作成します。このメソッドは、`RowDragGhost` テンプレートで使用されるプロパティの値を変更し、強制的に再レンダリングします。 -We want to subscribe to the `DragMove` event only of the specific row we're dragging and unsub from it (to prevent memory leaks) each time a row is dropped. +ドラッグしている特定の行の `DragMove` イベントのみを購読し、行がドロップされるたびに (メモリ リークを防ぐために) 購読を解除する必要があります。 ```typescript class MyRowGhostComponent { @@ -1392,14 +1377,14 @@ class MyRowGhostComponent { } ``` -#### Displaying a Drop Indicator based on Cursor Position +#### カーソル位置に基づいてドロップ インジケーターを表示する -In the demo in the next section you see how you can display an indicator of where the dragged row would be dropped. You can customize this indicator as you like - it may be a placeholder row, placed at the position where the dragged row would be dropped, a border style indicating if the dragged row would be dropped above or below the currently hovered row, etc. +次のセクションのデモでは、ドラッグされた行がドロップされる位置を示すインジケーターを表示する方法を確認できます。このインジケーターは、ドラッグされた行がドロップされる位置に配置されるプレースホルダー行や、ドラッグされた行が現在ホバーしている行の上か下にドロップされるかを示す境界線スタイルなど、お好みでカスタマイズできます。 -In order to track the position of the cursor, we bind to the `DragMove` event of the `DragDirective` when we start dragging a row. +カーソルの位置を追跡するために、行のドラッグを開始したときに `DragDirective` の `DragMove` イベントにバインドします。 -Make sure that there is a specified for the grid! The logic needs an unique identifier for the rows so they can be properly reordered +グリッドに が指定されていることを確認してください。行を正しく並べ替えるには、一意の識別子が必要です ```typescript @@ -1463,11 +1448,11 @@ private changeHighlightedElement(newElement: HTMLElement) { } ``` -#### Scrolling the Grid on Row Drag +#### 行ドラッグ時のグリッドのスクロール -A very useful scenario is being able to scroll the grid when the dragged row reaches its' top or bottom border. This allows reordering rows outside of the current viewport when the number of rows in the grid requires a scrollbar. +ドラッグされた行が上端または下端の境界に達したときにグリッドをスクロールできると、非常に便利です。これにより、グリッド内の行数が多くスクロール バーが必要な場合でも、現在のビューポート外にある行を並べ替えることができます。 -Below you see an example of the two methods we use to check if we have reached the edge of the viewport and to scroll it if needed. The `IsGridScrolledToEdge` accepts one parameter - the direction we'd like to scroll the grid (1 for "Down", -1 for "Up") and returns **true** if we've reach the final row in that direction. The `ScrollGrid` method will attempt to scroll the grid in a direction (1 or -1), doing nothing if the grid is already at that edge. +以下は、ビューポートの端に達したかどうかを確認し、必要に応じてスクロールするために使用する 2 つのメソッドの例です。`IsGridScrolledToEdge` は、グリッドをスクロールしたい方向を示す 1 つのパラメーター (下方向は 1、上方向は -1) を受け取り、その方向の最終行に達している場合は **true** を返します。`ScrollGrid` メソッドは、指定した方向 (1 または -1) にグリッドをスクロールしようとしますが、グリッドがすでにその端にある場合は何も行いません。 ```typescript class MyGridScrollComponent { @@ -1496,9 +1481,9 @@ class MyGridScrollComponent { } ``` -We'll still be subscribing to the `DragMove` event of the specific row in the way we did in the previous example. Since `DragMove` is fired only when the cursor actually moves, we want to have a nice and simple way to auto-scroll the grid when the row is at one of the edges, but the user **does not** move the mouse. We'll an additional method which will setup an `Interval`, auto-scrolling the grid every **500ms**. +前の例と同様に、特定の行の `DragMove` イベントを購読します。`DragMove` はカーソルが実際に動いたときにのみ発生するため、行が端の 1 つにある状態でユーザーが**マウスを動かさない**場合でも、グリッドを自動スクロールできるシンプルな方法が必要です。そのために、`Interval` を設定し、**500ms** ごとにグリッドを自動スクロールする追加のメソッドを用意します。 -We create and subscribe to the `Interval` when the pointer reaches the grid's edge and we **unsubscribe** from that `Interval` every time the mouse moves or the row is dropped (regardless of cursor position). +ポインターがグリッドの端に達したときに `Interval` を作成して購読し、マウスが動くたび、または (カーソルの位置に関係なく) 行がドロップされるたびに、その `Interval` の購読を**解除**します。 ```typescript class MyGridScrollComponent { @@ -1533,10 +1518,10 @@ class MyGridScrollComponent { } ``` -Following is the example of both scenarios described above - showing a drop indicator and scrolling the viewport when border's edge is reached. +以下は、上記で説明した両方のシナリオ、つまりドロップ インジケーターの表示と、境界の端に達したときのビューポートのスクロールの例です。 - + @@ -1544,15 +1529,14 @@ Following is the example of both scenarios described above - showing a drop indi -## 行の並べ替えデモ +## 制限 -グリッドの行ドラッグ イベントと `Drop` ディレクティブを使用して、ドラッグよる行の並べ替えるが可能なグリッドを作成できます。 +現在、 に関する既知の制限事項はありません。 ## API リファレンス + +## その他のリソース +コミュニティは常に新しいアイデアを歓迎しています。 -
- -## カーソル位置に基づいてドラッグ ゴーストを変更する -以下のスニペットでは、ドラッグ ゴースト内のテキストを変更して、ホバーされた行の名前を表示する方法を示しています。 - -まず、ドラッグ ゴーストに使用するテンプレートを指定します。`DropName` プロパティは動的に変化し、カーソルが置かれている行の名前を取得します。 +- [{ProductName} **フォーラム**]({ForumsLink}) +- [{ProductName} **GitHub**]({GithubLink}) diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx index fbe3bc373f..325b510b27 100644 --- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx +++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx @@ -18,42 +18,66 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; # {Platform} {ComponentTitle} 状態保持 -{Platform} {ComponentTitle} の {ProductName} 状態保持機能を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 が {Platform} に適用されると、 および `SetState` メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。 + {Platform} {ComponentTitle} の {ProductName}{" "} + 状態保持機能を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 + が {Platform} {" "} + に適用されると、 + および + `SetState` + メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。 -{Platform} {ComponentTitle} の {ProductName} 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 が {Platform} に適用されると、、、 および メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。 + {Platform} {ComponentTitle} の {ProductName} 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 が {Platform} に適用されると、、 、 および メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。 -{Platform} {ComponentTitle} の {ProductName} 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 が {Platform} に適用されると、`GetStateAsStringAsync` および `ApplyStateFromStringAsync` メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の永続化を実現できます。 + {Platform} {ComponentTitle} の {ProductName}{" "} + 状態保持を使用すると、開発者はグリッドの状態を簡単に保存および復元できます。 + が {Platform} {" "} + に適用されると、`GetStateAsStringAsync` および `ApplyStateFromStringAsync` + メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。 ## サポートされる機能 - supports saving and restoring the state of the following features: + は、以下の機能の状態の保存および復元をサポートします。 - は、以下の機能の状態の保存および復元をサポートします。 +- **ソート** +- **フィルタリング** +- **高度なフィルタリング** +- **ページング** +- **セルの選択** +- **行の選択** +- **列の選択** +- **行のピン固定** +- **展開** +- **グループ化** +- **列** + - 複数列ヘッダー + - 列の順序 + - インターフェイスによって定義される列プロパティ -- **Sorting** -- **Filtering** -- **Advanced Filtering** -- **Paging** -- **CellSelection** -- **RowSelection** -- **ColumnSelection** -- **RowPinning** -- **Expansion** -- **GroupBy** -- **Columns** +- **行アイランド** + - 階層のすべての子グリッドの保存/復元機能 +- **ソート** +- **フィルタリング** +- **高度なフィルタリング** +- **ページング** +- **セルの選択** +- **行の選択** +- **列の選択** +- **行のピン固定** +- **展開** +- **グループ化** +- **列** - 複数列ヘッダー - 列の順序 - - `IColumnState` インターフェイスによって定義される列プロパティ。 - + - インターフェイスによって定義される列プロパティ @@ -65,20 +89,20 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - - - - - Pivot Configuration properties defined by the interface. - - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section. - - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.mdx#restoring-pivot-strategies) section. + - インターフェースで定義されるピボット構成プロパティ。 + - ピボット ディメンションおよび値関数は、アプリケーション レベルのコードで復元されます。詳細は[ピボット構成の復元](state-persistence.mdx#ピボット構成の復元)セクションを参照してください。 + - ピボットの行および列のストラテジも、アプリケーション レベルのコードで復元されます。詳細は[ピボットストラテジの復元](state-persistence.mdx#ピボットストラテジの復元)セクションを参照してください。 -- -- -- -- -- -- - - Pivot Configuration properties defined by the interface. - - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section. + - + - + - + - + - + - + - インターフェースで定義されるピボット構成プロパティ。 + - ピボット ディメンションおよび値関数は、アプリケーション レベルのコードで復元されます。詳細は[ピボット構成の復元](state-persistence.mdx#ピボット構成の復元)セクションを参照してください。 @@ -96,22 +120,25 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; - このメソッドは、シリアル化された JSON 文字列でグリッド状態を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。このメソッドは最初のオプションのパラメーター `Serialize` を受け取り、 が オブジェクトを返すか、シリアル化された JSON 文字列を返すかを決定します。 開発者は、機能名、または機能名を 2 番目の引数として持つ配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。 + - メソッドは、すべての状態情報を含むグリッドの状態を オブジェクトで返します。保存するには追加の手順が必要になる場合があります。 + メソッドは、すべての状態情報を含むグリッドの状態を オブジェクトで返します。保存するには追加の手順が必要になる場合があります。 は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。 開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。 + `GetStateAsStringAsync` は、シリアル化された JSON 文字列を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。 開発者は、引数として機能名を含む配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。空の配列では、デフォルトの状態オプションが使用されます。 + @@ -125,7 +152,7 @@ const gridState: IGridState = state.getState(false); // get the sorting and filtering expressions const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']); -``` +```` @@ -134,10 +161,10 @@ const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'fi <{ComponentSelector} id="grid"> -``` +```` ```typescript -var gridState = document.getElementById('gridState') as IgcGridStateComponent; +var gridState = document.getElementById("gridState") as IgcGridStateComponent; // get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API const state: IgcGridStateInfo = gridState.getState(); @@ -146,7 +173,10 @@ const state: IgcGridStateInfo = gridState.getState(); const stateString: string = gridState.getStateAsString(); // get the sorting and filtering expressions -const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); +const sortingFilteringStates: IgcGridStateInfo = gridState.getState([ + "sorting", + "filtering", +]); ``` @@ -174,15 +204,23 @@ const stateString: string = gridStateRef.current.getStateAsString([]); // get the sorting and filtering expressions const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']); -``` +```` -```html -<{ComponentSelector} id="grid"> - +```razor +<{ComponentSelector}> + + +@code { + // get all features` state in a serialized JSON string + string stateString = gridState.GetStateAsStringAsync(new string[0]); + + // get the sorting and filtering expressions + string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" }); +} ``` @@ -192,104 +230,76 @@ const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState([ - - The method accepts a object as argument and will restore the state of each feature found in the object or specified features as second argument. + - このメソッドは オブジェクトを引数として受け取り、オブジェクト内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。 - - The method accepts a serialized JSON string as argument and will restore the state of each feature found in the JSON string or specified features as second argument. + - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。 + -`SetState` - `SetState` メソッドは、シリアル化された JSON 文字列または `IGridState` オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。 +`ApplyStateFromStringAsync` - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。 ```typescript -var gridState = document.getElementById('gridState') as IgcGridStateComponent; - -// get an `IgcGridStateInfo` object, containing all features original state objects, as returned by the grid public API -const state: IgcGridStateInfo = gridState.getState(); - -// get all features` state in a serialized JSON string -const stateString: string = gridState.getStateAsString(); - -// get the sorting and filtering expressions -const sortingFilteringStates: IgcGridStateInfo = gridState.getState(['sorting', 'filtering']); - +state.setState(gridState); +state.setState(sortingFilteringStates) ``` -```tsx -<{ComponentSelector}> - - +```typescript +gridState.applyState(gridState); +gridState.applyStateFromString(gridStateString); +gridState.applyState(sortingFilteringStates) ``` - ```tsx -// get an `GridStateInfo` object, containing all features original state objects, as returned by the grid public API -const state: IgrGridStateInfo = gridStateRef.current.getState([]); - -// get all features` state in a serialized JSON string -const stateString: string = gridStateRef.current.getStateAsString([]); - -// get the sorting and filtering expressions -const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']); - +gridStateRef.current.applyState(gridState, []); +gridStateRef.current.applyStateFromString(gridStateString, []); +gridStateRef.current.applyState(sortingFilteringStates, []) ``` -```razor -<{ComponentSelector}> - - - -@code { - // get all features` state in a serialized JSON string - string stateString = gridState.GetStateAsStringAsync(new string[0]); - - // get the sorting and filtering expressions - string sortingFilteringStates = gridState.GetStateAsStringAsync(new string[] { "sorting", "filtering" }); -} +```csharp +gridState.ApplyStateFromStringAsync(gridStateString, new string[0]); +gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0]) ``` - - - このメソッドは引数として オブジェクトを受け取り、オブジェクト内で見つかった各フィーチャまたは 2 番目の引数として指定されたフィーチャの状態を復元します。 + +オブジェクトは、`IGridStateOptions` インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、`SetState` メソッドはその状態を復元しません。 - - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。 + オブジェクトは インターフェースを実装します。特定の機能の名前であるキーごとに、その機能の状態を追跡するかどうかを示すブール値があります。/ メソッドはこれらの機能の状態を戻り値に含めず、/ メソッドはその状態を復元しません。 -`ApplyStateFromStringAsync` - このメソッドはシリアル化された JSON 文字列を引数として受け取り、JSON 文字列内で見つかった各機能の状態、または 2 番目の引数として指定された機能を復元します。 + オブジェクトは インターフェースを実装します。特定の機能の名前であるキーごとに、その機能の状態を追跡するかどうかを示すブール値があります。`GetStateAsStringAsync` メソッドはこれらの機能の状態を戻り値に含めず、`ApplyStateFromStringAsync` メソッドはその状態を復元しません。 ```typescript -state.setState(gridState); -state.setState(sortingFilteringStates) +public options = { cellSelection: false, sorting: false }; ``` -```typescript -gridState.applyState(gridState); -gridState.applyStateFromString(gridStateString); -gridState.applyState(sortingFilteringStates) +```html +<{ComponentSelector} [igxGridState]="options"> + ``` -```tsx -gridStateRef.current.applyState(gridState, []); -gridStateRef.current.applyStateFromString(gridStateString, []); -gridStateRef.current.applyState(sortingFilteringStates, []) +```typescript +gridState.options = { cellSelection: false, sorting: false }; ``` @@ -303,24 +313,78 @@ gridStateRef.current.applyState(sortingFilteringStates, []) ```csharp -gridState.ApplyStateFromStringAsync(gridStateString, new string[0]); -gridState.ApplyStateFromStringAsync(sortingFilteringStates, new string[0]) +gridState.Options = new IgbGridStateOptions + { + CellSelection = false, + Sorting = false + }; ``` - オブジェクトは、`IGridStateOptions` インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、`SetState` メソッドはその状態を復元しません。 +シンプルな単一の API を使用することで、わずか数行のコードで完全な状態の保持機能を実現できます。**以下のコードをコピーして貼り付けてください**。これにより、ユーザーが現在のページを離れるたびに、ブラウザーの `LocalStorage` オブジェクトにグリッドの状態が保存されます。ユーザーがメインページに戻ると、グリッドの状態が復元されます。目的のデータを取得するために複雑な高度なフィルタリングやソートの式を毎回設定する必要はもうありません。一度設定するだけで、以下のコードがユーザーのために残りの処理を行います。 ```typescript -public options = { cellSelection: false, sorting: false }; +@ViewChild(IgxGridStateDirective, { static: true }) +public state!: IgxGridStateDirective; + +public ngOnInit() { + this.router.events.pipe(take(1)).subscribe((event: NavigationStart) => { + this.saveGridState(); + }); +} + +public ngAfterViewInit() { + this.restoreGridState(); +} + +public saveGridState() { + const state = this.state.getState() as string; + window.sessionStorage.setItem('grid1-state', state); +} + +public restoreGridState() { + const state = window.sessionStorage.getItem('grid1-state'); + this.state.setState(state); +} + ``` -```html -<{ComponentSelector} [igxGridState]="options"> - +```typescript +constructor() { + window.addEventListener("load", () => { this.restoreGridState(); }); + window.addEventListener("beforeunload", () => { this.saveGridState(); }); +} + +// Using methods that work with IgcGridStateInfo object. +public saveGridState() { + const state = this.gridState.getState(); + window.localStorage.setItem('grid-state', JSON.stringify(state)); +} + +public restoreGridState() { + const state = window.localStorage.getItem('grid-state'); + if (state) { + this.gridState.applyState(JSON.parse(state)); + } +} + +// Or using string alternative methods. +public saveGridStateString() { + const state = this.gridState.getStateAsString(); + window.localStorage.setItem('grid-state', state); +} + +public restoreGridStateString() { + const state = window.localStorage.getItem('grid-state'); + if (state) { + this.gridState.applyStateFromString(state); + } +} ``` + @@ -374,8 +438,55 @@ const restoreGridState = () => { -```typescript -gridState.options = { cellSelection: false, sorting: false }; +```razor +@using IgniteUI.Blazor.Controls +@using Newtonsoft.Json +@implements IDisposable + +@inject IJSRuntime JS +@inject NavigationManager Navigation + +<{ComponentSelector} Rendered="OnGridRendered"> + + + + + + +@code { + protected override void OnAfterRender(bool firstRender) + { + Navigation.LocationChanged += OnLocationChanged; + } + + void OnLocationChanged(object sender, LocationChangedEventArgs e) + { + SaveGridState(); + } + + void IDisposable.Dispose() + { + // Unsubscribe from the event when our component is disposed + Navigation.LocationChanged -= OnLocationChanged; + } + + void OnGridRendered() + { + RestoreGridState(); + } + + async void SaveGridState() { + string state = gridState.GetStateAsStringAsync(new string[0]); + await JS.InvokeVoidAsync("window.localStorage.setItem", "grid-state", state); + } + + async void RestoreGridState() { + string state = await JS.InvokeAsync("window.localStorage.getItem", "grid-state"); + if (state) { + gridState.ApplyStateFromStringAsync(state, new string[0]); + } + } +} ``` @@ -383,10 +494,12 @@ gridState.options = { cellSelection: false, sorting: false }; ## 列の復元 - will not persist columns templates, column formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. Let's show how to do this for templated columns: + はデフォルトで列テンプレート、列フォーマッタなどを保持しません ([制限](state-persistence.mdx#制限) を参照)。これらの復元は、アプリケーションレベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。 - はデフォルトで列テンプレート、列フォーマッタなどを保持しません ([制限](state-persistence.mdx#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。 +1 - テンプレート参照変数（以下の例では `#activeTemplate`）を定義し、`ColumnInit` イベントのイベント ハンドラーを割り当てます: + + ```html @@ -467,6 +580,9 @@ function activeTemplate(ctx: { dataContext: IgrCellTemplateContext }) { ``` + + + ```html @@ -503,6 +619,7 @@ constructor() { isActive.bodyTemplate = this.activeTemplate; } this._bind(); + } public activeTemplate = (ctx: IgcCellTemplateContext) => { @@ -531,6 +648,9 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { + + + ```html @@ -551,7 +671,6 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { ``` - ```ts constructor() { var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent; @@ -573,8 +692,11 @@ public activeTemplate = (ctx: IgcCellTemplateContext) => { + + + -2 - Query the template view in the component using @ViewChild or @ViewChildren decorator. In the `ColumnInit` event handler, assign the template to the column property: +2 - @ViewChild または @ViewChildren デコレータを使用して、コンポーネントのテンプレート ビューをクエリします。`ColumnInit` イベント ハンドラーで、テンプレートを列の プロパティに割り当てます: ```typescript @ViewChild('activeTemplate', { static: true }) public activeTemplate: TemplateRef; @@ -588,7 +710,7 @@ public onColumnInit(column: IgxColumnComponent) { -2 - In the `ColumnInit` event handler, assign the template to the column property: +2 - `ColumnInit` イベント ハンドラーで、テンプレートを列の プロパティに割り当てます: @@ -635,9 +757,14 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) { ## ピボット構成の復元 - will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. The exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this: + は、デフォルトではピボット +ディメンション関数、値フォーマッタなどを保持しません +([制限](state-persistence.mdx#制限)を参照)。これらの復元は、アプリケーション +レベルのコードで実現できます。`{ComponentName}` +は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント +(`DimensionInit` と `ValueInit`) を公開します。以下はその方法です。 - は、デフォルトではピボット ディメンション関数、値フォーマッタなどを保持しません ([制限](state-persistence.mdx#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`{ComponentName}` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (`DimensionInit` と `ValueInit`) を公開します。以下はその方法です。 +- `DimensionInit` および `ValueInit` イベントのイベント ハンドラーを割り当てます。 ```html @@ -691,10 +818,10 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) { ``` -- `DimensionInit` および `ValueInit` イベントのイベント ハンドラーを割り当てます。 - > `DimensionInit` および `ValueInit` イベントは、 プロパティで定義された値とディメンションごとに発行されます。 +- `ValueInit` イベント ハンドラーで、カスタムのアグリゲーター、フォーマッタ、およびスタイルをすべて設定します: + ```typescript public onValueInit(value: IPivotValue) { @@ -828,7 +955,6 @@ igRegisterScript("OnValueInit", (args) => { }); } }, false); - ``` @@ -886,11 +1012,12 @@ public onDimensionInit(event: any) { ## 子グリッドの復元 子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合: -``` html + +```html ``` - + ```ts @@ -926,6 +1053,7 @@ gridState.options = { cellSelection: false, sorting: false, rowIslands: true }; Sorting = false, RowIslands = true }; + } ``` @@ -949,8 +1077,6 @@ state.applyState(state, ['filtering', 'rowIslands']); -Then the API will return the state for all grids (root grid and child grids) features excluding `Selection` and . If later on the developer wants to restore only the state for all grids, use: - ```csharp gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", "rowIslands" }); ``` @@ -964,14 +1090,13 @@ gridState.ApplyStateFromStringAsync(gridStateString, new string[] { "filtering", -## Restoring Pivot Strategies +## ピボットストラテジの復元 - will not persist neither remote pivot operations nor custom dimension strategies. - Restoring any of these can be achieved with code on application level. The exposes an event called `StateParsed` which can be used to additionally modify the grid state before it gets applied. Let's show how to do this: + は、リモート ピボット操作もカスタム ディメンション ストラテジも保持しません。これらの復元は、アプリケーション レベルのコードで実現できます。 は、グリッド状態が適用される前に追加で変更するために使用できる `StateParsed` というイベントを公開します。以下はその方法です。 -> `StateParsed` is only emitted when we are using with string argument. +> `StateParsed` は、 を文字列引数で使用している場合にのみ発行されます。 -- Set custom sorting strategy and custom pivot column and row dimension strategies: +- カスタムのソート ストラテジ、およびカスタムのピボット列・行ディメンション ストラテジを設定します: ```html @@ -1007,7 +1132,6 @@ public pivotConfigHierarchy: IPivotConfiguration = { ``` - ```ts public pivotConfiguration: IgcPivotConfiguration = { columnStrategy: IgcNoopPivotDimensionsStrategy.instance(), @@ -1038,7 +1162,7 @@ Add snippet for blazor ``` -- Restoring the state from the `LocalStorage` and applying the custom strategies looks like the following: +- `LocalStorage` から状態を復元し、カスタム ストラテジを適用する方法は次のとおりです: ```typescript @@ -1071,7 +1195,6 @@ public stateParsedHandler(ev: any) { ``` - ```razor Add snippet for blazor for restore state @@ -1079,23 +1202,20 @@ Add snippet for blazor for restore state - -## ピボット ストラテジの復元 +## 制限 - は、リモート ピボット操作もカスタム ディメンション ストラテジも保持しません。 - -これらの復元は、アプリケーション レベルのコードで実現できます。 は、`StateParsed` と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。 +- すべてのグリッド機能を一度に復元する場合（パラメーターを指定せずに `applyState` API を使用した場合）、ルート グリッドの列プロパティがデフォルトにリセットされることがあります。その場合は、その後に列または列選択機能を個別に復元してください: -```html - - +```typescript +state.applyState(gridState); +state.applyState(gridState.columns); +state.applyState(gridState.columnSelection); ``` @@ -1103,20 +1223,21 @@ Add snippet for blazor for restore state - method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the directive will ignore the columns , , , , , , and properties. + -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、 コンポーネントは、列の 、、、、、、 および プロパティを無視します。 -- method uses JSON.stringify() method to convert the original objects to a JSON string. JSON.stringify() does not support Functions, thats why the component will ignore the columns , , , , , , and properties. +- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、 コンポーネントは、列の 、、、、、、 および プロパティを無視します。 -> `StateParsed` は、文字列引数で `SetState` を使用している場合にのみ発行します。 +- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() は関数をサポートしないため、 ディレクティブは、ピボット ディメンションの 、ピボット値の 、、カスタム 関数、、およびピボット構成ストラテジ（ と ）を無視します。 @@ -1143,4 +1264,4 @@ Add snippet for blazor for restore state - [Pivot Grid Remote Operations](remote-operations.mdx) - \ No newline at end of file + diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx index 825e0c5a60..e757836051 100644 --- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx +++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx @@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro'; {ProductName} Date Picker は、手動でテキストを入力して日付を入力するか、ポップアップするカレンダー ダイアログから日付値を選択するために使用される機能豊富なコンポーネントです。軽量で使いやすい Date Picker を使用すると、ユーザーは、月、年、10 年の複数の表示オプションを使用して目的の日付に移動できます。また、最小および最大の日付制約や必須フィールドなどの一般的な検証プロパティもサポートしています。 -{ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダード ロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 +{ProductName} Date Picker コンポーネントを使用すると、ユーザーは月表示のカレンダー ドロップダウンまたは編集可能な入力フィールドから単一の日付を選択できます。{Platform} Date Picker は、カレンダーからのみ選択するための dialog モード、ロケール対応でカスタマイズ可能な日付の書式設定と検証の統合もサポートしています。 ## {Platform} Date Picker の例 @@ -93,7 +93,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule)); ```html -

Date

+ Date ``` @@ -168,7 +168,7 @@ const date = new Date(); ``` -文字列がピッカーにバインドされている場合は、**ISO 8601** 形式の文字列である必要があります。 +文字列をピッカーにバインドする場合は、**ISO 8601** 形式である必要があります。 ```html @@ -178,7 +178,9 @@ const date = new Date(); ### コンポーネントの投影 -prefix スロットと suffix スロットを使用すると、入力のメイン コンテンツの前後に異なるコンテンツを追加できます。 +prefix スロットと suffix スロットを使用すると、Input のメイン コンテンツの前後に異なるコンテンツを追加できます。コンテンツをスロットする際は、単純なテキスト、記号、絵文字を追加する場合は `` 要素を使用し、`prefix` スロットと `suffix` スロットにアイコンを追加する場合は [``](../layouts/icon.mdx) コンポーネントを使用することをお勧めします。 + +また、Input の下にヒントを表示する `helper-text` スロットも公開されています。`helper-text` スロットにコンテンツをスロットする場合は、`` 要素を使用することをお勧めします。 @@ -226,7 +228,7 @@ prefix スロットと suffix スロットを使用すると、入力のメイ #### トグル アイコンとクリア アイコンのカスタマイズ -カレンダーとクリア アイコンは、`calendar` スロットと `clear` スロットを使用してテンプレート化できます。 +カレンダーとクリア アイコンは、`calendar` スロットと `clear` スロットを使用してカスタマイズできます。記号や絵文字を追加する場合は `` 要素を使用し、`calendar` スロットと `clear` スロットにアイコンを追加する場合は [``](../layouts/icon.mdx) コンポーネントを使用することをお勧めします。 @@ -263,7 +265,7 @@ prefix スロットと suffix スロットを使用すると、入力のメイ #### カスタム アクション ボタン -ピッカーのアクション ボタンは、`actions` スロットを使用してテンプレート化できます。 +ピッカーのアクション ボタンは、`actions` スロットを使用してテンプレート化できます。最良の結果を得るには、`actions` スロットにコンテンツを追加する際に [``](../inputs/button.mdx) コンポーネントを使用することをお勧めします。 @@ -305,8 +307,8 @@ prefix スロットと suffix スロットを使用すると、入力のメイ |キー|説明| |----|-----------| -| ← | 1 文字を先頭に移動 | -| → | 1 文字を最後に移動 | +| ← | 左へ 1 文字移動 | +| → | 右へ 1 文字移動 | | HOME | 最初に移動 | | END | 最後に移動 | | CTRL / CMD + ← | 日付 / 時刻セクションの先頭に移動 - 現在のセクションまたは左側のセクション | @@ -314,13 +316,13 @@ prefix スロットと suffix スロットを使用すると、入力のメイ | 日付 / 時刻部分にフォーカス + ↓ | 日付 / 時刻部分を減少 | | 日付 / 時刻部分にフォーカス + ↑ | 日付 / 時刻部分を増加 | | CTRL / CMD + ; | 現在の日付 / 時刻をエディターの値として設定 | -| ESC | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 | +| ESC | カレンダーのポップアップを閉じて、入力フィールドにフォーカスを合わせます | ## 例 ### ダイアログ モード -DatePicker は `dialog` モードもサポートしています。 + も `dialog` モードをサポートしています。 @@ -351,14 +353,14 @@ DatePicker は `dialog` モードもサポートしています。 ### 表示および入力形式 - and are properties which can be set to make the picker's editor follow a specified format. The is locale based, so if none is provided, the picker will default to the one used by the browser. - および は、ピッカーのエディターが指定された形式に従うように設定できるプロパティです。 はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。 - is used to format the picker's input when it is not focused. If no is provided, the picker will use the as its . - 注意すべき点は、Date Picker コンポーネントが `date` と `month` の部分がない形式で提供された場合、それらの部分に常に先行ゼロを追加することです。例えば、`d/M/yy` は `dd/MM/yy` になります。これは編集中にのみ適用されます。 + は、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。 が指定されていない場合、ピッカーは をその として使用します。 + +これらの詳細については、 の形式セクションを参照してください。 + ### 増加および減少 @@ -513,7 +515,7 @@ igc-date-picker::part(year-inner selected) { } ``` - + ## API リファレンス