diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
index 9e775ba5b6..cdea83015b 100644
--- a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
+++ b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
@@ -9,29 +9,21 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular 地理ポリライン マップ
-Angular マップ コンポーネントでは、
を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。
+Angular マップ コンポーネントでは、
を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。
## Angular 地理ポリライン マップの例
-
とよく似ていますが、地理空間データがポリゴンではなくポリラインでレンダリングされる点が異なります。
## データ要件
-コントロール内の他の種類の地理的シリーズと同様に、
プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。
プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。
@@ -56,9 +48,6 @@ Angular マップ コンポーネントでは、
-
-
+
+
+
diff --git a/docs/angular/src/content/jp/components/geo-map.mdx b/docs/angular/src/content/jp/components/geo-map.mdx
index bfa904b58d..f7c12fab30 100644
--- a/docs/angular/src/content/jp/components/geo-map.mdx
+++ b/docs/angular/src/content/jp/components/geo-map.mdx
@@ -15,14 +15,13 @@ Ignite UI for Angular Map コンポーネントを使用すると、ビューモ
## Angular マップの例
-以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる
を使用して
にデータを表示する方法を示しています。
+以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる
を使用して
にデータを表示する方法を示しています。
-
Angular 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイム フィードを処理できるように数ミリ秒ごとにそれらを更新します。
-マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために
、またこれらの地理的位置の間の接続 (道路など) をプロットするために
を追加できます。
+マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために
、またこれらの地理的位置の間の接続 (道路など) をプロットするために
を追加できます。
Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。
@@ -32,8 +31,6 @@ Map は、マウス、キーボード、またはコードビハインドを使
[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-
## 依存関係
地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。
@@ -44,14 +41,9 @@ npm install --save igniteui-angular-charts
npm install --save igniteui-angular-maps
```
-
-
## モジュールの要件
-
には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。
-
-
-
+
には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。
```ts
// app.module.ts
@@ -69,9 +61,6 @@ import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
export class AppModule {}
```
-
-
-
```ts
import { AfterViewInit, Component, ViewChild } from "@angular/core";
import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
@@ -99,8 +88,6 @@ export class MapOverviewComponent implements AfterViewInit {
マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。
-
-
```html
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
index eec39b7423..8275b34ccb 100644
--- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
@@ -27,7 +27,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
```
-
をインポートする必要もあります。
+
をインポートする必要もあります。
```typescript
import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTemplateDirective } from 'igniteui-angular/grids/lite';
@@ -117,7 +117,7 @@ defineComponents(
## セル コンテキスト オブジェクト
-カスタム セル レンダラーには
オブジェクトがパラメータvとして渡され、以下のプロパティを持ちます。
+カスタム セル レンダラーには
オブジェクトがパラメータvとして渡され、以下のプロパティを持ちます。
```typescript
@@ -152,7 +152,7 @@ export interface IgxGridLiteCellTemplateContext
{
-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
index 86efb79a45..17031f636c 100644
--- a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
@@ -43,7 +43,7 @@ column.filteringCaseSensitive = true;
## フィルター モデル
-グリッド内のフィルター操作の構成要素は、次の構造を持つ です。
+グリッド内のフィルター操作の構成要素は、次の構造を持つ です。
```typescript
export interface FilterExpression = Keys> {
diff --git a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
index 397a6846ef..c70b0574cd 100644
--- a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
@@ -67,7 +67,7 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla
-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/grid/grid.mdx b/docs/angular/src/content/jp/components/grid/grid.mdx
index 6bf259cc73..cc7bffe6bc 100644
--- a/docs/angular/src/content/jp/components/grid/grid.mdx
+++ b/docs/angular/src/content/jp/components/grid/grid.mdx
@@ -250,7 +250,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
...
```
-上記のスニペットで暗示的に提供されたセル値への参照を取得します。データを表示し、セルの値にカスタム スタイル設定およびパイプ変換を適用する場合に使用します。ただし、 オブジェクトを以下のように使用するとより効果的です。
+上記のスニペットで暗示的に提供されたセル値への参照を取得します。データを表示し、セルの値にカスタム スタイル設定およびパイプ変換を適用する場合に使用します。ただし、 オブジェクトを以下のように使用するとより効果的です。
```html
@@ -294,7 +294,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
```
-テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。
+テンプレートで使用可能なプロパティの詳細については、 の API を参照してください。
### 列テンプレート API
@@ -689,9 +689,9 @@ export const EMPLOYEE_DATA = [
### フラット データの使用
-フラットデータバインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、 の プロパティを使用します。
+フラットデータバインディングのアプローチは既に説明したものと似ていますが、**セル値**の代わりに、 の プロパティを使用します。
-Angular グリッドはデータレコードを**レンダリング**、**操作**、**保存**するためのコンポーネントのため、**すべてのデータ レコード**へアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、 プロパティを使用します。
+Angular グリッドはデータレコードを**レンダリング**、**操作**、**保存**するためのコンポーネントのため、**すべてのデータ レコード**へアクセスすることで、それを処理する方法をカスタマイズすることができます。それには、 プロパティを使用します。
以下は使用するデータです。
@@ -822,8 +822,8 @@ platformBrowserDynamic()
-
-
-
--
--
+-
+-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/grid/groupby.mdx b/docs/angular/src/content/jp/components/grid/groupby.mdx
index eea6a2e787..30ba6bb92a 100644
--- a/docs/angular/src/content/jp/components/grid/groupby.mdx
+++ b/docs/angular/src/content/jp/components/grid/groupby.mdx
@@ -34,7 +34,7 @@ public ngOnInit() {
}
```
-グループ式は、 インターフェイスを実装します。
+グループ式は、 インターフェイスを実装します。
## Group By API
@@ -57,7 +57,7 @@ public ngOnInit() {
}
```
-ランタイムの式は プロパティの取得または設定できます。既存の式を追加または変更する必要がある場合、 の単一または配列の メソッドを使用してください。
+ランタイムの式は プロパティの取得または設定できます。既存の式を追加または変更する必要がある場合、 の単一または配列の メソッドを使用してください。
```typescript
grid.groupBy({ fieldName: 'ProductName', dir: SortingDirection.Desc, ignoreCase: true });
@@ -83,7 +83,7 @@ export interface IGroupByExpandState {
}
```
- で のリストを直接 に設定すると展開が変更されます。 はグループ レコード インスタンスでトグルするメソッドを公開します。
+ で のリストを直接 に設定すると展開が変更されます。 はグループ レコード インスタンスでトグルするメソッドを公開します。
```typescript
const groupRow = this.grid.groupsRecords.find(r => r.value === "France");
@@ -207,7 +207,7 @@ export interface IGroupByRecord {
igxGrid では、列ごとまたはグループ化式ごとにカスタム グループを定義できます。これにより、カスタム条件に基づいてグループ化が提供されます。これは、複雑なオブジェクトごとにグループ化する必要がある場合、または他のアプリケーション固有のシナリオで役立ちます。
-カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に を指定することにより、カスタム グループを決定できます。
+カスタム グループ化を実装するには、まずデータを適切にソートする必要があります。このため、ベース を拡張するカスタムのソート ストラテジを適用する必要がある場合もあります。データがソートされた後、列または特定のグループ化式に を指定することにより、カスタム グループを決定できます。
以下のサンプルは、`Date` によるカスタム グループ化を示しています。日付の値は、ユーザーが選択したグループ化モードに基づいて、日、週、月、または年でソート / グループ化されています。
@@ -217,7 +217,7 @@ igxGrid では、列ごとまたはグループ化式ごとにカスタム グ
このサンプルでは、さまざまな日付条件のカスタム ソート ストラテジを定義しています。
-各カスタム ストラテジ、ベースの を拡張し、 メソッドを定義します。値をソートするときに使用されるカスタム比較関数です。さらに、比較に必要な日付から値を抽出します。
+各カスタム ストラテジ、ベースの を拡張し、 メソッドを定義します。値をソートするときに使用されるカスタム比較関数です。さらに、比較に必要な日付から値を抽出します。
```typescript
class BaseSortingStrategy extends DefaultSortingStrategy {
@@ -275,7 +275,7 @@ class WeekSortingStrategy extends BaseSortingStrategy {
}
```
- 関数がグループ化式に対して定義され、選択されたグループ化モードに基づいて同じグループに属するアイテムを決定します。この関数が 0 を返すソートされた値は、同じグループの一部としてマークされます。
+ 関数がグループ化式に対して定義され、選択されたグループ化モードに基づいて同じグループに属するアイテムを決定します。この関数が 0 を返すソートされた値は、同じグループの一部としてマークされます。
```typescript
groupingComparer: (a, b) => {
@@ -480,11 +480,11 @@ $custom-theme: grid-theme(
## API リファレンス
-
--
+-
-
--
+-
-
--
+-
-
-
diff --git a/docs/angular/src/content/jp/components/grid/master-detail.mdx b/docs/angular/src/content/jp/components/grid/master-detail.mdx
index 50d77e49bf..c47ea58ee4 100644
--- a/docs/angular/src/content/jp/components/grid/master-detail.mdx
+++ b/docs/angular/src/content/jp/components/grid/master-detail.mdx
@@ -89,7 +89,7 @@ Master-detail モードで表示するように `igxGrid` を設定するには
-
-
-
--
--
--
--
\ No newline at end of file
+-
+-
+-
+-
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
index a1e8128358..ad2c329e98 100644
--- a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
+++ b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
@@ -19,7 +19,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
## トピックの概要
選択に基づいた集計機能を実現するには、[グリッド選択](/components/grid/grid/selection)機能と[グリッド集計](/components/grid/grid/summaries)を使用できます。
-集計では、列のデータ タイプとニーズに応じて、 、 、 のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。
+集計では、列のデータ タイプとニーズに応じて、 、 、 のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。
## 選択
@@ -44,7 +44,7 @@ const dates = data.filter(rec => isDate(rec));
データ タイプをグループ化した後、集計を開始できます。そのため、`IgxNumberSummaryOperand` および `IgxDateSummaryOperand` の既に公開されているメソッドを使用できます。
-その後、集計データを同じ配列に配置する必要があり、テンプレートに返されます。
+その後、集計データを同じ配列に配置する必要があり、テンプレートに返されます。
データを可視化には、``を使用することができ、`custom-summaries` クラスと組み合わせて集計を表示します。
@@ -59,18 +59,18 @@ const dates = data.filter(rec => isDate(rec));
## API リファレンス
-
--
+-
-
## その他のリソース
- [Grid の概要](grid.md)
--
+-
- [行選択](row-selection.md)
- [セル選択](cell-selection.md)
--
--
+-
+-
- [集計](summaries.md)
- [ページング](paging.md)
diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
index b1eb2a996b..60dd63c101 100644
--- a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
+++ b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
@@ -422,8 +422,8 @@ Enabling it can affects other parts of an Angular application that the `igxHiera
-
-
-
--
--
+-
+-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
index f3ad8c47b3..579ca30370 100644
--- a/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
+++ b/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
@@ -126,7 +126,7 @@ public schema: EntityType[] = [
#### 初期フィルターの設定
-ルート グリッドが最初に読み込まれたときにフィルター処理されるように、グリッドに初期フィルタリング ルールを追加しましょう。 を作成し、`ngOnInit` ライフサイクル フックを使用して `IgxHierarchicalGrid` の プロパティに設定します。
+ルート グリッドが最初に読み込まれたときにフィルター処理されるように、グリッドに初期フィルタリング ルールを追加しましょう。 を作成し、`ngOnInit` ライフサイクル フックを使用して `IgxHierarchicalGrid` の プロパティに設定します。
例えば、注文の運賃が少なくとも `500` である顧客をフィルタリングするとします。フィルタリング式でネストされたクエリを作成する機能を利用すると、次のようになります:
diff --git a/docs/angular/src/content/jp/components/icon-button.mdx b/docs/angular/src/content/jp/components/icon-button.mdx
index 00bc5e5495..985a0ed050 100644
--- a/docs/angular/src/content/jp/components/icon-button.mdx
+++ b/docs/angular/src/content/jp/components/icon-button.mdx
@@ -62,7 +62,7 @@ Ignite UI for Angular Icon Button ディレクティブをインポートした
### Flat アイコン ボタン
- ディレクティブを使用して、シンプルなフラット アイコン ボタンをコンポーネント テンプレートに追加します。
+ ディレクティブを使用して、シンプルなフラット アイコン ボタンをコンポーネント テンプレートに追加します。
```html
@@ -100,7 +100,7 @@ Contained アイコン ボタンを作成するには、`igxIconButton` プロ
### Disabled アイコン ボタン
-アイコン ボタンを無効にしたい場合は、 プロパティを使用できます。このサンプルでは、`igxIconButton` ディレクティブを使用してさまざまなファミリのアイコンを使用する方法も示します。
+アイコン ボタンを無効にしたい場合は、 プロパティを使用できます。このサンプルでは、`igxIconButton` ディレクティブを使用してさまざまなファミリのアイコンを使用する方法も示します。
```html
@@ -112,7 +112,7 @@ Contained アイコン ボタンを作成するには、`igxIconButton` プロ
### SVG アイコン
-マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず 依存関係を挿入し、次に メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.md#svg-アイコン)を参照してください。
+マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず 依存関係を挿入し、次に メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.md#svg-アイコン)を参照してください。
```typescript
constructor(private _iconService: IgxIconService) { }
@@ -414,9 +414,9 @@ $custom-contained: contained-icon-button-theme(
--
+-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/icon-service.mdx b/docs/angular/src/content/jp/components/icon-service.mdx
index 273920a4bf..ac2cb890b2 100644
--- a/docs/angular/src/content/jp/components/icon-service.mdx
+++ b/docs/angular/src/content/jp/components/icon-service.mdx
@@ -444,7 +444,7 @@ addSvgIconFromText(name: string, iconText: string, family: string, stripMeta = f
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/icon.mdx b/docs/angular/src/content/jp/components/icon.mdx
index 9cbf36f71d..ae304f15fe 100644
--- a/docs/angular/src/content/jp/components/icon.mdx
+++ b/docs/angular/src/content/jp/components/icon.mdx
@@ -118,9 +118,9 @@ CSS を使用してアイコンをカスタマイズできます。アイコン
## SVG アイコン
-SVG 画像はアイコンとして使用できます。はじめに 依存を注入します。この例ではコンポーネントのコンストラクタに注入されますが、コード内の必要な場所に使用できます。
+SVG 画像はアイコンとして使用できます。はじめに 依存を注入します。この例ではコンポーネントのコンストラクタに注入されますが、コード内の必要な場所に使用できます。
- メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。ファミリも指定できます。HTML マークアップの SVG ファイルを使用できます。または `addSvgIconFromText` メソッドを使用して SVG ファイルをインポートして、SVC テキスト コンテンツを使用できます。
+ メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。ファミリも指定できます。HTML マークアップの SVG ファイルを使用できます。または `addSvgIconFromText` メソッドを使用して SVG ファイルをインポートして、SVC テキスト コンテンツを使用できます。
- 同じ名前のアイコンが 2 つある場合に同じファミリ SVG アイコンが優先順位に従って表示されます。
- SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
@@ -149,7 +149,7 @@ public ngOnInit() {
```
-次に、 依存関係を注入し、その `setFamily` メソッドを利用して、マテリアル シンボルが `igx-icon` で動作できるようにする必要があります。
+次に、 依存関係を注入し、その `setFamily` メソッドを利用して、マテリアル シンボルが `igx-icon` で動作できるようにする必要があります。
```ts
constructor(private iconService: IgxIconService) { }
diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx
index 7ea0e85ef0..f4212948e0 100644
--- a/docs/angular/src/content/jp/components/input-group.mdx
+++ b/docs/angular/src/content/jp/components/input-group.mdx
@@ -93,7 +93,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
### Label および Input
- 、 ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.md)を参照してください。
+ 、 ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.md)を参照してください。
### Prefix および Suffix
@@ -114,7 +114,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
### Hint
- ディレクティブは、入力の下に配置されるヘルパー テキストを提供します。 プロパティの値に応じて、入力の開始または終了の位置に配置できます。以下は、phone 入力にヒントを追加します。
+ ディレクティブは、入力の下に配置されるヘルパー テキストを提供します。 プロパティの値に応じて、入力の開始または終了の位置に配置できます。以下は、phone 入力にヒントを追加します。
```html
@@ -147,11 +147,11 @@ This is how the phone field with hint looks:
providers: [{provide: IGX_input-group_TYPE, useValue: 'box' }]
```
- インジェクション トークンを使用すると、すべての入力グループ インスタンスのタイプをアプリケーション レベルで指定できます。すべての関連コンポーネントを一度に簡単にスタイル設定できます。
-タイプを設定するには、 インジェクション トークンを使用して DI プロバイダーを作成します。
+ インジェクション トークンを使用すると、すべての入力グループ インスタンスのタイプをアプリケーション レベルで指定できます。すべての関連コンポーネントを一度に簡単にスタイル設定できます。
+タイプを設定するには、 インジェクション トークンを使用して DI プロバイダーを作成します。
- プロパティは よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。
+ プロパティは よりも優先されるため、type プロパティが明示的に設定されている場合トークン値をコンポーネントレベルでオーバーライドできます。
`igniteui-angular` フォーム コントロールのほとんどは、内部で input-group コンポーネントを使用するか、カスタム テンプレートを使用します。グローバル トークンの設定は、これらのコンポーネントにも影響します。
@@ -206,7 +206,7 @@ Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデ
```
-`required` 属性はラベルの横にアスタリスクを追加し、このフィールドに入力する必要があることを示します。さらに、`input` に `email` や `minlength` などの追加の検証が適用されている場合、これにより、 ディレクティブを介して追加要件をエンド ユーザーに通知します。
+`required` 属性はラベルの横にアスタリスクを追加し、このフィールドに入力する必要があることを示します。さらに、`input` に `email` や `minlength` などの追加の検証が適用されている場合、これにより、 ディレクティブを介して追加要件をエンド ユーザーに通知します。
次の例では、双方向データ バインディングを使用し、`ngModel` をローカル変数にエクスポートしてコントロールの状態を検査する方法を示します。
@@ -247,7 +247,7 @@ Ignite UI for Angular Input Group コンポーネントは、Angular 14 のデ
```
-上記の構成の結果は、次のサンプルで確認できます。[Email] および [Password] フィールドに入力を開始すると、入力された値が無効な場合に が表示されることがわかります。サンプルは、 および [`igx-suffix`](#prefix-および-suffix) ディレクティブを使用してパスワードの可視性を切り替える方法も示します。
+上記の構成の結果は、次のサンプルで確認できます。[Email] および [Password] フィールドに入力を開始すると、入力された値が無効な場合に が表示されることがわかります。サンプルは、 および [`igx-suffix`](#prefix-および-suffix) ディレクティブを使用してパスワードの可視性を切り替える方法も示します。
@@ -288,7 +288,7 @@ constructor(fb: FormBuilder) {
```
-テンプレート駆動のフォーム サンプルと同様に、`email` や `minlength` などの追加の検証がある場合、 ディレクティブを使用して、検証が失敗した場合にエンド ユーザーに通知できます。
+テンプレート駆動のフォーム サンプルと同様に、`email` や `minlength` などの追加の検証がある場合、 ディレクティブを使用して、検証が失敗した場合にエンド ユーザーに通知できます。
次の例は、`get` メソッドを介してコントロールにアクセスし、その状態を検査する方法を示しています。また、`FormGroup` の状態を調べて、送信ボタンを有効/無効にする方法も示しています。
@@ -850,8 +850,8 @@ For instance, setting a dark `$box-background` globally could cause the borders
--
--
+-
+-
- IgxInputGroup タイプ
-
-
diff --git a/docs/angular/src/content/jp/components/inputs/color-editor.mdx b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
index 140380d6b4..251eca9a9f 100644
--- a/docs/angular/src/content/jp/components/inputs/color-editor.mdx
+++ b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
@@ -8,10 +8,8 @@ namespace: Infragistics.Controls
_language: ja
---
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Color Editor (カラー エディター) の概要
Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポーネントです。Color Editor は、ブラッシ アイコンをクリックすると開きます。RGBA 値と 16 進値の両方を、下部にある目的の色から取得できます。これらの値は、3 つのスライダーが変更されると更新されます。中央のボックスは、彩度と明度を調整するために設計されており、隣接する 2つ のスライダーで rgb 値と輝度値を調整できます。RGB は (1~255) の範囲で登録されます。明度は (0~1) の範囲で登録されます。
@@ -20,11 +18,8 @@ Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポ
-
-
## 依存関係
-
まず、次のコマンドを実行して Ignite UI for Angular をインストールする必要があります:
```cmd
@@ -32,17 +27,11 @@ npm install igniteui-angular-core
npm install igniteui-angular-inputs
```
-`ColorEditor` を使用する前に、次のモジュールを登録する必要があります:
-
-
-
+ を使用する前に、次のモジュールを登録する必要があります:
## 使用方法
-`ColorEditor` の使用を開始する最も簡単な方法は次のとおりです:
-
-
-
+ の使用を開始する最も簡単な方法は次のとおりです:
```html
{
console.log("test");
}
+
```
## API リファレンス
-`ColorEditor`
+
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
index 527ef6e9e5..c4a6299ced 100644
--- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
+++ b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
@@ -76,7 +76,6 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
| - Time picker||| | |||||| *|| || |||
| - Toast||| | |||||| *|| || || |
-
**凡例**
||||
@@ -109,7 +108,6 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
- **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。
- **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。
-
## WCAG の準拠
[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。WCAG は主に HTML のアクセシビリティに焦点を当てます。
@@ -159,7 +157,6 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
| - Toast||| | || *| *|| | | *|||
| - Tooltip| || | || *| *|| | | *|||
-
**凡例**
||||
@@ -193,6 +190,5 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
- **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。
- ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。
-
## WAI-ARIA サポート
2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/)を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。
diff --git a/docs/angular/src/content/jp/components/label-input.mdx b/docs/angular/src/content/jp/components/label-input.mdx
index b6d2aea5f0..89e53881bf 100644
--- a/docs/angular/src/content/jp/components/label-input.mdx
+++ b/docs/angular/src/content/jp/components/label-input.mdx
@@ -80,7 +80,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
Label および Input ディレクティブのデフォルト スタイル設定はマテリアル デザイン [**ガイドライン**](https://material.io/guidelines/components/text-fields.html)のテキスト フィールド仕様を実装します。
- および を使用するには、`` コンテナーにラップします。
+ および を使用するには、`` コンテナーにラップします。
```html
@@ -93,7 +93,7 @@ Label および Input ディレクティブのデフォルト スタイル設定
### 検証
- 属性を使用して `input` を検証できます。ラベルの隣にアスタリスクが追加され、このフィールドは必須入力であることを示します。入力は検証が成功/失敗したかどうかによって緑/赤に変わります。
+ 属性を使用して `input` を検証できます。ラベルの隣にアスタリスクが追加され、このフィールドは必須入力であることを示します。入力は検証が成功/失敗したかどうかによって緑/赤に変わります。
```html
@@ -128,7 +128,7 @@ public user = {
### フォーカスとテキストの選択
- ディレクティブを使用して、input 要素に `focus` を強制するロジックを追加できます。
+ ディレクティブを使用して、input 要素に `focus` を強制するロジックを追加できます。
```html
@@ -138,10 +138,10 @@ public user = {
```
- ディレクティブを使用するには、 をインポートする必要があります。
+ ディレクティブを使用するには、 をインポートする必要があります。
-`igxInput` でマークされた input 要素内のテキストをフォーカス際に選択したい場合、 ディレクティブを有効にする必要があります。
+`igxInput` でマークされた input 要素内のテキストをフォーカス際に選択したい場合、 ディレクティブを有効にする必要があります。
```html
@@ -156,7 +156,7 @@ public user = {
```
- ディレクティブを使用するには、 をインポートする必要があります。
+ ディレクティブを使用するには、 をインポートする必要があります。
@@ -171,8 +171,8 @@ Ignite UI for Angular Input Group コンポーネントは、開発者が使い
--
--
+-
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/layout.mdx b/docs/angular/src/content/jp/components/layout.mdx
index 6b9882d510..5d279cabc1 100644
--- a/docs/angular/src/content/jp/components/layout.mdx
+++ b/docs/angular/src/content/jp/components/layout.mdx
@@ -27,13 +27,13 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
## 使用方法
-コンテナー要素で ディレクティブを使用して、子要素のレイアウト方向を指定します。
+コンテナー要素で ディレクティブを使用して、子要素のレイアウト方向を指定します。
### 水平方向
- `="row"` を使用します。
+ `="row"` を使用します。
@@ -41,14 +41,14 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
### 垂直方向
- `="column"` を使用します。
+ `="column"` を使用します。
-順序を反転するには、 `="true"` を使用します。
+順序を反転するには、 `="true"` を使用します。
@@ -63,7 +63,7 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
### 要素の間隔を変更
- `="space-between | space-around"` を使用して、要素の間隔を変更します。
+ `="space-between | space-around"` を使用して、要素の間隔を変更します。
@@ -71,7 +71,7 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
### 要素を主軸に沿って配置
- `="flex-start | center | flex-end"` を使用して、要素を主軸に沿って配置します。
+ `="flex-start | center | flex-end"` を使用して、要素を主軸に沿って配置します。
@@ -79,7 +79,7 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
### 要素を交差軸に沿って配置
- `="flex-start | center | flex-end"` を使用して、要素を交差軸に沿って配置します。
+ `="flex-start | center | flex-end"` を使用して、要素を交差軸に沿って配置します。
@@ -87,21 +87,21 @@ The Ignite UI for Angular Layout Directives allow developers to specify a layout
### 要素をラップ
- `="wrap"` を使用して要素をラップすることもできます。
+ `="wrap"` を使用して要素をラップすることもできます。
- ディレクティブはそのコンテナーの**直下**の子のフロー方向に影響します。
+ ディレクティブはそのコンテナーの**直下**の子のフロー方向に影響します。
## ネスト
- ディレクティブを 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。
+ ディレクティブを 親内の要素に使用して、特定のフレックスボックス プロパティを制御します。
## API リファレンス
--
--
+-
+-
diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx
index 529f135a9b..6832ed21c2 100644
--- a/docs/angular/src/content/jp/components/linear-gauge.mdx
+++ b/docs/angular/src/content/jp/components/linear-gauge.mdx
@@ -10,20 +10,16 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular リニア ゲージの概要
-Ignite UI for Angular リニア ゲージ コンポーネントを使用すると、リニア ゲージの形式でデータを視覚化できます。 は、スケールおよび 1 つ以上の範囲と比較した値のシンプルで簡潔なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれており、アニメーションでは、 プロパティの設定で簡単にカスタマイズできます。また構成可能な向きや方向、視覚要素やツールチップなどがサポートされます。
+Ignite UI for Angular リニア ゲージ コンポーネントを使用すると、リニア ゲージの形式でデータを視覚化できます。 は、スケールおよび 1 つ以上の範囲と比較した値のシンプルで簡潔なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれており、アニメーションでは、 プロパティの設定で簡単にカスタマイズできます。また構成可能な向きや方向、視覚要素やツールチップなどがサポートされます。
## Angular リニア ゲージの例
-以下のサンプルは、同じ でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
+以下のサンプルは、同じ でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
-
-
## 依存関係
Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -33,15 +29,9 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
```
-
-
-
## モジュールの要件
- を作成するには、以下のモジュールが必要です。
-
-
-
+ を作成するには、以下のモジュールが必要です。
```ts
// app.module.ts
@@ -61,8 +51,6 @@ export class AppModule {}
以下のコードは針およびスケールで 3 つの比較範囲を含むリニア ゲージを作成する方法を紹介します。
-
-
```html
```
-
-
-
-
## 針のハイライト
-リニア ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の の不透明度が低く表示されます。これを有効にするには、まず を Overlay に設定し、次に を適用します。
-
-
+リニア ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の の不透明度が低く表示されます。これを有効にするには、まず を Overlay に設定し、次に を適用します。
```html
```
-
-
-
-
## 範囲
範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。
-
-
```html
```
-
-
-
-
-
## 目盛
目盛は、リニア ゲージを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。
@@ -192,8 +161,6 @@ export class AppModule {}
補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。
-
-
```html
```
-
-
-
-
-
## ラベル
ラベルはスケールのメジャーを示します。
-
-
```html
```
-
-
-
-
-
## バッキング
バッキング要素はブレット グラフ コントロールの背景と境界線を表します。常に最初に描画される要素でラベルやメモリなどの残りの要素は互いにオーバーレイします。
-
-
```html
```
-
-
-
-
-
## スケール
-スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 ( プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。
-
-
+スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 ( プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。
```html
```
-
-
-
-
-
## まとめ
上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
-
-
```html
-
+
+
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/linear-progress.mdx b/docs/angular/src/content/jp/components/linear-progress.mdx
index a9ad2469e9..23a71c6d83 100644
--- a/docs/angular/src/content/jp/components/linear-progress.mdx
+++ b/docs/angular/src/content/jp/components/linear-progress.mdx
@@ -110,11 +110,11 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ
### 不確定のプログレス
-正確に決定していないプロセスをトラックしたい場合、 プロパティを `true` に設定できます。
+正確に決定していないプロセスをトラックしたい場合、 プロパティを `true` に設定できます。
### アニメーション期間
- 入力プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。
+ 入力プロパティは、アニメーション サイクルにかかる時間を指定するために使用されます。
次の例では、アニメーションの継続時間を 5 秒に設定しています。
@@ -164,7 +164,7 @@ Ignite UI for Angular Progress Bar モジュールまたはディレクティブ
```
-`textAlign` プロパティを使用している場合、コンポーネントの
列挙子をインポートする必要があります。
+`textAlign` プロパティを使用している場合、コンポーネントの
列挙子をインポートする必要があります。
```typescript
import { ..., IgxTextAlign } from 'igniteui-angular/progressbar';
@@ -280,4 +280,4 @@ $custom-theme: progress-linear-theme(
-
-
--
+-
diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx
index 3793fef295..8e9069ec51 100644
--- a/docs/angular/src/content/jp/components/list.mdx
+++ b/docs/angular/src/content/jp/components/list.mdx
@@ -86,7 +86,7 @@ Ignite UI for Angular List モジュールまたはディレクティブをイ
連絡先コンポーネントのテンプレートでリストを作成できます。
項目がない場合は、空のリストのデフォルト テンプレートを使用できます。
-
ディレクティブを使用して空のリストの外観をカスタマイズするためにカスタム テンプレートを設定できます。この場合、デフォルト テンプレートは使用されません。
+
ディレクティブを使用して空のリストの外観をカスタマイズするためにカスタム テンプレートを設定できます。この場合、デフォルト テンプレートは使用されません。
```html
@@ -115,7 +115,7 @@ Ignite UI for Angular List モジュールまたはディレクティブをイ
-データの読み込みで遅延が発生した場合、リストの
プロパティを `true` に設定し、デフォルト テンプレートで処理中のデータ読み込み処理についてユーザーに通知できます。
ディレクティブを使用してカスタムの読み込みテンプレートを提供できます。
+データの読み込みで遅延が発生した場合、リストの
プロパティを `true` に設定し、デフォルト テンプレートで処理中のデータ読み込み処理についてユーザーに通知できます。
ディレクティブを使用してカスタムの読み込みテンプレートを提供できます。
```html
@@ -486,7 +486,7 @@ Angular コンポーネント テンプレートの上側に入力フィール
```
-`IgxFilterModule` および `IgxInputGroupModule` を app.module.ts ファイルにインポートし、
を連絡先コンポーネントにインポートします。
+`IgxFilterModule` および `IgxInputGroupModule` を app.module.ts ファイルにインポートし、
を連絡先コンポーネントにインポートします。
```typescript
// app.module.ts
@@ -517,7 +517,7 @@ export class ContactListComponent {
}
```
-
をインポートした後、`searchContact` プロパティの更新でパイプによって使用されるフィルタリング オプションを返すゲッター メソッドを登録します。フィルターが機能するために連絡先オブジェクトのフィルター `key` を登録します。この場合、各連絡先の `name` です。
オブジェクトで登録する 2 番目のプロパティは連絡先の名前を比較する値です。連絡先リストの上の入力フィールドにバインドした `searchContact` プロパティです。
+
をインポートした後、`searchContact` プロパティの更新でパイプによって使用されるフィルタリング オプションを返すゲッター メソッドを登録します。フィルターが機能するために連絡先オブジェクトのフィルター `key` を登録します。この場合、各連絡先の `name` です。
オブジェクトで登録する 2 番目のプロパティは連絡先の名前を比較する値です。連絡先リストの上の入力フィールドにバインドした `searchContact` プロパティです。
フィルタリング パイプを連絡先のデータに適用します。テンプレートで以下のコードを追加します:
diff --git a/docs/angular/src/content/jp/components/maps/map-api.mdx b/docs/angular/src/content/jp/components/maps/map-api.mdx
index b704ec0c86..9ce8a6f258 100644
--- a/docs/angular/src/content/jp/components/maps/map-api.mdx
+++ b/docs/angular/src/content/jp/components/maps/map-api.mdx
@@ -9,89 +9,86 @@ _language: ja
---
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular 地理マップ API
-Angular
には次の API メンバーがあります:
+Angular
には次の API メンバーがあります:
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
## Angular 地理的シリーズの種類
-Angular
には 7 種類のシリーズがあり、データ バインディング用の
プロパティがあります。
+Angular
には 7 種類のシリーズがあり、データ バインディング用の
プロパティがあります。
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
さらに、シリーズの各種類には、データ項目をマッピングし、その外観をスタイル設定するための特定のプロパティがあります。
## Angular 地理記号シリーズ API
-Angular
(地理マーカー シリーズ) には、次の API メンバーがあります。
+Angular
(地理マーカー シリーズ) には、次の API メンバーがあります。
--
--
--
--
--
+-
+-
+-
+-
+-
## Angular 地理バブル シリーズ API
-Angular
(地理バブル シリーズ) には、次の API メンバーがあります。
+Angular
(地理バブル シリーズ) には、次の API メンバーがあります。
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
## Angular 地理シェイプ シリーズ API
-Angular
と
には同じ API メンバーがあります。
+Angular
と
には同じ API メンバーがあります。
--
--
--
--
+-
+-
+-
+-
## Angular 地理エリア シリーズ API
+Angular
には、次の API メンバーがあります。
-Angular
には、次の API メンバーがあります。
-
--
--
--
--
+-
+-
+-
+-
## Angular 地理等高線シリーズ API
-Angular
には、次の API メンバーがあります。
+Angular
には、次の API メンバーがあります。
--
--
--
--
+-
+-
+-
+-
## Angular 地理 HD シリーズ API
-Angular
には、次の API メンバーがあります。
-
+Angular
には、次の API メンバーがあります。
--
--
--
--
\ No newline at end of file
+-
+-
+-
+-
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/components/mask.mdx b/docs/angular/src/content/jp/components/mask.mdx
index 84127e6c27..ada4e12c3b 100644
--- a/docs/angular/src/content/jp/components/mask.mdx
+++ b/docs/angular/src/content/jp/components/mask.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Mask (マスク) ディレクティブの概要
-**テキスト入力フィールド**に
ディレクティブを適用し、構成可能なマスク ルールに基づいてユーザー入力を制御して表示される値を書式設定できます。入力オプションも構成できます。
+**テキスト入力フィールド**に
ディレクティブを適用し、構成可能なマスク ルールに基づいてユーザー入力を制御して表示される値を書式設定できます。入力オプションも構成できます。
## Angular Mask の例
@@ -33,7 +33,7 @@ Ignite UI for Angular については、「[はじめに](general/getting-starte
次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。
- ディレクティブは、**text** タイプの入力で使用されます。
+ ディレクティブは、**text** タイプの入力で使用されます。
```typescript
@@ -126,7 +126,7 @@ Ignite UI for Angular Mask モジュールまたはディレクティブをイ
### 書式設定付き/Raw 値にバインド
-
入力を使用して、指定したマスクが適用される場合にフォームにバインドする入力値 (書式設定付きまたは Raw) を構成します。デフォルトで
が _false_ に設定し、Raw 値が使用されます。
+
入力を使用して、指定したマスクが適用される場合にフォームにバインドする入力値 (書式設定付きまたは Raw) を構成します。デフォルトで
が _false_ に設定し、Raw 値が使用されます。
```html
@@ -207,7 +207,7 @@ private notify(snackbar, message, input) {
### テキスト選択
-
を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.md#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
+
を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.md#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
**app.module.ts** ファイルに `IgxTextSelectionModule` をインポートします:
@@ -240,7 +240,7 @@ export class AppModule {}
### focus と blur に追加の書式を適用
-デフォルトの mask 動作に加え、カスタムパイプを実装して
や
入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
+デフォルトの mask 動作に加え、カスタムパイプを実装して
や
入力プロパティで入力がフォーカスを get または lost した場合に値を必要なアウトプットへ変換できます。基になるモデル値に影響はありません。以下はその方法です。
表示値の最後に '%' サインを追加または削除する 2 つのパイプを実装します。
@@ -269,7 +269,7 @@ export class InputFormatPipe implements PipeTransform {
}
```
-
や
入力プロパティに各パイプのインスタンスを渡します。
+
や
入力プロパティに各パイプのインスタンスを渡します。
```typescript
public value = 100;
@@ -298,7 +298,7 @@ public inputFormat = new InputFormatPipe();
### プレースホルダーの追加
-
プロパティは、ネイティブ プレースホルダー属性として使用できます。
に値が提供されない場合、マスクの値セットが使用されます。
+
プロパティは、ネイティブ プレースホルダー属性として使用できます。
に値が提供されない場合、マスクの値セットが使用されます。
```typescript
value = null;
@@ -321,9 +321,9 @@ value = null;
--
+-
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/material-icons-extended.mdx b/docs/angular/src/content/jp/components/material-icons-extended.mdx
index f65f7532ba..f8b4a3bbe1 100644
--- a/docs/angular/src/content/jp/components/material-icons-extended.mdx
+++ b/docs/angular/src/content/jp/components/material-icons-extended.mdx
@@ -80,7 +80,7 @@ export class SampleComponent implements OnInit {
-
+
コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx
index f3f82ff3c9..0c1b0b7208 100644
--- a/docs/angular/src/content/jp/components/menus/toolbar.mdx
+++ b/docs/angular/src/content/jp/components/menus/toolbar.mdx
@@ -9,20 +9,16 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-
# Angular Toolbar (ツールバー) の概要
-Angular ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、
または
コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
+Angular ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、
または
コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
## Angular ツールバーの例
-
## 依存関係
-
Ignite UI for Angular のレイアウト、入力、チャート、コア パッケージをインストールします。
```cmd
@@ -32,9 +28,7 @@ npm install igniteui-angular-charts
npm install igniteui-angular-core
```
-
コンポーネントとその機能とともに
を使用する場合、次のモジュールが必要です。
-
-
+
コンポーネントとその機能とともに
を使用する場合、次のモジュールが必要です。
```ts
import { IgxToolbarModule } from 'igniteui-angular-layouts';
@@ -60,32 +54,28 @@ export class AppModule {}
### ツール操作
-以下は、ツールバーに追加できるさまざまな
項目のリストです。
+以下は、ツールバーに追加できるさまざまな
項目のリストです。
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
-これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注:
は、
内にラップすることもできる他のツールのラッパーです。
+これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注:
は、
内にラップすることもできる他のツールのラッパーです。
-
オブジェクトの
、
、および
プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は
プロパティも公開します。
+
オブジェクトの
、
、および
プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は
プロパティも公開します。
-次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、
でツールをグループ化できます。この例では、
プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの
プロパティによってもハイライト表示されます。
+次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、
でツールをグループ化できます。この例では、
プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの
プロパティによってもハイライト表示されます。
-
### Angular データ チャートの統合
-Angular ツールバーには、
プロパティが含まれています。これは、以下のコードに示すように、
などのコンポーネントをリンクするために使用されます。
-
-
-
+Angular ツールバーには、
プロパティが含まれています。これは、以下のコードに示すように、
などのコンポーネントをリンクするために使用されます。
```html
@@ -102,52 +92,50 @@ Angular ツールバーには、
が Toolbar にリンクされると、いくつかの既存の
項目とメニューが使用可能になります。以下は、組み込みの Angular
ツール操作とそれに関連付けられた
のリストです。
+
が Toolbar にリンクされると、いくつかの既存の
項目とメニューが使用可能になります。以下は、組み込みの Angular
ツール操作とそれに関連付けられた
のリストです。
ズーム操作
-- `ZoomMenu`: チャートのズーム レベルを増減するための
および
メソッドを呼び出す 3 つの
項目を公開する
には、チャートの
メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。
+- `ZoomMenu`: チャートのズーム レベルを増減するための
および
メソッドを呼び出す 3 つの
項目を公開する
には、チャートの
メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。
トレンド操作
-- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む
。
+- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む
。
- `AnalyzeHeader`: サブ セクションのヘッダー。
- `LinesMenu`: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。
- `LinesHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー:
- - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する
。
- - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する
。
- -
: シリーズの平均値で yAxis に沿って水平破線を表示する
。
- - `TrendsMenu`: さまざまな近似曲線を
プロット領域に適用するためのツールを含むサブ メニュー。
+ - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する
。
+ - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する
。
+ -
: シリーズの平均値で yAxis に沿って水平破線を表示する
。
+ - `TrendsMenu`: さまざまな近似曲線を
プロット領域に適用するためのツールを含むサブ メニュー。
- `TrendsHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー:
- - **Exponential**: チャート内の各シリーズの
を **ExponentialFit** に設定する
。
- - **Linear**: チャート内の各シリーズの
を **LinearFit** に設定する
。
- - **Logarithmic**: チャート内の各シリーズの
を **LogarithmicFit** に設定する
。
+ - **Exponential**: チャート内の各シリーズの
を **ExponentialFit** に設定する
。
+ - **Linear**: チャート内の各シリーズの
を **LinearFit** に設定する
。
+ - **Logarithmic**: チャート内の各シリーズの
を **LogarithmicFit** に設定する
。
- `HelpersHeader`: サブ セクションのヘッダー。
- - `SeriesAvg`:
タイプの
を使用して、チャートのシリーズ コレクションに
を追加または削除する
。
- - `ValueLabelsMenu`:
のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。
+ - `SeriesAvg`:
タイプの
を使用して、チャートのシリーズ コレクションに
を追加または削除する
。
+ - `ValueLabelsMenu`:
のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。
- `ValueLabelsHeader`: 次のツールのサブ メニュー セクション ヘッダー:
- - `ShowValueLabels`:
を使用してデータ ポイント値を切り替える
。
- - `ShowLastValueLabel`:
を使用して最終値軸の注釈を切り替える
。
-- `ShowCrosshairs`: チャートの
プロパティを介してマウスオーバー十字線の注釈を切り替える
。
-- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える
。
+ - `ShowValueLabels`:
を使用してデータ ポイント値を切り替える
。
+ - `ShowLastValueLabel`:
を使用して最終値軸の注釈を切り替える
。
+- `ShowCrosshairs`: チャートの
プロパティを介してマウスオーバー十字線の注釈を切り替える
。
+- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える
。
画像に保存アクション
-- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する
。
+- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する
。
- `CopyHeader`: サブ セクションのヘッダー。
### SVG アイコン
-ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例:
)。2 つ目は、ツールで定義されたアイコンの名前 (例:
) で、その後に SVG 文字列を追加します。
+ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例:
)。2 つ目は、ツールで定義されたアイコンの名前 (例:
) で、その後に SVG 文字列を追加します。
### データ URL アイコン
-svg を追加するのと同様に、
を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
+svg を追加するのと同様に、
を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
次のスニペットは、アイコンを追加する両方の方法を示しています。
-
-
```html
```
-
-
```ts
public toolbarCustomIconOnViewInit(): void {
@@ -175,8 +161,6 @@ public toolbarCustomIconOnViewInit(): void {
}
```
-
-
```ts
public toolbarCustomIconOnViewInit(): void {
@@ -195,33 +179,22 @@ public toolbarCustomIconOnViewInit(): void {
}
```
-
-
-
### Vertical Orientation
-By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property.
-
-
+By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the property.
```html
```
-
-
-
The following example demonstrates the vertical orientation of the Angular Toolbar.
-
### Color Editor
You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application.
-
-
```html
```
-
-
-
The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool.
-
-
{/* ## Styling/Theming
-The icon component can be styled by using it's property directly to the .
-
-
+The icon component can be styled by using it's property directly to the .
```html
```
-
-
-
{/*The following example demonstrates the various theme options that can be applied.
*/}
-
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/angular/src/content/jp/components/navbar.mdx b/docs/angular/src/content/jp/components/navbar.mdx
index 50d9c6247a..4d08d5f07a 100644
--- a/docs/angular/src/content/jp/components/navbar.mdx
+++ b/docs/angular/src/content/jp/components/navbar.mdx
@@ -216,7 +216,7 @@ export class NavbarSample3Component {
- または が指定される場合、デフォルトの は使用されません。
+ または が指定される場合、デフォルトの は使用されません。
@@ -262,7 +262,7 @@ Navbar のタイトルにカスタム コンテンツを提供する場合は、
```
- または の場合、デフォルト が使用されません。
+ または の場合、デフォルト が使用されません。
@@ -360,8 +360,8 @@ $custom-navbar-theme: navbar-theme(
-
--
--
+-
+-
-
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
diff --git a/docs/angular/src/content/jp/components/navdrawer.mdx b/docs/angular/src/content/jp/components/navdrawer.mdx
index b512b63860..bb6ae9d5e0 100644
--- a/docs/angular/src/content/jp/components/navdrawer.mdx
+++ b/docs/angular/src/content/jp/components/navdrawer.mdx
@@ -120,7 +120,7 @@ Ignite UI for Angular Navigation Drawer モジュールまたはディレクテ
```
Drawer のコンテンツを `igxDrawer` ディレクティブでデコレートした `` で設定します。
-任意のコンテンツをテンプレートに設定できますが、 ディレクティブ ([項目のスタイル](#スタイル設定)を参照) が定義済みのスタイル設定を項目に適用します。
+任意のコンテンツをテンプレートに設定できますが、 ディレクティブ ([項目のスタイル](#スタイル設定)を参照) が定義済みのスタイル設定を項目に適用します。
このディレクティブに 2 つの `@Input` プロパティがあります。
- `active` - 項目を選択済みとしてスタイル設定します。
@@ -188,7 +188,7 @@ Navigation drawer に要素を追加して選択するためには、typescript
Drawer を開く/閉じる方法が複数あります。入力プロパティをアプリケーション状態にバインドするか、[`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) 参照を使用してコンポーネントの API へコードでアクセス、あるいはこのような場合では `#drawer` [テンプレート参照変数](https://angular.io/guide/template-syntax#ref-vars)を使用できます。
-Navigation Drawer は とも統合し、[`igxToggleAction`](toggle.md#トグル自動操作) ディレクティブで id によって対象にされます。
+Navigation Drawer は とも統合し、[`igxToggleAction`](toggle.md#トグル自動操作) ディレクティブで id によって対象にされます。
```html
@@ -231,12 +231,12 @@ export class AppComponent {
より大きい画面に Drawer をピン固定すると、相対的な位置を使用して通常のコンテンツ フローで配置されます。アプリケーションに Drawer を切り替える方法を提供するかどうかにより、ピン固定モードを使用して、[確定または永続的な動作](https://material.io/guidelines/patterns/navigation-drawer.html#navigation-drawer-behavior)を実装できます。
-Navigation Drawer はデフォルトでレスポンシブです。画面サイズに基づいて固定解除および固定モード間で切り替わります。この動作は プロパティによって制御され、falsy 値 (0 など) を設定すると無効になります。
+Navigation Drawer はデフォルトでレスポンシブです。画面サイズに基づいて固定解除および固定モード間で切り替わります。この動作は プロパティによって制御され、falsy 値 (0 など) を設定すると無効になります。
### ピン固定 (persistent) モード
-ピン固定は、コンテンツと同じフローに配置するために、Drawer の位置を `fixed` から `relative` に変更します。従って、このモードで Drawer を切り替える必要がある場合、アプリケーションのスタイル設定を切り替えるためにレイアウトをデザインする必要があります。流動レイアウトを実装するには、 および ディレクティブを使用します。
+ピン固定は、コンテンツと同じフローに配置するために、Drawer の位置を `fixed` から `relative` に変更します。従って、このモードで Drawer を切り替える必要がある場合、アプリケーションのスタイル設定を切り替えるためにレイアウトをデザインする必要があります。流動レイアウトを実装するには、 および ディレクティブを使用します。
上記の例に適用すると以下のようになります。
diff --git a/docs/angular/src/content/jp/components/overlay-position.mdx b/docs/angular/src/content/jp/components/overlay-position.mdx
index 79f1963d84..4fe12fcb11 100644
--- a/docs/angular/src/content/jp/components/overlay-position.mdx
+++ b/docs/angular/src/content/jp/components/overlay-position.mdx
@@ -28,7 +28,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
### Global
- を介して渡された指示に基づいてコンテンツを配置します。 に Left/Center/Right、 に Top/Middle/Bottom があります。デフォルトは:
+ を介して渡された指示に基づいてコンテンツを配置します。 に Left/Center/Right、 に Top/Middle/Bottom があります。デフォルトは:
| horizontalDirection | verticalDirection |
|:---------------------------|:-------------------------|
@@ -48,7 +48,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
### Connected
- からの開始点と から渡された方向に基づいて要素を配置します。開始点 ( ) または `HTMLElement` を配置決めのベースとして渡すことができます。デフォルトは:
+ からの開始点と から渡された方向に基づいて要素を配置します。開始点 ( ) または `HTMLElement` を配置決めのベースとして渡すことができます。デフォルトは:
| target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint |
|:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|
@@ -68,7 +68,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
### Elastic
-要素の一部が表示範囲外の場合、**Connected** 配置ストラテジのように要素を配置し、要素をビュー ポートに収まるように (幅や高さの再計算により) サイズ変更します。 を へ渡して要素のサイズが特定のしきい値を下回るようなサイズ変更を防ぐことができます。デフォルトは:
+要素の一部が表示範囲外の場合、**Connected** 配置ストラテジのように要素を配置し、要素をビュー ポートに収まるように (幅や高さの再計算により) サイズ変更します。 を へ渡して要素のサイズが特定のしきい値を下回るようなサイズ変更を防ぐことができます。デフォルトは:
| target | horizontalDirection | verticalDirection | horizontalStartPoint | verticalStartPoint | minSize |
|:----------------|:--------------------------|:-------------------------|:-------------------------|:-------------------------|:----------------------|
@@ -104,7 +104,7 @@ import {
```
-次に、オーバーレイで使用される配置ストラテジを指定します。 メソッドが呼び出されると、配置ストラテジは パラメーターのプロパティとして渡されます。以下の例では、デフォルトの `GlobalPositionStrategy` を `ConnectedPositionStrategy` で変更しています。
+次に、オーバーレイで使用される配置ストラテジを指定します。 メソッドが呼び出されると、配置ストラテジは パラメーターのプロパティとして渡されます。以下の例では、デフォルトの `GlobalPositionStrategy` を `ConnectedPositionStrategy` で変更しています。
```typescript
// Initialize and use overlay settings
@@ -154,7 +154,7 @@ this._overlayId = this.overlayService.attach(MyDynamicCardComponent, this.viewCo
### ストラテジの変更
-オーバーレイに渡される オブジェクトの プロパティをオーバーライドすることにより、オーバーレイで使用される配置ストラテジを変更することもできます。
+オーバーレイに渡される オブジェクトの プロパティをオーバーライドすることにより、オーバーレイで使用される配置ストラテジを変更することもできます。
```typescript
const myPositionStrategy = new AutoPositionStrategy();
@@ -205,12 +205,12 @@ overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set);
## API リファレンス
--
+-
## その他のリソース
- [オーバーレイ メイン トピック](overlay.md)
- [スクロール ストラテジ](overlay-scroll.md)
- [スタイル設定](overlay-styling.md)
--
+-
-
diff --git a/docs/angular/src/content/jp/components/overlay-scroll.mdx b/docs/angular/src/content/jp/components/overlay-scroll.mdx
index b0c2fd9cfb..ab18d7e3e9 100644
--- a/docs/angular/src/content/jp/components/overlay-scroll.mdx
+++ b/docs/angular/src/content/jp/components/overlay-scroll.mdx
@@ -24,13 +24,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## 使用方法
各スクロール方法は以下のメソッドがあります。
-- - スクロール方法を初期化します。ドキュメントへの参照、オーバーレイ サービスへの参照、および描画されるコンポーネントの id が必要です。
-- - スクロール方法を指定した要素またはドキュメントにアタッチします。
-- - スクロール方法をデタッチします。
+- - スクロール方法を初期化します。ドキュメントへの参照、オーバーレイ サービスへの参照、および描画されるコンポーネントの id が必要です。
+- - スクロール方法を指定した要素またはドキュメントにアタッチします。
+- - スクロール方法をデタッチします。
-- - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered
-- - attaches the scroll strategy to the specified element or to the document
-- - detaches the scroll strategy
+- - initializes the scroll strategy. It needs a reference of the document, the overlay service and the id of the component rendered
+- - attaches the scroll strategy to the specified element or to the document
+- - detaches the scroll strategy
```typescript
this.scrollStrategy.initialize(document, overlayService, id);
@@ -42,7 +42,7 @@ this.scrollStrategy.detach();
### 作業の開始
-ポジション ストラテジは、 メソッドが呼ばれたときに パラメーターのプロパティとして渡されます。
+ポジション ストラテジは、 メソッドが呼ばれたときに パラメーターのプロパティとして渡されます。
```typescript
// Initializing and using overlay settings
@@ -57,7 +57,7 @@ const overlayId = overlay.attach(dummyElement, overlaySettings);
-オーバーレイで使用するスクロール方法の変更は、オーバーレイに渡される オブジェクトの プロパティをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された ID をデタッチする必要があります:
+オーバーレイで使用するスクロール方法の変更は、オーバーレイに渡される オブジェクトの プロパティをオーバーライドします。ストラテジがすでにアタッチされている場合は、以前に生成された ID をデタッチする必要があります:
```typescript
// overlaySettings is an existing object of type OverlaySettings
@@ -82,8 +82,8 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
### スクロール方法
-オーバーレイのスクロールの処理方法を決定するためにスクロール方法を オブジェクトによって渡すことができます。
-以下のデモは複数の を紹介します。
+オーバーレイのスクロールの処理方法を決定するためにスクロール方法を オブジェクトによって渡すことができます。
+以下のデモは複数の を紹介します。
@@ -91,12 +91,12 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
## モーダル
- オブジェクトにブール値 ( ) を渡すことができます。これはオーバーレイが表示される方法を制御します。
-- プロパティが `false` の場合、要素は DOM 前景にアタッチされますが、すべての要素がまだアクティブで操作可能 (スクロール、クリックなど) です。
-- プロパティが `true` の場合、要素が DOM 前景にアタッチされ、背景の要素が非アクティブなため操作不能となり、すべてのイベントが中止されます。
+ オブジェクトにブール値 ( ) を渡すことができます。これはオーバーレイが表示される方法を制御します。
+- プロパティが `false` の場合、要素は DOM 前景にアタッチされますが、すべての要素がまだアクティブで操作可能 (スクロール、クリックなど) です。
+- プロパティが `true` の場合、要素が DOM 前景にアタッチされ、背景の要素が非アクティブなため操作不能となり、すべてのイベントが中止されます。
-- If the property is `false`, the element will be attached to the DOM foreground but everything will still be active and interactable - e.g. scrolling, clicking, etc.
-- If the property is `true`, the element will be attached to the DOM foreground and an overlay blocker will wrap behind it, stopping propagation of all events:
+- If the property is `false`, the element will be attached to the DOM foreground but everything will still be active and interactable - e.g. scrolling, clicking, etc.
+- If the property is `true`, the element will be attached to the DOM foreground and an overlay blocker will wrap behind it, stopping propagation of all events:
@@ -104,12 +104,12 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
## API リファレンス
--
+-
## その他のリソース
- [オーバーレイ メイン トピック](overlay.md)
- [配置ストラテジ](overlay-position.md)
- [スタイル設定](overlay-styling.md)
--
+-
-
diff --git a/docs/angular/src/content/jp/components/overlay-styling.mdx b/docs/angular/src/content/jp/components/overlay-styling.mdx
index 8044122ff0..b632cb7be1 100644
--- a/docs/angular/src/content/jp/components/overlay-styling.mdx
+++ b/docs/angular/src/content/jp/components/overlay-styling.mdx
@@ -76,7 +76,7 @@ $my-drop-down-theme: drop-down-theme(
}
```
-コンボのリスト内項目は、コンポーネント `ホスト`の子孫ではありません。現在、ドキュメント本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、`overlaySettings` の プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
+コンボのリスト内項目は、コンポーネント `ホスト`の子孫ではありません。現在、ドキュメント本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。変更するには、`overlaySettings` の プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
以下でコンテナーを配置する要素への参照を渡すことができます。
diff --git a/docs/angular/src/content/jp/components/overlay.mdx b/docs/angular/src/content/jp/components/overlay.mdx
index 32e334c9c3..bc45f908ec 100644
--- a/docs/angular/src/content/jp/components/overlay.mdx
+++ b/docs/angular/src/content/jp/components/overlay.mdx
@@ -25,7 +25,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## はじめに
-はじめに、 をインポートし、コンポーネントへの参照をコンポーネントのコンストラクターに`注入`する必要があります。
+はじめに、 をインポートし、コンポーネントへの参照をコンポーネントのコンストラクターに`注入`する必要があります。
```typescript
@@ -81,7 +81,7 @@ export class MyOverlayComponent {
```
-ページの既存の `ElementRef` から へ渡す場合は以下の手順に従ってください。
+ページの既存の `ElementRef` から へ渡す場合は以下の手順に従ってください。
```HTML
@@ -114,7 +114,7 @@ export class MyOverlayComponent {
-Overlay サービスの メソッドには 2 つのオーバーロードがあります。
+Overlay サービスの メソッドには 2 つのオーバーロードがあります。
- `attach(element, settings?)`
- `attach(component, viewContainerRef, settings?)`
@@ -122,28 +122,28 @@ Overlay サービスの メソッドは次のようになります:
+どちらの場合も、 メソッドは次のようになります:
- Angular から渡されるビューへの参照を取得します。
- ビューを DOM からデタッチし、そこにアンカーを追加します。
-- 提供されている を使用するか、デフォルトのオーバーレイにフォールバックして、ビューをオーバーレイに再アタッチします。
+- 提供されている を使用するか、デフォルトのオーバーレイにフォールバックして、ビューをオーバーレイに再アタッチします。
-次に を呼び出すと、開くアニメーションが再生され、添付されたコンテンツが表示されます。 を呼び出すと、閉じるアニメーションが再生され、添付されているコンテンツが非表示になります。
+次に を呼び出すと、開くアニメーションが再生され、添付されたコンテンツが表示されます。 を呼び出すと、閉じるアニメーションが再生され、添付されているコンテンツが非表示になります。
-最後に メソッドを呼び出すと、ビューが DOM 内の元の場所に再アタッチされます。コンポーネントが メソッドに提供された場合、 を呼び出すと、作成されたインスタンスが破棄されます。
+最後に メソッドを呼び出すと、ビューが DOM 内の元の場所に再アタッチされます。コンポーネントが メソッドに提供された場合、 を呼び出すと、作成されたインスタンスが破棄されます。
- Get the reference to the passed view from Angular
- Detach the view from the DOM and leave an anchor in its place
-- Re-attach the view to the overlay using the provided or falling back to the default overlay ones
+- Re-attach the view to the overlay using the provided or falling back to the default overlay ones
-Calling then will play the open animation, if there is any, and will show the attached content. Calling will play close animation, if there is any, and will hide the attached content.
+Calling then will play the open animation, if there is any, and will show the attached content. Calling will play close animation, if there is any, and will hide the attached content.
-Finally calling method will re-attach the view back to its original location in the DOM. If a component was provided to the method calling will destroy the created instance.
+Finally calling method will re-attach the view back to its original location in the DOM. If a component was provided to the method calling will destroy the created instance.
## コンポーネントのアタッチ
-閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.md#angular-card-の例) コンポーネントをオーバーレイ サービスの メソッドに渡し、IDを生成します。次に、提供された ID で メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
+閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.md#angular-card-の例) コンポーネントをオーバーレイ サービスの メソッドに渡し、IDを生成します。次に、提供された ID で メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
@@ -151,9 +151,9 @@ Finally calling メソッドは 型のオブジェクトを受け取ります。このオブジェクトはコンテンツの表示方法を構成します。このオブジェクトが指定されていない場合、Overlay サービスは渡されたコンテンツを描画するためにデフォルト設定を使用します。
+ メソッドは 型のオブジェクトを受け取ります。このオブジェクトはコンテンツの表示方法を構成します。このオブジェクトが指定されていない場合、Overlay サービスは渡されたコンテンツを描画するためにデフォルト設定を使用します。
-たとえば、コンテンツを要素に相対的に配置するには、オーバーレイの メソッドに別の と ( など) を渡します。コンポーネントの表示方法を構成するには、最初に オブジェクトを作成します。
+たとえば、コンテンツを要素に相対的に配置するには、オーバーレイの メソッドに別の と ( など) を渡します。コンポーネントの表示方法を構成するには、最初に オブジェクトを作成します。
```typescript
// my-overlay-component.component.ts
@@ -191,15 +191,15 @@ export class MyOverlayComponent {
## プリセット オーバーレイ設定
- および メソッドにより、事前定義された設定セットに基づいて を容易に作成することができます。
+ および メソッドにより、事前定義された設定セットに基づいて を容易に作成することができます。
- メソッドは、`outlet` パラメーターが指定されている場合、 または を使用して非モーダル を作成します。`AbsolutePosition` 列挙体は、`Center`、`Top`、または `Bottom` から選択できる位置を定義します。デフォルトの位置は `Center` です。
+ メソッドは、`outlet` パラメーターが指定されている場合、 または を使用して非モーダル を作成します。`AbsolutePosition` 列挙体は、`Center`、`Top`、または `Bottom` から選択できる位置を定義します。デフォルトの位置は `Center` です。
```typescript
const globalOverlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Top);
```
- メソッドは、 、 または を使用して を作成します。ターゲット、位置およびストラテジを受け入れます。`target` は、コンポーネントが表示するアタッチ ポイントまたは要素です。`position` は `RelativePosition` 列挙体であり、次のオプションがあります: `Above`、`Below`、`Before`、`After`、`Default`。`Default` オプションは、要素をターゲットの下に配置し、左揃えにします。位置ストラテジは、`RelativePositionStrategy` 列挙体を介して設定できます。デフォルト値は `Auto` です。
+ メソッドは、 、 または を使用して を作成します。ターゲット、位置およびストラテジを受け入れます。`target` は、コンポーネントが表示するアタッチ ポイントまたは要素です。`position` は `RelativePosition` 列挙体であり、次のオプションがあります: `Above`、`Below`、`Before`、`After`、`Default`。`Default` オプションは、要素をターゲットの下に配置し、左揃えにします。位置ストラテジは、`RelativePositionStrategy` 列挙体を介して設定できます。デフォルト値は `Auto` です。
```typescript
const targetElement = this.myAnchorButton.nativeElement;
@@ -217,9 +217,9 @@ const connectedOverlaySettings = IgxOverlayService.createRelativeOverlaySettings
## オーバーレイの非表示
- は、オーバーレイ コンテンツを非表示にします。すべてのオーバーレイ サービスで描画される要素がサービスによって割り当てられた一意の ID があります。 メソッドは、描画されたコンテンツの識別子を返します。コンテンツを非表示にするには、この ID をオーバーレイの メソッドに渡す必要があります。すべてのオーバーレイを非表示にするには、 メソッドを呼び出すことができます。
+ は、オーバーレイ コンテンツを非表示にします。すべてのオーバーレイ サービスで描画される要素がサービスによって割り当てられた一意の ID があります。 メソッドは、描画されたコンテンツの識別子を返します。コンテンツを非表示にするには、この ID をオーバーレイの メソッドに渡す必要があります。すべてのオーバーレイを非表示にするには、 メソッドを呼び出すことができます。
-描画されたコンテンツが不要になったら、 メソッドを呼び出す必要があります。このメソッドは、オーバーレイからコンテンツを削除し、該当する場合は、DOM 内の元の場所にコンテンツを再アタッチします。 メソッドは、 メソッドから生成された ID も必須パラメーターとして受け入れます。すべてのオーバーレイを削除するには、 メソッドを呼び出すことができます。
+描画されたコンテンツが不要になったら、 メソッドを呼び出す必要があります。このメソッドは、オーバーレイからコンテンツを削除し、該当する場合は、DOM 内の元の場所にコンテンツを再アタッチします。 メソッドは、 メソッドから生成された ID も必須パラメーターとして受け入れます。すべてのオーバーレイを削除するには、 メソッドを呼び出すことができます。
以前に定義されたオーバーレイ メソッドをオーバーレイ要素を表示して非表示するために変更できます。
@@ -277,13 +277,13 @@ export class MyOverlayComponent implements OnDestroy {
## アタッチ設定
- メソッドの パラメーターを使用してコンテンツの表示方法を変更できます。たとえば、コンテンツの配置、スクロールの動作、およびコンテナーがモーダルかどうかを設定できます。
+ メソッドの パラメーターを使用してコンテンツの表示方法を変更できます。たとえば、コンテンツの配置、スクロールの動作、およびコンテナーがモーダルかどうかを設定できます。
- が指定されていない場合、切り替えた要素はデフォルト表示設定を使用します。
+ が指定されていない場合、切り替えた要素はデフォルト表示設定を使用します。
```typescript
defaultOverlaySettings = {
@@ -299,7 +299,7 @@ defaultOverlaySettings = {
## igxToggle との統合
- は と完全に統合されます。コンテンツの切り替えで Toggle ディレクティブの メソッドにカスタム オーバーレイ設定を渡すことができます。
+ は と完全に統合されます。コンテンツの切り替えで Toggle ディレクティブの メソッドにカスタム オーバーレイ設定を渡すことができます。
構成設定をトグルのメソッドに渡す方法は以下の例で紹介されます。
@@ -347,7 +347,7 @@ export class ExampleComponent {
## API リファレンス
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/paginator.mdx b/docs/angular/src/content/jp/components/paginator.mdx
index 98e82cb62a..6921b90f3d 100644
--- a/docs/angular/src/content/jp/components/paginator.mdx
+++ b/docs/angular/src/content/jp/components/paginator.mdx
@@ -151,7 +151,7 @@ Ignite UI for Angular Paginator モジュールまたはディレクティブを
最小限のコードで、ページング コンポーネントのすべての文字列を簡単にローカライズできます。特定のページング インスタンスをローカライズするには、 入力プロパティを使用します。
-**手順 1** - `IPaginatorResourceStrings` インターフェースと 関数をインポートします:
+**手順 1** - `IPaginatorResourceStrings` インターフェースと 関数をインポートします:
```ts
import { IPaginatorResourceStrings, changei18n } from "igniteui-angular";
@@ -171,7 +171,7 @@ private paginatorResourceStrings: IPaginatorResourceStrings = {
```
-**手順 3** - app.module レベルでコンポーネントのグローバル i18n を変更するために、オブジェクトをパラメーターとして 関数に渡します。これにより、アプリケーションのすべてのページング コンポーネントのリソース文字列が変更されます。
+**手順 3** - app.module レベルでコンポーネントのグローバル i18n を変更するために、オブジェクトをパラメーターとして 関数に渡します。これにより、アプリケーションのすべてのページング コンポーネントのリソース文字列が変更されます。
```ts
public ngOnInit(): void {
diff --git a/docs/angular/src/content/jp/components/query-builder-model.mdx b/docs/angular/src/content/jp/components/query-builder-model.mdx
index b7effe8edf..fc97bfb887 100644
--- a/docs/angular/src/content/jp/components/query-builder-model.mdx
+++ b/docs/angular/src/content/jp/components/query-builder-model.mdx
@@ -24,14 +24,14 @@ Angular Query Builder は、シリアル化/逆シリアル化可能な JSON 形
## クエリ ビルダー モデル
- に式ツリーを設定するには、 を定義する必要があります。各 には、データ レコードがツリーに対してどのように解決されるかを表すフィルタリング ロジックが必要であり、ユース ケースに応じて、フィールド名、エンティティ名、および返却フィールドドの配列を渡すことができます。特定のエンティティ内のすべてのフィールドを返す必要がある場合は、`returnFields` プロパティを ['*'] に設定できます。
+ に式ツリーを設定するには、 を定義する必要があります。各 には、データ レコードがツリーに対してどのように解決されるかを表すフィルタリング ロジックが必要であり、ユース ケースに応じて、フィールド名、エンティティ名、および返却フィールドドの配列を渡すことができます。特定のエンティティ内のすべてのフィールドを返す必要がある場合は、`returnFields` プロパティを ['*'] に設定できます。
```ts
const tree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Entity A', ['*']);
```
-ルート が作成されると、その `filteringOperands` プロパティを (単一の式またはグループ) または (サブクエリ) の配列に設定することで、条件、グループ、またはサブクエリを追加できます。
-各 および には、フィルタリング式が配置されている列の名前である `fieldName` と、 型の `condition` または `conditionName` のいずれかが必要です。必要に応じて、`searchVal`、 タイプの `searchTree`、および `ignoreCase` プロパティを設定することもできます。
+ルート が作成されると、その `filteringOperands` プロパティを (単一の式またはグループ) または (サブクエリ) の配列に設定することで、条件、グループ、またはサブクエリを追加できます。
+各 および には、フィルタリング式が配置されている列の名前である `fieldName` と、 型の `condition` または `conditionName` のいずれかが必要です。必要に応じて、`searchVal`、 タイプの `searchTree`、および `ignoreCase` プロパティを設定することもできます。
- 簡単な**式**の定義:
diff --git a/docs/angular/src/content/jp/components/query-builder.mdx b/docs/angular/src/content/jp/components/query-builder.mdx
index de4db8ab68..33fc2249b1 100644
--- a/docs/angular/src/content/jp/components/query-builder.mdx
+++ b/docs/angular/src/content/jp/components/query-builder.mdx
@@ -98,7 +98,7 @@ Ignite UI for Angular Query Builder モジュールまたはディレクティ
条件を追加するには、フィールド、フィールドのデータ タイプに基づくオペランド、およびオペランドが単項でない場合は値を選択します。`In` オペランドと `Not In` オペランドを使用すると、単に値を指定するのではなく、異なるエンティティの条件を含む内部クエリを作成できます。条件が確定すると、条件情報を含むチップが表示されます。チップをクリックまたはホバーすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。
-各グループの上にある ( or ) ボタンをクリックすると、グループ タイプを変更したり、内部の条件をグループ化解除したりするためのオプションを含むメニューが開きます。
+各グループの上にある ( or ) ボタンをクリックすると、グループ タイプを変更したり、内部の条件をグループ化解除したりするためのオプションを含むメニューが開きます。
すべての条件は特定のエンティティの特定のフィールドに関連しているため、エンティティを変更すると、すべての事前設定された条件とグループがリセットされます。新しいエンティティを選択すると、 入力プロパティが false に設定されていない限り、確認ダイアログが表示されます。
@@ -209,7 +209,7 @@ Ignite UI for Angular Query Builder コンポーネントでは、次の定義
### 検索値
-条件の検索値は、 ディレクティブを使用してテンプレート化でき、`igx-query-builder` 本体内の `` に適用されます。
+条件の検索値は、 ディレクティブを使用してテンプレート化でき、`igx-query-builder` 本体内の `` に適用されます。
```html
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/radial-gauge.mdx b/docs/angular/src/content/jp/components/radial-gauge.mdx
index b3c968176b..7613eb40bc 100644
--- a/docs/angular/src/content/jp/components/radial-gauge.mdx
+++ b/docs/angular/src/content/jp/components/radial-gauge.mdx
@@ -10,21 +10,16 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular ラジアル ゲージの概要
-Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。 には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、 プロパティの設定で簡単にカスタマイズできます。
+Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。 には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、 プロパティの設定で簡単にカスタマイズできます。
## Angular ラジアル ゲージの例
-以下のサンプルは、同じ でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
+以下のサンプルは、同じ でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
-
-
## 依存関係
gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -34,15 +29,9 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-gauges
```
-
-
-
## モジュールの要件
- を作成するには、以下のモジュールが必要です。
-
-
-
+ を作成するには、以下のモジュールが必要です。
```ts
// app.module.ts
@@ -62,8 +51,6 @@ export class AppModule {}
以下のコードは針およびスケールで 3 つの比較範囲を含むラジアル ゲージを作成する方法を紹介します。
-
-
```html
および プロパティで円弧部分が塗りつぶされます。これには、 プロパティを設定します。
-
-
+バッキングは、円形またはフィットにできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合は および プロパティで円弧部分が塗りつぶされます。これには、 プロパティを設定します。
```html
```
-
-
-
-
-
## スケール
-スケールは視覚要素で、 と 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。 と プロパティは、スケールの円弧の境界線を定義します。 プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。 、 、 プロパティを設定してスケールの外観をカスタマイズできます。
-
-
+スケールは視覚要素で、 と 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。 と プロパティは、スケールの円弧の境界線を定義します。 プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。 、 、 プロパティを設定してスケールの外観をカスタマイズできます。
```html
```
-
-
-
-
-
## ラベルとタイトル
-ゲージ ラベルは と の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す プロパティで小数を使用してラベルの配置を設定できます。 や など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。
-
-これらの針のラベルにはそれぞれ、 、 、`SubtitleFontSize`、 など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。
-
+ゲージ ラベルは と の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す プロパティで小数を使用してラベルの配置を設定できます。 や など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。
+これらの針のラベルにはそれぞれ、 、 、`SubtitleFontSize`、 など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。
```html
```
-
-
-
-
## タイトルとサブタイトル
- プロパティと プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、 と を true に設定すると、針の値が表示され、 と がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。
-
-以下に説明するように針のハイライトが表示されている場合は、 を介してカスタム テキストを表示できます。それ以外の場合は、 を有効にしてその値を表示できます。
-
+ プロパティと プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、 と を true に設定すると、針の値が表示され、 と がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。
+以下に説明するように針のハイライトが表示されている場合は、 を介してカスタム テキストを表示できます。それ以外の場合は、 を有効にしてその値を表示できます。
```html
```
-
-
-
## オプティカル スケーリング
-ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。
+ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。
-
## 目盛
-目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは と の間の に表示されます。また プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、 、 、 、 に少数値 (0 から 1 の間) を設定して制御できます。
-
-
+目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは と の間の に表示されます。また プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、 、 、 、 に少数値 (0 から 1 の間) を設定して制御できます。
```html
```
-
-
-
-
-
## 範囲
-範囲に や プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、 や などのカスタマイズ プロパティがあります。または、 や プロパティを範囲の色リストに設定することもできます。
-
-
+範囲に や プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、 や などのカスタマイズ プロパティがあります。または、 や プロパティを範囲の色リストに設定することもできます。
```html
```
-
-
-
-
-
## 針
ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 1 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボット ブラシがあります。
-サポートされている針の形とキャップは、 と プロパティで設定します。
-
-ゲージのインタラクティブ モードを有効 ( プロパティを使用) にするとユーザーは と の値間で針をドラッグして値を変更できるようになります。
-
+サポートされている針の形とキャップは、 と プロパティで設定します。
+ゲージのインタラクティブ モードを有効 ( プロパティを使用) にするとユーザーは と の値間で針をドラッグして値を変更できるようになります。
```html
```
-
-
-
-
## 針のハイライト
-ラジアル ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の の不透明度が低く表示されます。これを有効にするには、まず を Overlay に設定し、次に を適用します。
-
-
+ラジアル ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の の不透明度が低く表示されます。これを有効にするには、まず を Overlay に設定し、次に を適用します。
```html
```
-
-
-
-
## まとめ
上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
-
-
```html
```
-
-
-
## API リファレンス
-
-
+
+
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx
index f118d339f7..c808b0f274 100644
--- a/docs/angular/src/content/jp/components/radio-button.mdx
+++ b/docs/angular/src/content/jp/components/radio-button.mdx
@@ -265,9 +265,9 @@ import { IgxRadioModule } from 'igniteui-angular/radio';
})
```
-まず、 を作成し、いくつかの コンポーネントを追加します。
+まず、 を作成し、いくつかの コンポーネントを追加します。
-ラジオ グループの プロパティの設定は**必須**であることに注意してください。
+ラジオ グループの プロパティの設定は**必須**であることに注意してください。
```html
@@ -285,7 +285,7 @@ public fruits = ["Apple", "Mango", "Banana", "Orange"];
### 配置
- 入力プロパティを使用して、ラジオ グループ内の `igxRadio` コンポーネントの方向を変更します。`horizontal` および `vertical` から選択できます。ラジオ グループのデフォルト配置は horizontal (水平) です。
+ 入力プロパティを使用して、ラジオ グループ内の `igxRadio` コンポーネントの方向を変更します。`horizontal` および `vertical` から選択できます。ラジオ グループのデフォルト配置は horizontal (水平) です。
```typescript
//sample.component.ts
@@ -313,7 +313,7 @@ public alignment = RadioGroupAlignment.vertical;
--
+-
-
-
diff --git a/docs/angular/src/content/jp/components/ripple.mdx b/docs/angular/src/content/jp/components/ripple.mdx
index 102f0aae59..661e96c7b5 100644
--- a/docs/angular/src/content/jp/components/ripple.mdx
+++ b/docs/angular/src/content/jp/components/ripple.mdx
@@ -74,7 +74,7 @@ export class HomeComponent {}
Ignite UI for Angular Ripple モジュールまたはディレクティブをインポートしたので、`igxRipple` ディレクティブの使用を開始できます。
- は Web Animation API を使用し、[サポートされるブラウザー](http://caniuse.com/#feat=web-animation)でネイティブに実行します。
+ は Web Animation API を使用し、[サポートされるブラウザー](http://caniuse.com/#feat=web-animation)でネイティブに実行します。
その他のブラウザーでは `web-animations.min.js` [ポリフィル](https://github.com/web-animations/web-animations-js)を使用します。
@@ -102,7 +102,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ
### 中央揃えのリップル エフェクト
-デフォルトでリップル エフェクトはクリック イベントの位置から開始します。この動作で要素の中点を原点に変更するには、 プロパティを使用できます。
+デフォルトでリップル エフェクトはクリック イベントの位置から開始します。この動作で要素の中点を原点に変更するには、 プロパティを使用できます。
```html
@@ -114,7 +114,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ
### リップルの期間
- プロパティを使用して、リップルアニメーションの期間を変更できます。これは、デフォルトで 600 ミリ秒に設定されています。
+ プロパティを使用して、リップルアニメーションの期間を変更できます。これは、デフォルトで 600 ミリ秒に設定されています。
```html
@@ -126,7 +126,7 @@ Ignite UI for Angular Ripple モジュールまたはディレクティブをイ
### リップルの対象要素
- プロパティを使用して親要素内の特定の要素にリップル エフェクトをアタッチします。
+ プロパティを使用して親要素内の特定の要素にリップル エフェクトをアタッチします。
```html
@@ -182,7 +182,7 @@ $custom-ripple-theme: ripple-theme(
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/components/select.mdx b/docs/angular/src/content/jp/components/select.mdx
index 5faf48ed47..ae5e859f3b 100644
--- a/docs/angular/src/content/jp/components/select.mdx
+++ b/docs/angular/src/content/jp/components/select.mdx
@@ -287,7 +287,7 @@ public greengrocery: Array<{ label: string, items: Array<{ type: string, origin:
## カスタム オーバーレイ設定
-カスタム
を作成できます。テンプレートを以下のように定義します。
+カスタム
を作成できます。テンプレートを以下のように定義します。
```html
@@ -328,13 +328,13 @@ export class MyClass implements OnInit {
}
```
- に直接渡す オブジェクトを作成しましたが必須ではありません。ただし、カスタム ポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。
+ に直接渡す オブジェクトを作成しましたが必須ではありません。ただし、カスタム ポジショニングを定義するためにストラテジのデフォルト設定をオーバーライドします。
- [ngOnInit](https://angular.io/api/core/OnInit) フックの内側にすべて設定できます。コンポーネントの生成時にテンプレートに自動的に反映します。
-テンプレートを以下のようにカスタマイズされた オブジェクトを の open 関数に渡すこともできます。
+テンプレートを以下のようにカスタマイズされた オブジェクトを の open 関数に渡すこともできます。
```html
@@ -458,11 +458,11 @@ $custom-select-theme: select-theme(
-
-
-
--
--
--
--
--
+-
+-
+-
+-
+-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/simple-combo.mdx b/docs/angular/src/content/jp/components/simple-combo.mdx
index c5f942c150..bf65c3726a 100644
--- a/docs/angular/src/content/jp/components/simple-combo.mdx
+++ b/docs/angular/src/content/jp/components/simple-combo.mdx
@@ -188,7 +188,7 @@ export class MySimpleComboComponent {
}
```
-Simple ComboBox は、選択が変更されるたびに イベントを発生させます。発行されたイベント引数 には、変更前の選択、現在の選択、および表示された項目に関する情報が含まれています。イベントをキャンセルして、新しい項目による選択の更新を防ぐこともできます。
+Simple ComboBox は、選択が変更されるたびに イベントを発生させます。発行されたイベント引数 には、変更前の選択、現在の選択、および表示された項目に関する情報が含まれています。イベントをキャンセルして、新しい項目による選択の更新を防ぐこともできます。
イベントへのバインドは、`igx-simple-combo` タグの適切な `@Output` プロパティを介して行うことができます。
@@ -373,7 +373,7 @@ $custom-drop-down-theme: drop-down-theme(
```
- コンポーネントは、[`IgxOverlay`](overlay.md) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、 を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
+ コンポーネントは、[`IgxOverlay`](overlay.md) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、 を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
### サンプル
diff --git a/docs/angular/src/content/jp/components/slider/slider-ticks.mdx b/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
index 3cdc171bd5..1ca7aaa5de 100644
--- a/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
+++ b/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-
--
+-
-
diff --git a/docs/angular/src/content/jp/components/slider/slider.mdx b/docs/angular/src/content/jp/components/slider/slider.mdx
index 1cf545c3a9..7f64421e7c 100644
--- a/docs/angular/src/content/jp/components/slider/slider.mdx
+++ b/docs/angular/src/content/jp/components/slider/slider.mdx
@@ -290,7 +290,7 @@ public labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturd
### ラベルのテンプレート化
-上記では、 ディレクティブと ディレクティブの両方を使用して、カスタム `label` テンプレートを提供する方法を意図的に示しました。直感的に は に対応し、 は に対応すると想定できます。
+上記では、 ディレクティブと ディレクティブの両方を使用して、カスタム `label` テンプレートを提供する方法を意図的に示しました。直感的に は に対応し、 は に対応すると想定できます。
ここでの は、暗黙的に `value` 入力プロパティへの参照を、そして `labelsView` が有効な場合は明示的に `labels` 入力への参照を与えます。
```html
@@ -352,7 +352,7 @@ public type = SliderType.RANGE;
```
- を に設定してすべての表示ラベルを回転します。
+ を に設定してすべての表示ラベルを回転します。
```typescript
...
@@ -436,7 +436,7 @@ Lastly, we will see how we can provide a custom template for the **tick labels**
```
-Applying to the `ng-template` assigns the template over all **tick labels**.
+Applying to the `ng-template` assigns the template over all **tick labels**.
The context executes per each tick.
@@ -633,7 +633,7 @@ At the end your slider should look like this:
-
-
- `SliderType`
--
+-
-
-
diff --git a/docs/angular/src/content/jp/components/splitter.mdx b/docs/angular/src/content/jp/components/splitter.mdx
index 675f0a135d..7d68cc77f7 100644
--- a/docs/angular/src/content/jp/components/splitter.mdx
+++ b/docs/angular/src/content/jp/components/splitter.mdx
@@ -337,7 +337,7 @@ igx-splitter {
-
-
--
+-
-
diff --git a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx b/docs/angular/src/content/jp/components/spreadsheet-activation.mdx
index b3b6db8293..96908dba32 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-activation.mdx
@@ -9,35 +9,29 @@ _description: Learn how to use the activation feature of the Angular spreadshee
_keywords: Excel Spreadsheet, activation, Ignite UI for Angular, Infragistics
_license: commercial
-
---
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular スプレッドシートのアクティブ化
Angular Spreadsheet コンポーネントは、コントロールで現在アクティブなセル、ペイン、およびワークシートを決定できるプロパティを公開します。これは、ユーザーがコントロール内で移動または編集している場所を判断するのに役立ちます。
## Angular スプレッドシートのアクティブ化の例
-
-
-
-
## アクティベーションの概要
-Angular コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。
+Angular コントロールのアクティブ化は、スプレッドシートの現在の のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。
-- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。
-- : スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。
-- : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。
+- : スプレッドシートのアクティブ セルを設定します。設定するには、 の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。
+- : スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。
+- : スプレッドシート コントロールの 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている 内の既存のワークシートに設定することで設定できます。
## コード スニペット
-次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。
+次のコード スニペットは、 コントロールのセルとワークシートのアクティブ化の設定を示しています。
```ts
this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1);
@@ -45,10 +39,9 @@ this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1);
this.spreadsheet.activeCell = new SpreadsheetCell("C5");
```
-
## API リファレンス
-
+
-
-
+
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
index 47b73c1c5e..6a1a23c01f 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
@@ -10,22 +10,19 @@ 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';
-
# Angular Spreadsheet チャート アダプター
-Angular Spreadsheet コンポーネントを使用して にチャートを表示できます。
+Angular Spreadsheet コンポーネントを使用して にチャートを表示できます。
## Angular Spreadsheet チャート アダプターの例
-
-
## チャート アダプターの概要
- を使用すると、スプレッドシートにチャートを表示できます。スプレッドシート チャート アダプターは、Infragistics.Documents.Excel.WorksheetChart インスタンスに基づいてスプレッド シートのチャート要素を作成し、初期化します。
+ を使用すると、スプレッドシートにチャートを表示できます。スプレッドシート チャート アダプターは、Infragistics.Documents.Excel.WorksheetChart インスタンスに基づいてスプレッド シートのチャート要素を作成し、初期化します。
-WorksheetChart をワークシートに追加するには、ワークシートの Shapes コレクションの メソッドを使用する必要があります。チャートの追加の詳細については、下記をご覧ください。
+WorksheetChart をワークシートに追加するには、ワークシートの Shapes コレクションの メソッドを使用する必要があります。チャートの追加の詳細については、下記をご覧ください。
以下はその手順です。
@@ -85,12 +82,10 @@ Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを
-以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して を保存およびロードしています。
+以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して を保存およびロードしています。
-ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、 クラスをインポートする必要があります。
-
-
+ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、 クラスをインポートする必要があります。
```ts
import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter';
@@ -102,12 +97,9 @@ import { Worksheet } from 'igniteui-angular-excel';
import { WorksheetCell } from 'igniteui-angular-excel';
```
-
-
-
## コード スニペット
-以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。
+以下のコード スニペットは、 コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。
```typescript
this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();
@@ -161,10 +153,9 @@ ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx").
});
```
-
## API リファレンス
-
+
-
-
+
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
index d829afe6c2..c2dd7a55d2 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
@@ -9,24 +9,17 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular クリップボードでの作業
このトピックでは、クリップボードの操作を実行する方法を説明します。
## Angular クリップボードでの作業の例
-
-
-
-
## 依存関係
-クリップボードを利用する前に、`SpreadsheetAction` 列挙型をインポートします。
-
-
+クリップボードを利用する前に、 列挙型をインポートします。
```ts
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
@@ -35,7 +28,7 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
## 使用方法
-次のコード スニペットは、Angular コントロールでクリップボードに関連するコマンドを実行する方法を示しています。
+次のコード スニペットは、Angular コントロールでクリップボードに関連するコマンドを実行する方法を示しています。
```ts
public cut(): void {
@@ -51,8 +44,7 @@ public paste(): void {
}
```
-
## API リファレンス
-`SpreadsheetAction`
-
+
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx b/docs/angular/src/content/jp/components/spreadsheet-commands.mdx
index 878d51b1f9..1aa52a546c 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-commands.mdx
@@ -9,24 +9,17 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular コマンドの使用
Angular Spreadsheet コンポーネントは、スプレッドシートのさまざまな機能をアクティブにするためのコマンドを実行できます。このトピックでは、コマンドによりコントロールを使用してさまざまな操作を実行する方法を説明します。多くのコマンドは、アクティブセル、行、またはワークシートに基づいてアクションを実行します。例えば、ZoomIn と ZoomOut の 2 つのコマンドです。完全なリストは SpreadsheetAction 列挙型を見てください。
## Angular コマンドの使用の例
-
-
-
-
## 依存関係
-コマンドボードを利用する前に、`SpreadsheetAction` をインポートします。
-
-
+コマンドボードを利用する前に、 をインポートします。
```ts
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
@@ -37,8 +30,6 @@ import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
以下のコード スニペットは、データの検証規則を設定する方法を示します。
-
-
```ts
@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
public spreadsheet: IgxSpreadsheetComponent;
@@ -54,9 +45,6 @@ public zoomOut(): void {
}
```
-
-
-
## API リファレンス
-`SpreadsheetAction`
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
index 64ca64d5f0..08c19a82ee 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
@@ -9,53 +9,47 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular Spreadsheet の条件付き書式設定
Angular Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。これにより、条件に基づいてデータのさまざまな部分をハイライト表示できます。
## Angular Spreadsheet の条件付き書式設定の例
-
-
-
-
## 条件付き書式設定の概要
-特定のワークシートの条件付き書式を構成するには、ワークシートの コレクションに公開される `Add` メソッドを使用できます。この `Add` メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。
+特定のワークシートの条件付き書式を構成するには、ワークシートの コレクションに公開される `Add` メソッドを使用できます。この `Add` メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。
-ワークシートに追加できる条件付き書式の多くには、その条件付き書式の条件が満たされたときにセルを表示する方法を決定する プロパティがあります。たとえば、 および などのこの プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。
+ワークシートに追加できる条件付き書式の多くには、その条件付き書式の条件が満たされたときにセルを表示する方法を決定する プロパティがあります。たとえば、 および などのこの プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。
-条件付き書式が作成され、 が適用される場合、ワークシートのセルにサポートされるプロパティのサブセットがあります。現在サポートされる プロパティは 、`Border` プロパティ、 、および strikethrough、underline、italic、bold、color などの プロパティです。以下のコード スニペットに複数のプロパティが設定されます。
+条件付き書式が作成され、 が適用される場合、ワークシートのセルにサポートされるプロパティのサブセットがあります。現在サポートされる プロパティは 、`Border` プロパティ、 、および strikethrough、underline、italic、bold、color などの プロパティです。以下のコード スニペットに複数のプロパティが設定されます。
-ワーク セルの可視化の動作が異なるため、 プロパティがない条件付き書式もあります。この条件付き書式は 、 、 です。
+ワーク セルの可視化の動作が異なるため、 プロパティがない条件付き書式もあります。この条件付き書式は 、 、 です。
既存の Workbook を Excel から読み込む際に、ワークブックが読み込まれた場合も書式設定は保持されます。ワークブックを Excel ファイルに保存する場合も保持されます。
-以下は、Angular コントロールでサポートされている条件付き書式の一覧です。
-
-- : メソッドを使用して追加されたこの条件付きフォーマットは、セルの値が関連する範囲の平均または標準偏差より上か下かに基づいて、ワークシートセルの視覚属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加された条件付き書式は、最小値、中央値、最大値に対するセルの値に基づいてワークシート セルの色を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、関連付けられた値の範囲に対するセルの値に基づいてワークシートのセルにデータバーを表示するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの日付値が指定された時間範囲内にあるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの値が一意であるか、関連付けられた範囲全体で複製されるかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの値が式で定義された基準を満たすかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、しきい値に対するセルの値に基づいてワークシートのセルにアイコンを表示するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの値が論理演算子で定義された基準を満たすかどうかに基づいてワークシートセルの視覚属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの値が関連する範囲全体の値の最下位ランクの上部にあるかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルのテキスト値が メソッドのパラメーターの文字列および 値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。
-- : メソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+以下は、Angular コントロールでサポートされている条件付き書式の一覧です。
+
+- : メソッドを使用して追加されたこの条件付きフォーマットは、セルの値が関連する範囲の平均または標準偏差より上か下かに基づいて、ワークシートセルの視覚属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加された条件付き書式は、最小値、中央値、最大値に対するセルの値に基づいてワークシート セルの色を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、関連付けられた値の範囲に対するセルの値に基づいてワークシートのセルにデータバーを表示するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの日付値が指定された時間範囲内にあるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの値が一意であるか、関連付けられた範囲全体で複製されるかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの値が式で定義された基準を満たすかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、しきい値に対するセルの値に基づいてワークシートのセルにアイコンを表示するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの値が論理演算子で定義された基準を満たすかどうかに基づいてワークシートセルの視覚属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの値が関連する範囲全体の値の最下位ランクの上部にあるかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルのテキスト値が メソッドのパラメーターの文字列および 値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。
+- : メソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
## 依存関係
- コントロールに条件付き書式を追加するには、以下の依存関係をインポートする必要があります。
-
+ コントロールに条件付き書式を追加するには、以下の依存関係をインポートする必要があります。
```ts
import { CellFill } from "igniteui-angular-excel";
@@ -69,6 +63,3 @@ import { FormatConditionTimePeriod } from 'igniteui-angular-excel';
import { FormatConditionTopBottom } from "igniteui-angular-excel";
import { WorkbookColorInfo } from 'igniteui-angular-excel';
```
-
-
-
diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
index 517bd9a263..d0876ed9c5 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
@@ -9,40 +9,30 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular Spreadsheet の構成
Angular Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズーム レベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。
## Angular Spreadsheet の構成の例
-
-
-
-
## セル編集の構成
-ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、 コントロールに ENTER キーを押すと現在アクティブなセルに隣接するセルに移動できます。
+ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、 コントロールに ENTER キーを押すと現在アクティブなセルに隣接するセルに移動できます。
-この ENTER キーナビゲーションを有効にするために、 プロパティを **true** に設定できます。false に設定すると、ENTER キーを押してもアクティブ セルは変わりません。
+この ENTER キーナビゲーションを有効にするために、 プロパティを **true** に設定できます。false に設定すると、ENTER キーを押してもアクティブ セルは変わりません。
-Enter キーを押したときに移動する隣接セルの方向は、 プロパティを `Down`、`Up`、`Left`、`Right` に設定して構成することもできます。
+Enter キーを押したときに移動する隣接セルの方向は、 プロパティを `Down`、`Up`、`Left`、`Right` に設定して構成することもできます。
以下のコード スニペットは上記のデモです。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.isEnterKeyNavigationEnabled = true;
this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
@@ -50,89 +40,69 @@ this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDire
## 数式バーの構成
-Angular は、コントロールの プロパティを設定して数式バーの表示/非表示を設定できます。
+Angular は、コントロールの プロパティを設定して数式バーの表示/非表示を設定できます。
以下のコード スニペットは上記のデモです。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.isFormulaBarVisible = true;
```
## ガイドラインの設定
- は、コントロールの プロパティを設定して数式バーの表示/非表示を設定できます。
+ は、コントロールの プロパティを設定して数式バーの表示/非表示を設定できます。
以下のコード スニペットは上記のデモです。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.areGridlinesVisible = true;
```
## ヘッダーの構成
- は、 プロパティを設定してへッダーの可視性を設定できます。
+ は、 プロパティを設定してへッダーの可視性を設定できます。
以下のコード スニペットは上記のデモです。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.areHeadersVisible = false;
```
## ナビゲーションの構成
- コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。
-
-たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして → 矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、 は終了モードから飛び出します。
+ コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。
-ユーザーが END キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの プロパティを設定することでプログラムで設定できます。
-
-以下のコード スニペットは、 を終了モードで開始させる方法を示しています。
+たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして → 矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、 は終了モードから飛び出します。
+ユーザーが END キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの プロパティを設定することでプログラムで設定できます。
+以下のコード スニペットは、 を終了モードで開始させる方法を示しています。
```html
```
-
-
-
```ts
this.spreadsheet.isInEndMode = true;
```
## 保護の設定
- は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの `Protect()` メソッドを呼び出して保護し、`Unprotect()` メソッドを呼び出して保護解除することで設定できます。
+ は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの `Protect()` メソッドを呼び出して保護し、`Unprotect()` メソッドを呼び出して保護解除することで設定できます。
-以下のコードは、 コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。
+以下のコードは、 コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。
```ts
this.spreadsheet.activeWorksheet.protect();
@@ -141,37 +111,32 @@ this.spreadsheet.activeWorksheet.unprotect();
## 選択の設定
- コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (SHIFT または CTRL ) を押します。これは、スプレッドシートの プロパティを次のいずれかの値に設定することによって行われます。
+ コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (SHIFT または CTRL ) を押します。これは、スプレッドシートの プロパティを次のいずれかの値に設定することによって行われます。
-- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
-- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
+- `AddToSelection`: マウスでドラッグするときに CTRL キーを押す必要はありません。新しいセル範囲が オブジェクトの コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
+- `ExtendSelection`: オブジェクトの コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
- `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。CTRL キーを押したままマウスを使用することで新しい範囲を追加できます。また、SHIFT キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。
上記の説明で述べた
-
-オブジェクトは、 コントロールの プロパティを使用して取得できます。
+
+オブジェクトは、 コントロールの プロパティを使用して取得できます。
次のコード スニペットは、選択モードの設定を示しています。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
```
- コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される
-
+ コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、 プロパティを設定できます。複数選択は、 コントロールの プロパティによって返される
+
オブジェクトを介して行われます。
-
-オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。
+
+オブジェクトには、新しい オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。
次のコード スニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。
@@ -181,7 +146,7 @@ this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5,
## タブバー領域の構成
- コントロールは、`TabBarWidth` プロパティと `TabBarVisibility` プロパティを介して、現在アクティブな の からタブバー領域の表示設定と幅の設定を使用します。
+ コントロールは、`TabBarWidth` プロパティと `TabBarVisibility` プロパティを介して、現在アクティブな の からタブバー領域の表示設定と幅の設定を使用します。
タブバー領域は、ワークシート名をコントロール内のタブとして可視化する領域です。
@@ -195,30 +160,24 @@ this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
## ズーム レベルの設定
-Angular Spreadsheet コンポーネントは、 プロパティを設定してズームインとズームアウト機能を追加できます。ズーム レベルは最大 400%、最小 10% です。
+Angular Spreadsheet コンポーネントは、 プロパティを設定してズームインとズームアウト機能を追加できます。ズーム レベルは最大 400%、最小 10% です。
-このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、 を 100 に設定することは、100% に設定することと同じです。
+このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、 を 100 に設定することは、100% に設定することと同じです。
次のコード スニペットは、スプレッドシートのズームレベルを設定する方法を示しています。
-
-
```html
```
-
-
-
```ts
this.spreadsheet.zoomLevel = 200;
```
-
## API リファレンス
-
+
-
-
-
+
+
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
index 16774ee0ac..df444a4ac3 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
@@ -9,24 +9,18 @@ mentionedTypes: ["Spreadsheet"]
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular データ検証
このトピックでは、一括データ検証規則を構成および設定する方法について説明します。
## Angular データ検証の例
-
-
-
-
## 依存関係
データ検証ルールを設定するときは、使用するルールをインポートする必要があります。
-
```ts
import { AnyValueDataValidationRule } from 'igniteui-angular-excel';
import { CustomDataValidationRule } from 'igniteui-angular-excel';
@@ -40,6 +34,4 @@ import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel';
## API References
-
-
-
+
diff --git a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
index 6747558513..c2dd3bc39c 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
@@ -9,31 +9,22 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
# Angular Spreadsheet ハイパーリンク
Angular Spreadsheet コンポーネントは、Excel ワークブックに既存のハイパーリンクを表示、Web サイト、ファイル ディレクトリ、およびワークブック内の他のワークシートにリンクできる新しいハイパーリンクを挿入できます。
## Angular Spreadsheet ハイパーリンクの例
-
-
-
-
## ハイパーリンク概要
-ハイパーリンクを配置するワークシートの `Hyperlinks` コレクションにアクセスすると、ハイパーリンクが表計算、 コントロールに追加されます。このコレクションには、 オブジェクトを受け取る `Add` メソッドがあり、セル アドレス、移動先のハイパーリンク URL、表示テキスト、およびオプションでホバー時に表示するツールチップを定義できます。
+ハイパーリンクを配置するワークシートの `Hyperlinks` コレクションにアクセスすると、ハイパーリンクが表計算、 コントロールに追加されます。このコレクションには、 オブジェクトを受け取る `Add` メソッドがあり、セル アドレス、移動先のハイパーリンク URL、表示テキスト、およびオプションでホバー時に表示するツールチップを定義できます。
## 依存関係
-ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、 クラスをインポートする必要があります。
-
+ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、 クラスをインポートする必要があります。
```ts
import { WorksheetHyperlink } from 'igniteui-angular-excel';
```
-
-
-
diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx
index 019091e4c7..49ea889c8f 100644
--- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx
+++ b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx
@@ -10,18 +10,14 @@ 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';
-
# Angular Spreadsheet の概要
-Angular Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。すべての情報は、セル、ペイン、およびワークシート間を直感的かつ簡単にナビゲートできる表形式で表示できます。 は、Excel のような柔軟なインターフェイス、詳細なチャート、およびアクティブ化、セル編集、条件付き書式設定、スタイル設定、選択、クリップボードなどの機能によって補完されます。
+Angular Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。すべての情報は、セル、ペイン、およびワークシート間を直感的かつ簡単にナビゲートできる表形式で表示できます。 は、Excel のような柔軟なインターフェイス、詳細なチャート、およびアクティブ化、セル編集、条件付き書式設定、スタイル設定、選択、クリップボードなどの機能によって補完されます。
## Angular Spreadsheet の例
-
-
-
## 機能
- 機能
@@ -64,13 +60,9 @@ npm install --save igniteui-angular-excel
npm install --save igniteui-angular-spreadsheet
```
-
## モジュールの要件
- を作成するには、以下のモジュールが必要です。
-
-
-
+ を作成するには、以下のモジュールが必要です。
```ts
import { IgxExcelModule } from 'igniteui-angular-excel';
@@ -98,13 +90,11 @@ Angular スプレッドシート モジュールがインポートされたの
-次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して を保存およびロードしています。
+次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して を保存およびロードしています。
以下は、ワークブックを Angular スプレッドシートにロードする方法を示しています。
-
-
```ts
import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';
@@ -122,10 +112,7 @@ ngOnInit() {
}
```
-
-
-
## API リファレンス
-
-
+
+
diff --git a/docs/angular/src/content/jp/components/texthighlight.mdx b/docs/angular/src/content/jp/components/texthighlight.mdx
index 345442d5e9..9616522539 100644
--- a/docs/angular/src/content/jp/components/texthighlight.mdx
+++ b/docs/angular/src/content/jp/components/texthighlight.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Text Highlight (テキスト強調表示) ディレクティブの概要
-Ignite UI for Angular の および `IgxTextHighlightService` は、テキストの強調表示、大文字と小文字の区別のオプション、完全一致のみの強調表示をサポートします。既に強調表示している部分を含む、テキストの強調表示をアクティブに保持できます。
+Ignite UI for Angular の および `IgxTextHighlightService` は、テキストの強調表示、大文字と小文字の区別のオプション、完全一致のみの強調表示をサポートします。既に強調表示している部分を含む、テキストの強調表示をアクティブに保持できます。
## Angular Text Highlight ディレクティブの例
@@ -259,7 +259,7 @@ export class HomeComponent {
## 複数要素で検索
- は、1 つのアクティブ ハイライトを共有する複数の要素内を検索できます。複数の TextHighlight ディレクティブで同じ 値を持つことにより可能になります。サンプルの設定は、前のサンプルの検索ボックスを再利用しますが、今回は div 要素を 2 つ追加します。 と 入力は複数要素がある場合に便利で、この場合は 2 つ目の div に異なる行値があります。
+ は、1 つのアクティブ ハイライトを共有する複数の要素内を検索できます。複数の TextHighlight ディレクティブで同じ 値を持つことにより可能になります。サンプルの設定は、前のサンプルの検索ボックスを再利用しますが、今回は div 要素を 2 つ追加します。 と 入力は複数要素がある場合に便利で、この場合は 2 つ目の div に異なる行値があります。
```html
ディレクティブは、指定された文字列のすべての発生の色と背景を変更してスタイル設定できます。まず、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
+ ディレクティブは、指定された文字列のすべての発生の色と背景を変更してスタイル設定できます。まず、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
```scss
@use "igniteui-angular/theming" as *;
@@ -387,7 +387,7 @@ $dark-highlight: highlight-theme(
### カスタム スタイル
- ディレクティブの と 入力を利用できます。これらのクラスを のスタイルと組み合わせて、優れたユーザー エクスペリエンスを提供できます。
+ ディレクティブの と 入力を利用できます。これらのクラスを のスタイルと組み合わせて、優れたユーザー エクスペリエンスを提供できます。
プロパティを持ついくつかの CSS クラスを作成し、上記の入力を使用してそれらを添付します。
@@ -439,7 +439,7 @@ $dark-highlight: highlight-theme(
TextHighlight ディレクティブの API に関する詳細な情報は、以下のリンクのトピックを参照してください。
--
+-
使用したその他のコンポーネント:
diff --git a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
index 7ce3aeeec5..47b9ad7181 100644
--- a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
@@ -60,7 +60,7 @@ ng add igniteui-angular
次に、_app.module.ts_ ファイルにそれぞれのモジュールをインポートして Ignite UI コンポーネントを使用できます。
```ts
-// manually addition of the Igx Avatar component
+// manually addition of the Igx Avatar component
import { IgxAvatarModule } from 'igniteui-angular/avatar';
// import { IgxAvatarModule } from '@infragistics/igniteui-angular'; for licensed package
@@ -77,7 +77,7 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
## Ignite UI と Angular Material コンポーネント
-デモ サンプルの実行方法を見てみましょう。Ignite UI コンポーネントと Angular Material コンポーネントを組み合わせたもので、1 つのアプリケーションにうまく収まります。この例のナビゲーションは、 および とともに material [`mat-toolbar`](https://material.angular.io/components/toolbar/overview) を使用して作成されます。[Campaigns] ボタンの下の [`menu`](https://material.angular.io/components/menu/overview) も Angular Material ライブラリから取得されます。ナビゲーションの下で、 コンポーネントを使用して統計を表示します。カード内に複数の項目を配置しました - 、 、および material [`buttons`](https://material.angular.io/components/button/overview)。
+デモ サンプルの実行方法を見てみましょう。Ignite UI コンポーネントと Angular Material コンポーネントを組み合わせたもので、1 つのアプリケーションにうまく収まります。この例のナビゲーションは、 および とともに material [`mat-toolbar`](https://material.angular.io/components/toolbar/overview) を使用して作成されます。[Campaigns] ボタンの下の [`menu`](https://material.angular.io/components/menu/overview) も Angular Material ライブラリから取得されます。ナビゲーションの下で、 コンポーネントを使用して統計を表示します。カード内に複数の項目を配置しました - 、 、および material [`buttons`](https://material.angular.io/components/button/overview)。
@@ -85,11 +85,11 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
-次に、クレジット カードに関する情報を表示する を追加しました。その内容には、[`mat-sliders`](https://material.angular.io/components/slider/overview)、 、[`mat-form-fields`](https://material.angular.io/components/form-field/overview) を含む [`mat-stepper`](https://material.angular.io/components/stepper/overview) があります。
+次に、クレジット カードに関する情報を表示する を追加しました。その内容には、[`mat-sliders`](https://material.angular.io/components/slider/overview)、 、[`mat-form-fields`](https://material.angular.io/components/form-field/overview) を含む [`mat-stepper`](https://material.angular.io/components/stepper/overview) があります。
-最後に、右上隅に Ignite UI for Angular を挿入し、アプリ全体のテーマを変更します。
+最後に、右上隅に Ignite UI for Angular を挿入し、アプリ全体のテーマを変更します。
@@ -231,7 +231,7 @@ $dark-palette-accent: mat.define-palette(
// Material dark theme
$custom-mat-dark-theme: mat.define-dark-theme((
color: (
- primary: $dark-palette-primary,
+ primary: $dark-palette-primary,
accent: $dark-palette-accent
)
));
@@ -398,7 +398,7 @@ $custom-mat-light-theme: mat.define-light-theme((
));
```
-詳細については、Angular Material [`タイポグラフィ ドキュメント`](https://material.angular.io/guide/typography)をご覧ください。
+詳細については、Angular Material [`タイポグラフィ ドキュメント`](https://material.angular.io/guide/typography)をご覧ください。
## API リファレンス
diff --git a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
index 53523e0ef3..c587037fc3 100644
--- a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
@@ -85,7 +85,7 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
## コンポーネント
-デモ サンプルの実行方法を見てみましょう。Ignite UI コンポーネントと NG Bootstrap コンポーネントを組み合わせたもので、1 つのアプリケーションにうまく収まります。この例のナビゲーションは、 および とともに bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) を使用して作成されます。[Campaigns] ボタンの下の [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) も bootstrap ライブラリから取得されます。ナビゲーションの下で、 コンポーネントを使用して統計を表示します。カード内に複数の項目を配置しました - 、 、[`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) および [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples)。
+デモ サンプルの実行方法を見てみましょう。Ignite UI コンポーネントと NG Bootstrap コンポーネントを組み合わせたもので、1 つのアプリケーションにうまく収まります。この例のナビゲーションは、 および とともに bootstrap [`navbar`](https://getbootstrap.com/docs/4.0/components/navbar/) を使用して作成されます。[Campaigns] ボタンの下の [`dropdown`](https://ng-bootstrap.github.io/#/components/dropdown/examples) も bootstrap ライブラリから取得されます。ナビゲーションの下で、 コンポーネントを使用して統計を表示します。カード内に複数の項目を配置しました - 、 、[`buttons`](https://getbootstrap.com/docs/4.0/components/buttons/) および [`ngb-ratings`](https://ng-bootstrap.github.io/#/components/rating/examples)。
diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx
index 79eeb16c79..c31a304061 100644
--- a/docs/angular/src/content/jp/components/time-picker.mdx
+++ b/docs/angular/src/content/jp/components/time-picker.mdx
@@ -144,7 +144,7 @@ export class SampleFormComponent {
### コンポーネントの投影
-Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは と同じです: を除いて、[`igxLabel`](label-input.md)、[`IgxHint`](input-group.md#hint)、[`igxPrefix`](input-group.md#prefix-および-suffix)、[`igxSuffix`](input-group.md#prefix-および-suffix)。詳細については、[Label および Input](label-input.md) トピックを参照してください。
+Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは と同じです: を除いて、[`igxLabel`](label-input.md)、[`IgxHint`](input-group.md#hint)、[`igxPrefix`](input-group.md#prefix-および-suffix)、[`igxSuffix`](input-group.md#prefix-および-suffix)。詳細については、[Label および Input](label-input.md) トピックを参照してください。
デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。 コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](input-group.md#prefix-および-suffix) または [`igxSuffix`](input-group.md#prefix-および-suffix) で設定できます。
@@ -174,7 +174,7 @@ public date: Date = new Date();
## カスタム動作ボタン
- は、アクション ボタンのカスタマイズをサポートしています。これを実現するには、 ディレクティブ セレクターでマークされた `ng-template` でボタンをラップします。
+ は、アクション ボタンのカスタマイズをサポートしています。これを実現するには、 ディレクティブ セレクターでマークされた `ng-template` でボタンをラップします。
以下の例では、'CANCEL'、'DONE'、および 'NOW' アクションにカスタム動作ボタンが追加されています。
@@ -236,7 +236,7 @@ public selectNow(timePicker: IgxTimePickerComponent) {
### ダイアログ モード
-デフォルトの Time Picker モードは、編集可能なドロップダウン モードです。Time Picker モードを読み取り専用ダイアログ モードに変更するには、 入力を に設定します。
+デフォルトの Time Picker モードは、編集可能なドロップダウン モードです。Time Picker モードを読み取り専用ダイアログ モードに変更するには、 入力を に設定します。
```typescript
// timePickerDropdown.component.ts
@@ -411,7 +411,7 @@ Time Picker ウィンドウのコンテンツの一部として使用される
Time Picker ウィンドウは [`IgxOverlayService`](overlay.md) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
-Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
+Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
以下でコンテナーを配置する要素への参照を渡すことができます。
@@ -462,11 +462,11 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
-
--
+-
-
-
-
--
+-
-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/toggle.mdx b/docs/angular/src/content/jp/components/toggle.mdx
index ddcdc8482f..8de291a344 100644
--- a/docs/angular/src/content/jp/components/toggle.mdx
+++ b/docs/angular/src/content/jp/components/toggle.mdx
@@ -79,7 +79,7 @@ Ignite UI for Angular Toggle モジュールまたはディレクティブをイ
### トグルの表示
-トグルのコンテンツを表示および非表示にするには、 および メソッドを使用します。
+トグルのコンテンツを表示および非表示にするには、 および メソッドを使用します。
```typescript
import { IgxToggleDirective } from 'igniteui-angular/directives'
@@ -117,10 +117,10 @@ export class Class {
次のサンプルでは、さまざまな配置方法を使用してコンテンツをボタンの下に表示します。
-`igxToggle` ディレクティブは プロバイダーを使用します。`open`、`close`、`toggle` メソッドは、コンテンツの表示方法を制御するオプションのオーバーレイ設定を受け取ります。省略した場合は、上のサンプルのようにデフォルトのオーバーレイ設定が使用されます。
+`igxToggle` ディレクティブは プロバイダーを使用します。`open`、`close`、`toggle` メソッドは、コンテンツの表示方法を制御するオプションのオーバーレイ設定を受け取ります。省略した場合は、上のサンプルのようにデフォルトのオーバーレイ設定が使用されます。
-デフォルトで、 プロパティは `true`に設定されています。この機能を無効にするには、プロパティを `false` に設定する必要があります。さらに、 プロパティのデフォルトの設定は `false` であるため、利用するには、`true` に設定する必要があります。
+デフォルトで、 プロパティは `true`に設定されています。この機能を無効にするには、プロパティを `false` に設定する必要があります。さらに、 プロパティのデフォルトの設定は `false` であるため、利用するには、`true` に設定する必要があります。
```typescript
@@ -158,7 +158,7 @@ export class Class {
この機能を利用するには、`IgxToggleModule` の `IgxToggleActionDirective` を使用して `IgxToggleDirective` を割り当てる必要があります。
-トリガー (トグル) として使用する要素で を宣言します。
+トリガー (トグル) として使用する要素で を宣言します。
```html
@@ -176,12 +176,12 @@ export class Class {
-デフォルトで、`IgxToggleActionDirective` はホスト要素を プロパティから除外します。したがって、ホスト要素をクリックしてもイベントは発生しません。さらに、このディレクティブはホスト要素をオーバーレイ設定の として設定します。
+デフォルトで、`IgxToggleActionDirective` はホスト要素を プロパティから除外します。したがって、ホスト要素をクリックしてもイベントは発生しません。さらに、このディレクティブはホスト要素をオーバーレイ設定の として設定します。
### 自動トグル サービス プロバイダー
-`igxToggle` ディレクティブの状態を保持し、 プロバイダーを介してコマンドする便利な方法があります。トグルをサービスに登録するために使用される `igxToggle` 要素の識別子を設定します。状態を自動的に制御したい場合、この識別子を `igxToggleActionDirective`に渡す必要があります。
+`igxToggle` ディレクティブの状態を保持し、 プロバイダーを介してコマンドする便利な方法があります。トグルをサービスに登録するために使用される `igxToggle` 要素の識別子を設定します。状態を自動的に制御したい場合、この識別子を `igxToggleActionDirective`に渡す必要があります。
```html
@@ -227,14 +227,14 @@ public offsetToggleSet() {
--
--
+-
+-
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
--
--
--
+-
+-
+-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/tooltip.mdx b/docs/angular/src/content/jp/components/tooltip.mdx
index 715d92ec48..5c042e54b4 100644
--- a/docs/angular/src/content/jp/components/tooltip.mdx
+++ b/docs/angular/src/content/jp/components/tooltip.mdx
@@ -12,8 +12,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular Tooltip (ツールチップ) ディレクティブの概要
- と ディレクティブは、完全なカスタマイズが可能なツールチップをサポートし、ページのあらゆる要素にアタッチできます。
-ツールチップは、 ディレクティブで使用できる場所の数が限られています。ターゲット (アンカー) と関連つけてページで任意の配置を指定でき、スクロールやカスタム アニメーションなどのその他のオーバーレイ設定をサポートします。
+ と ディレクティブは、完全なカスタマイズが可能なツールチップをサポートし、ページのあらゆる要素にアタッチできます。
+ツールチップは、 ディレクティブで使用できる場所の数が限られています。ターゲット (アンカー) と関連つけてページで任意の配置を指定でき、スクロールやカスタム アニメーションなどのその他のオーバーレイ設定をサポートします。
## Angular Tooltip の例
@@ -101,10 +101,10 @@ export class AppModule {}
### ツールチップ ターゲット
-avatar をターゲットにして、 ディレクティブを設定し、ツールチップを持つ要素としてマークします。
+avatar をターゲットにして、 ディレクティブを設定し、ツールチップを持つ要素としてマークします。
-- ディレクティブは ディレクティブを拡張します。
-- ディレクティブは、名前 **tooltipTarget** でエクスポートされます。
+- ディレクティブは ディレクティブを拡張します。
+- ディレクティブは、名前 **tooltipTarget** でエクスポートされます。
```html
@@ -121,10 +121,10 @@ avatar をターゲットにして、 ディレクティブを設定します。
+ツールチップ要素を作成します。シンプルなテキスト ツールチップを作成するためテキストを含む標準 div 要素を定義し、ツールチップとしてマークされる ディレクティブを設定します。
-- ディレクティブは ディレクティブを拡張します。
-- ディレクティブは、名前 **tooltip** でエクスポートされます。
+- ディレクティブは ディレクティブを拡張します。
+- ディレクティブは、名前 **tooltip** でエクスポートされます。
```html
@@ -134,7 +134,7 @@ avatar をターゲットにして、 セレクターに割り当てます。
+ここまででターゲットとツールチップを定義しました。ツールチップ参照を セレクターに割り当てます。
```html
@@ -157,7 +157,7 @@ avatar をターゲットにして、 を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。
+ を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。
```typescript
// app.module.ts
@@ -275,7 +275,7 @@ export class AppModule {}
### 高度な例
-ツールチップは他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。次の例では、 、 、 、 、 、 および [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) コンポーネントを使用して説明的なツールチップを作成する方法を示しています。
+ツールチップは他のコンポーネントとシームレスに統合され、内部にコンポーネントを含む高度なツールチップを作成できます。次の例では、 、 、 、 、 、 および [`IgxCategoryChart`]({environment:dvApiBaseUrl}/products/ignite-ui-angular/api/docs/typescript/latest/classes/igniteui_angular_charts.igxcategorychartcomponent.html) コンポーネントを使用して説明的なツールチップを作成する方法を示しています。
@@ -283,29 +283,29 @@ export class AppModule {}
### 遅延の表示/非表示の設定
-ツールチップを表示または非表示にするまでの時間を制御する場合は、 ディレクティブの と プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。
+ツールチップを表示または非表示にするまでの時間を制御する場合は、 ディレクティブの と プロパティを使用します。両プロパティは型 **number** でミリセカンドでタイムスパンを取得できます。
- の組み込み UI インタラクションは、 および プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や の API を使用する場合、 や は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。
+ の組み込み UI インタラクションは、 および プロパティの値を考慮して動作します。一方で、API からツールチップを表示または非表示にする場合や の API を使用する場合、 や は考慮されません。必要な場合、ロジックはアプリケーションの仕様を手動で実装する必要があります。
### トリガー
-デフォルトでは、 は 上にホバーしている間のみトリガーされます。ただし、 および プロパティを使用してこの動作を変更できます。これらのプロパティにより、 が表示および非表示になるタイミングを制御できます。これらのプロパティは `click`、`focus`、`keypress` などのイベント名を値として受け取り、さまざまなシナリオで をトリガーできます。
+デフォルトでは、 は 上にホバーしている間のみトリガーされます。ただし、 および プロパティを使用してこの動作を変更できます。これらのプロパティにより、 が表示および非表示になるタイミングを制御できます。これらのプロパティは `click`、`focus`、`keypress` などのイベント名を値として受け取り、さまざまなシナリオで をトリガーできます。
- および の設定は、 自体ではなく とのインタラクション時にのみ有効です。 のデフォルトのイベント トリガーは `pointerenter` および `pointerleave` です。
+ および の設定は、 自体ではなく とのインタラクション時にのみ有効です。 のデフォルトのイベント トリガーは `pointerenter` および `pointerleave` です。
### オーバーレイ構成
- と の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。
+ と の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。
- ディレクティブは プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。
+ ディレクティブは プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。
-さらに詳細なカスタマイズには、 から継承された プロパティを使用します。
+さらに詳細なカスタマイズには、 から継承された プロパティを使用します。
```html
@@ -332,14 +332,14 @@ public overlaySettings: OverlaySettings = {
```
- または で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。
+ または で設定したプロパティは、デフォルト設定の同じプロパティをオーバーライドし、ツールチップの動作に直接影響します。
### 追加のプロパティ
-これまでに説明したプロパティの他に、 ではツールチップの動作や外観をさらに構成できるさまざまな追加プロパティが用意されています。
+これまでに説明したプロパティの他に、 ではツールチップの動作や外観をさらに構成できるさまざまな追加プロパティが用意されています。
- プロパティを有効にするとツールチップが「固定」され、閉じるボタンが表示されます。ユーザーが閉じるボタンをクリックするか `Esc` キーを押すまでツールチップは表示されたままになります。この動作はデフォルトのホバー挙動をオーバーライドし、ターゲット要素からカーソルを外してもツールチップが消えなくなります。
+ プロパティを有効にするとツールチップが「固定」され、閉じるボタンが表示されます。ユーザーが閉じるボタンをクリックするか `Esc` キーを押すまでツールチップは表示されたままになります。この動作はデフォルトのホバー挙動をオーバーライドし、ターゲット要素からカーソルを外してもツールチップが消えなくなります。
```html
@@ -349,7 +349,7 @@ public overlaySettings: OverlaySettings = {
Her name is Madelyn James
```
-デフォルトの閉じるボタンをカスタマイズするには、 プロパティを使用します。
+デフォルトの閉じるボタンをカスタマイズするには、 プロパティを使用します。
```html
@@ -368,7 +368,7 @@ public overlaySettings: OverlaySettings = {
`closeButtonTemplate` で追加したカスタム コンテンツは、sticky モードのときのみレンダリングされます。
- プロパティを使用すると、ツールチップに矢印を追加できます。
+ プロパティを使用すると、ツールチップに矢印を追加できます。
```html
@@ -539,13 +539,13 @@ $dark-tooltip: tooltip-theme(
## ユーザー補助
- はアクセシビリティを考慮して構築されており、以下のプロパティや ARIA 属性が含まれています。
+ はアクセシビリティを考慮して構築されており、以下のプロパティや ARIA 属性が含まれています。
-- プロパティ - 開発者が設定しない場合、自動生成されます。
-- - ツールチップがデフォルトの動作になっている場合、`role="tooltip"` が適用されます。 プロパティが有効な場合、ロールは `status` に変更されます。
+- プロパティ - 開発者が設定しない場合、自動生成されます。
+- - ツールチップがデフォルトの動作になっている場合、`role="tooltip"` が適用されます。 プロパティが有効な場合、ロールは `status` に変更されます。
- `aria-hidden` - ツールチップが表示されているかどうかに応じて自動的に更新されます。
-ターゲットの **aria-describedby** 属性をそれぞれのツールチップの に設定することにより、ツールチップ要素への参照が提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。
+ターゲットの **aria-describedby** 属性をそれぞれのツールチップの に設定することにより、ツールチップ要素への参照が提供されます。エンドユーザーがツールチップへアクセスしたときにツールチップのコンテンツにアクセスするために必要な情報であるスクリーン リーダーを提供します。
以下の状況では十分な注意が必要です。
@@ -557,21 +557,21 @@ $dark-tooltip: tooltip-theme(
| 制限 | 説明|
| ----------------------------------- | ---------- |
-| カスタム配置ストラテジと矢印 | ディレクティブは を使用してツールチップと矢印を配置します。カスタムの を使用する場合、かつ を `true` に設定する場合、そのカスタム ストラテジは を継承している必要があります。そうでない場合、矢印は表示されません。|
+| カスタム配置ストラテジと矢印 | ディレクティブは を使用してツールチップと矢印を配置します。カスタムの を使用する場合、かつ を `true` に設定する場合、そのカスタム ストラテジは を継承している必要があります。そうでない場合、矢印は表示されません。|
## API リファレンス
このトピックでは、ページ要素にツールチップを作成する方法について学習しました。アプリケーションのデザインを改善するために、アイコンやアバターなどその他の Ignite UI for Angular コンポーネントも使用しました。各 API は以下の通りです。
--
--
+-
+-
使用したその他のコンポーネントとディレクティブ:
-
-
--
--
+-
+-
スタイル:
diff --git a/docs/angular/src/content/jp/components/transaction-classes.mdx b/docs/angular/src/content/jp/components/transaction-classes.mdx
index be3930f15b..86727aa958 100644
--- a/docs/angular/src/content/jp/components/transaction-classes.mdx
+++ b/docs/angular/src/content/jp/components/transaction-classes.mdx
@@ -11,25 +11,25 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## トランザクション、状態、トランザクション ログ
-トランザクションは、 の主要な構成要素です。トランザクションは、データに対して実行するすべての操作を指します。 インターフェイスは、3 つのプロパティ ( 、 、および ) を定義します。
+トランザクションは、 の主要な構成要素です。トランザクションは、データに対して実行するすべての操作を指します。 インターフェイスは、3 つのプロパティ ( 、 、および ) を定義します。
-トランザクションの はデータレコードごとに一意である必要があり、このトランザクションが影響するレコードを定義します。 は、実行する操作に応じて、`ADD`、`DELETE`、`UPDATE` の 3 つのトランザクションタイプのいずれかになります。 には、`ADD` トランザクションを追加する場合の新しいレコードの値が含まれます。既存のレコードを更新する場合、 には変更のみが含まれます。同じ ID の `UPDATE` タイプのトランザクションが複数あるレコードを削除する場合、 には削除されたレコードの値が含まれます。
+トランザクションの はデータレコードごとに一意である必要があり、このトランザクションが影響するレコードを定義します。 は、実行する操作に応じて、`ADD`、`DELETE`、`UPDATE` の 3 つのトランザクションタイプのいずれかになります。 には、`ADD` トランザクションを追加する場合の新しいレコードの値が含まれます。既存のレコードを更新する場合、 には変更のみが含まれます。同じ ID の `UPDATE` タイプのトランザクションが複数あるレコードを削除する場合、 には削除されたレコードの値が含まれます。
各タイプのトランザクションを追加する方法の例は、[トランザクションサービスの使用方法](transaction-how-to-use.md)のトピックで見ることができます。
-操作 (トランザクション) を実行するたびに、トランザクション ログと取り消しスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは集計された を維持します。 は一意のレコードで構成され、すべてのレコードは上記のサポートされているトランザクション タイプのいずれかです。
+操作 (トランザクション) を実行するたびに、トランザクション ログと取り消しスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは集計された を維持します。 は一意のレコードで構成され、すべてのレコードは上記のサポートされているトランザクション タイプのいずれかです。
-トランザクションを追加する際、 を呼び出して、保留中のトランザクションをオンにすることができます。 を呼び出すまで、後続のトランザクションはすべて単一のトランザクションに蓄積されます。`true` を に渡すと、蓄積されたすべてのトランザクションがトランザクションログと取り消しスタックに単一のトランザクションとして追加されます。
+トランザクションを追加する際、 を呼び出して、保留中のトランザクションをオンにすることができます。 を呼び出すまで、後続のトランザクションはすべて単一のトランザクションに蓄積されます。`true` を に渡すと、蓄積されたすべてのトランザクションがトランザクションログと取り消しスタックに単一のトランザクションとして追加されます。
## igxBaseTransaction の使用
-グリッド モジュールは、トランザクション サービス ( ) の非常に基本的な実装を提供し、行編集機能を可能にする保留中のセッション機能のみを提供します。 と は、行編集で複数のセルごとの操作を 1 つの変更にまとめることができます。つまり、1 つのレコードの複数のセルを編集すると、1 つのトランザクションが作成され、行編集イベントのみを処理できます。
+グリッド モジュールは、トランザクション サービス ( ) の非常に基本的な実装を提供し、行編集機能を可能にする保留中のセッション機能のみを提供します。 と は、行編集で複数のセルごとの操作を 1 つの変更にまとめることができます。つまり、1 つのレコードの複数のセルを編集すると、1 つのトランザクションが作成され、行編集イベントのみを処理できます。
蓄積された状態が部分的なオブジェクトであるため、サービスを使用して、どのセルが編集されたかを確認し、その周りに UI を構築することもできます。
- には元に戻すスタックがないため、元に戻す/やり直しの機能は提供されません。
+ には元に戻すスタックがないため、元に戻す/やり直しの機能は提供されません。
-以下のトピックには、行編集を有効にするために を使用する方法の詳細な例が含まれます。
+以下のトピックには、行編集を有効にするために を使用する方法の詳細な例が含まれます。
- [Grid 行編集](grid/row-editing.md)
- [Tree Grid 行編集](treegrid/row-editing.md)
@@ -37,19 +37,19 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## igxTransactionService および igxHierarchicalTransactionService に関する一般情報
- と は、 インターフェイスを実装する注入可能なミドルウェアです。コンポーネントはこれらを使用して、基になるデータに影響を与えることなく変更を蓄積できます。プロバイダーは、_access_、_manipulate_ (元に戻すとやり直し)、およびデータへの 1 つまたはすべての変更を_破棄またはコミット_するための API を公開します。
+ と は、 インターフェイスを実装する注入可能なミドルウェアです。コンポーネントはこれらを使用して、基になるデータに影響を与えることなく変更を蓄積できます。プロバイダーは、_access_、_manipulate_ (元に戻すとやり直し)、およびデータへの 1 つまたはすべての変更を_破棄またはコミット_するための API を公開します。
-より具体的な例では、 と は、[`IgxGrid`](grid/grid.md) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
+より具体的な例では、 と は、[`IgxGrid`](grid/grid.md) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
いずれのケース (セル編集と行編集) も、グリッド編集の状態は、更新、追加、削除されたすべての行とその最後の状態で構成されます。これらは、後で一度に、または ID ごとに検査、操作、および送信できます。編集モードに応じて、個々のセルまたは行の変更が収集され、データ行/レコードごとに蓄積されます。
## igxTransactionService の使用
- は、 を拡張します。
+ は、 を拡張します。
-データ操作を行うときにコンポーネントでトランザクションを使用する場合は、 をコンポーネントの `providers` 配列のプロバイダーとして定義する必要があります。
+データ操作を行うときにコンポーネントでトランザクションを使用する場合は、 をコンポーネントの `providers` 配列のプロバイダーとして定義する必要があります。
- には元に戻すスタックが含まれ、元に戻す/やり直し機能を利用できます。Undo スタックは、実際にはトランザクションの配列を含む配列です。 使用時に、元に戻すスタックにトランザクションがある場合は、 アクセサーを確認できます。ある場合 メソッドを使用して最後のトランザクションを削除し、 で最後に元に戻したトランザクションを適用します。
+ には元に戻すスタックが含まれ、元に戻す/やり直し機能を利用できます。Undo スタックは、実際にはトランザクションの配列を含む配列です。 使用時に、元に戻すスタックにトランザクションがある場合は、 アクセサーを確認できます。ある場合 メソッドを使用して最後のトランザクションを削除し、 で最後に元に戻したトランザクションを適用します。
以下のトピックで、一括編集を使用した igxGrid の実装方法の詳細な例を見つけることができます。
@@ -57,9 +57,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## igxHierarchicalTransactionService の使用
- は、 を拡張します。
+ は、 を拡張します。
- は、親と子の間の関係を処理するように設計されています。(たとえば、 のように、階層データ構造がある場合にこれを使用します)。
+ は、親と子の間の関係を処理するように設計されています。(たとえば、 のように、階層データ構造がある場合にこれを使用します)。
このサービスは、`ADD` トランザクションを追加するときに期待する場所に新しいレコードが追加されることを保証します。親レコードを削除すると、その子は、実装に応じて、上位レベルの階層に昇格するか、親とともに削除されます。具体的な例として、ツリーグリッドの プロパティを確認できます。値に応じて、親レコードを削除すると、その子に異なる影響があります。
アプリケーションでは、ユーザーが既に削除された親レコードに子レコードを追加しようとし、トランザクションがコミットされるのを待っている状態を処理することができます。トランザクションサービスでは、削除する親にレコードを追加することはできず、コンソールにエラーメッセージが表示されます。ただし、親を削除するかどうかを確認し、以下のコードを使用してユーザーに独自のアラートを実装できます。
@@ -78,11 +78,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## トランザクション ファクトリ
-Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - ([`Grid`](grid/batch-editing.md) と [`Hierarchical Grid`](hierarchicalgrid/batch-editing.md) に使用) と ([Tree Grid](treegrid/batch-editing.md) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
+Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - ([`Grid`](grid/batch-editing.md) と [`Hierarchical Grid`](hierarchicalgrid/batch-editing.md) に使用) と ([Tree Grid](treegrid/batch-editing.md) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
## トランザクション ファクトリの使用
- と はどちらも `root` で提供され、パブリック API で公開されます。任意のチェックに応じて、トランザクション サービスの新しいインスタンスをインスタンス化する場合は、トランザクション ファクトリを使用できます。
+ と はどちらも `root` で提供され、パブリック API で公開されます。任意のチェックに応じて、トランザクション サービスの新しいインスタンスをインスタンス化する場合は、トランザクション ファクトリを使用できます。
以下の例では、任意の (`hasUndo`) フラグに応じてさまざまなトランザクション サービスをインスタンス化する方法を確認できます。
@@ -158,7 +158,7 @@ export class GridViewComponent {
--
+-
- [トランザクション サービス](transaction.md)
- [トランザクション サービスの使用方法](transaction-how-to-use.md)
- [Grid 一括編集](grid/batch-editing.md)
diff --git a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
index 6853a640db..4dfbf4ab2b 100644
--- a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
+++ b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
@@ -12,9 +12,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# トランザクション サービスの使用方法
-データソースの状態を保持し、一度に多くのトランザクションをコミットする必要があるコンポーネントを使用する場合、 を利用できます。
+データソースの状態を保持し、一度に多くのトランザクションをコミットする必要があるコンポーネントを使用する場合、 を利用できます。
-Ignite UI for Angular グリッドコンポーネントの と は、グリッドと統合して、追加設定なしに一括編集機能が使用できます。ただし、その他の Ignite UI for Angular またはカスタムコンポーネントでトランザクションを使用する必要がある場合は、再度 を使用して、同様の動作を実装できます。
+Ignite UI for Angular グリッドコンポーネントの と は、グリッドと統合して、追加設定なしに一括編集機能が使用できます。ただし、その他の Ignite UI for Angular またはカスタムコンポーネントでトランザクションを使用する必要がある場合は、再度 を使用して、同様の動作を実装できます。
## Angular トランザクション サービスの使用方法の例
@@ -54,7 +54,7 @@ export class TransactionBaseComponent { }
### コンポーネントにトランザクション サービスを注入する
-`ts` ファイルは、アプリケーションで必要となる を `igniteui-angular` ライブラリからインポートし、 および インターフェイスと enum をインポートする必要があります。
+`ts` ファイルは、アプリケーションで必要となる を `igniteui-angular` ライブラリからインポートし、 および インターフェイスと enum をインポートする必要があります。
```typescript
import { IgxTransactionService, State, Transaction, TransactionType } from 'igniteui-angular/core';
@@ -271,7 +271,7 @@ public getTransactionLog(): any[] {
## 保留されたトランザクションをコミット
-すべての変更が完了したら、 の メソッドを使用して、一度にすべてをコミットできます。指定されたデータにすべてのトランザクションを適用します。
+すべての変更が完了したら、 の メソッドを使用して、一度にすべてをコミットできます。指定されたデータにすべてのトランザクションを適用します。
```html
Commit Transactions
@@ -285,7 +285,7 @@ public onCommit(): void {
```
- を使用している場合は、primaryKey と childDataKey を引数として期待する メソッドのオーバー読み込みを使用することもできます。
+ を使用している場合は、primaryKey と childDataKey を引数として期待する メソッドのオーバー読み込みを使用することもできます。
```typescript
public onCommit(): void {
@@ -295,7 +295,7 @@ public onCommit(): void {
## 保留されたトランザクションのクリア
-リストとのやり取りのどの時点でも、 メソッドを使用して、トランザクション ログをクリアできます。
+リストとのやり取りのどの時点でも、 メソッドを使用して、トランザクション ログをクリアできます。
```html
Clear Transactions
@@ -312,6 +312,6 @@ public onClear(): void {
--
+-
- [トランザクション サービス](transaction.md)
- [トランザクション サービス クラス階層](transaction-classes.md)
diff --git a/docs/angular/src/content/jp/components/transaction.mdx b/docs/angular/src/content/jp/components/transaction.mdx
index 78cd8e3621..fcf6509c88 100644
--- a/docs/angular/src/content/jp/components/transaction.mdx
+++ b/docs/angular/src/content/jp/components/transaction.mdx
@@ -10,34 +10,34 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
# トランザクション サービス
- は、基になるデータに影響せずに変更を蓄積するためにコンポーネントが使用できる組み込み可能なミドルウェアです ([Angular DI により](https://angular.io/guide/dependency-injection))。
+ は、基になるデータに影響せずに変更を蓄積するためにコンポーネントが使用できる組み込み可能なミドルウェアです ([Angular DI により](https://angular.io/guide/dependency-injection))。
-上記のスキーマからのデータ変換は必須ではありません。 を使用するためにパイプを使用する必要はありません。
+上記のスキーマからのデータ変換は必須ではありません。 を使用するためにパイプを使用する必要はありません。
- では、トランザクションを追加できます。少なくとも 1 つのトランザクションが追加された後、すべての変更または単一レコードの変更のみをコミットまたはクリアできます。詳細ログを保持するため、元に戻す操作とやり直し操作の実行が可能です。
+ では、トランザクションを追加できます。少なくとも 1 つのトランザクションが追加された後、すべての変更または単一レコードの変更のみをコミットまたはクリアできます。詳細ログを保持するため、元に戻す操作とやり直し操作の実行が可能です。
-操作 ( ) を実行するたびに、トランザクションログと基に戻すスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは、一意のレコードの追加/更新/削除操作のみで構成される集計**状態**を維持します。これは、`recordRef`、`type`、`value` の 3 つのプロパティを持つ インターフェイスに基づいています。
+操作 ( ) を実行するたびに、トランザクションログと基に戻すスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは、一意のレコードの追加/更新/削除操作のみで構成される集計**状態**を維持します。これは、`recordRef`、`type`、`value` の 3 つのプロパティを持つ インターフェイスに基づいています。
- 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、 、 、 です。
+ 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、 、 、 です。
- と は、 、 、および コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。
+ と は、 、 、および コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。
- [igxGrid 一括編集とトランザクション](grid/batch-editing.md)
- [igxHierarchicalGrid 一括編集とトランザクション](hierarchicalgrid/batch-editing.md)
- [igxTreeGrid 一括編集とトランザクション](treegrid/batch-editing.md)
- が提供する利点に関する詳細については、[Building a transaction service for managing large scale editing experiences](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) ブログ (英語) をご覧ください。
+ が提供する利点に関する詳細については、[Building a transaction service for managing large scale editing experiences](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) ブログ (英語) をご覧ください。
-A more detailed overview of the opportunities that the provides can be found in our ["Building a transaction service for managing large scale editing experiences" blog](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e)
+A more detailed overview of the opportunities that the provides can be found in our ["Building a transaction service for managing large scale editing experiences" blog](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e)
## その他のリソース
--
+-
- [トランザクション サービス クラス階層](transaction-classes.md)
- [トランザクション サービスの使用方法](transaction-how-to-use.md)
- [igxGrid を使用して CRUD 操作の構築](general/how-to/how-to-perform-crud.md)
diff --git a/docs/angular/src/content/jp/components/treegrid/groupby.mdx b/docs/angular/src/content/jp/components/treegrid/groupby.mdx
index 0a0843b8a2..6183a51bf1 100644
--- a/docs/angular/src/content/jp/components/treegrid/groupby.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/groupby.mdx
@@ -27,7 +27,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
```
以下は引数です。
-- groupingExpressions - オブジェクトの配列。これには、階層の生成に使用されるフィールドと各グループの並べ替えの詳細に関する情報が含まれます。
+- groupingExpressions - オブジェクトの配列。これには、階層の生成に使用されるフィールドと各グループの並べ替えの詳細に関する情報が含まれます。
- groupKey - 生成された階層列の名前の文字列値。
- childDataKey - 生成された親行の子コレクションが保存されるフィールドのための文字列値。
- grid - グループ化に使用される `IgxTreeGridComponent`。
@@ -37,7 +37,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
コンポーネントの入力は次のとおりです:
- grid - グループ化に使用される `IgxTreeGridComponent`。
-- expressions - オブジェクトの配列。これには、階層の生成に使用されるフィールドと各グループの並べ替えの詳細が含まれます。
+- expressions - オブジェクトの配列。これには、階層の生成に使用されるフィールドと各グループの並べ替えの詳細が含まれます。
- hideGroupedColumns - グループ化が実行された列を非表示にするかどうかを示すブール値。
- dropAreaTemplate - デフォルトのドロップ エリア テンプレートを上書きするために使用できるドロッ プエリアのテンプレート。
- dropAreaMessage - デフォルトのドロップ エリア テンプレートのデフォルト メッセージを上書きするために使用できる文字列。
@@ -55,7 +55,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
- grid - `IgxTreeGridComponent` that is used for the grouping
-- expressions - an array of objects which contains the fields used to generate the hierarchy
+- expressions - an array of objects which contains the fields used to generate the hierarchy
- hideGroupedColumns - a boolean value indicating whether to hide the columns by which grouping was performed
- dropAreaTemplate - a template for the drop area that can be used to override the default drop area template
- dropAreaMessage - a string that can be used to override the default message for the default drop area template
diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
index 87fa602501..cb1b1f1274 100644
--- a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
@@ -86,8 +86,8 @@ Ignite UI for Angular Tree Grid モジュールまたはディレクティブを
ツリー グリッド階層の構築に使用するオプション (子コレクションまたは主キーまたは外部キー) にかかわらず、ツリー グリッドの行は 2 タイプのセルで構成されます。
-- - 値を含む標準セル。
-- - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。インナー の プロパティでアクセスできる行コンポーネント レベル。
+- - 値を含む標準セル。
+- - セル行のレベルに基づいた値、インジケーターの展開/縮小、インデント div 要素を含むツリー セル。インナー の プロパティでアクセスできる行コンポーネント レベル。
各行にはツリー セルを 1 つのみ含むことができますが、標準セルは複数含むことが可能です。
@@ -378,11 +378,11 @@ platformBrowserDynamic()
-
--
--
+-
+-
-
-
--
+-
## テーマの依存関係
diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
index dedd05ecbb..f1ada65fbc 100644
--- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx
+++ b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
@@ -9,21 +9,16 @@ _language: ja
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-
# Angular ズーム スライダーの概要
Angular ZoomSlider コントロールは、範囲対応コントロールにズーム機能を提供します。ZoomSlider には、水平スクロールバー、全範囲の縮小表示、サイズ変更可能なズーム範囲ウィンドウの機能があります。ZoomSlider は、スタンド アロン コントロールとして機能できません。または、DataChart や CategoryChart などの範囲ベースのコントロールの拡張機能として動作します。
## Angular ズーム スライダーの例
-以下のサンプルは、 を使用して のコンテンツをナビゲートする方法を示しています。
+以下のサンプルは、 を使用して のコンテンツをナビゲートする方法を示しています。
-
-
-
## 使用方法
| 機能名|説明 |
@@ -35,9 +30,6 @@ Angular ZoomSlider コントロールは、範囲対応コントロールにズ
| 拡張性|ZoomSlider コントロールは、追加設定なしで DataChart コントロール をサポートします。 |
| 構成可能なズーム範囲ウィンドウ|ズーム範囲ウィンドウの初期幅、初期位置、最小サイズは、構成可能です。 |
-
-
-
## 依存関係
Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
@@ -47,15 +39,9 @@ npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts
```
-
-
-
## モジュールの要件
- を作成するには、以下のモジュールが必要です。
-
-
-
+ を作成するには、以下のモジュールが必要です。
```ts
import { IgxZoomSliderModule } from 'igniteui-angular-charts';
@@ -71,15 +57,10 @@ import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
export class AppModule {}
```
-
-
-
## コード スニペット
以下のコードは、ZoomSlider を設定する方法を示します。
-
-
```html
-
+
+
diff --git a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
index 2797152ec2..657aa20b23 100644
--- a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
@@ -84,7 +84,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-高度なフィルタリングは、 入力プロパティに保存される を生成します。このプロパティを使用して、高度なフィルタリングの初期状態を設定できます。
+高度なフィルタリングは、 入力プロパティに保存される を生成します。このプロパティを使用して、高度なフィルタリングの初期状態を設定できます。
@@ -147,7 +147,7 @@ ngAfterViewInit(): void {
}
```
-`IgxHierarchicalGrid` の高度なフィルタリングでは、_IN / NOT-IN_ 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.md#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル です。
+`IgxHierarchicalGrid` の高度なフィルタリングでは、_IN / NOT-IN_ 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.md#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル です。
```TypeScript
ngAfterViewInit(): void {
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
index bde6fb8339..ca90be06a8 100644
--- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular {ComponentTitle} 一括編集とトランザクション
- を と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。 として使用できるようになります。
+ を と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。 として使用できるようになります。
[`HierarchicalTransactionService`]({environment:angularApiUrl}/classes/igxhierarchicaltransactionservice.html) を [`{ComponentName}`]({environment:angularApiUrl}/classes/igxhierarchicalgridcomponent.html) と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。[`IgxHierarchicalTransactionServiceFactory`]({environment:angularApiUrl}/index.html#igxhierarchicaltransactionservicefactory) として使用できるようになります。
@@ -21,11 +21,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-The Batch Editing feature of the {ComponentName} is based on the . Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
+The Batch Editing feature of the {ComponentName} is based on the . Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
-In order to use the with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as .
+In order to use the with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as .
Below is a detailed example of how is Batch Editing enabled for the {ComponentTitle} component.
@@ -156,7 +156,7 @@ export class AppModule {}
-The following code demonstrates the usage of the API - undo, redo, commit.
+The following code demonstrates the usage of the API - undo, redo, commit.
```typescript
export class GridBatchEditingSampleComponent {
@@ -184,7 +184,7 @@ export class GridBatchEditingSampleComponent {
-The following code demonstrates the usage of the API - undo, redo, commit.
+The following code demonstrates the usage of the API - undo, redo, commit.
```typescript
export class TreeGridBatchEditingSampleComponent {
@@ -212,7 +212,7 @@ export class TreeGridBatchEditingSampleComponent {
-The following code demonstrates the usage of the API - undo, redo, commit.
+The following code demonstrates the usage of the API - undo, redo, commit.
```typescript
...
@@ -269,18 +269,18 @@ Disabling
-
--
+-
--
+-
-
-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx b/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
index 35f5935ebf..5304a09c96 100644
--- a/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
@@ -63,7 +63,7 @@ export class MySimpleComboComponent implements OnInit {
}
```
-選択の変更を処理するには、 が必要です。発行されたイベント引数 には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。
+選択の変更を処理するには、 が必要です。発行されたイベント引数 には、変更前の選択、現在の選択、追加または削除された項目に関する情報が含まれています。したがって、前のコンボの選択に基づいて値をフィルタリングします。
```html
diff --git a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
index b543cd11c0..6ee74ad53a 100644
--- a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
@@ -115,7 +115,7 @@ public updateCell() {
-セルを更新するその他の方法として の メソッドで直接更新する方法があります。
+セルを更新するその他の方法として の メソッドで直接更新する方法があります。
@@ -158,7 +158,7 @@ public updateCell() {
デフォルトのセル編集テンプレートの詳細については、[編集トピック](/{igPath}/editing#テンプレートの編集)を参照してください。
-セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、 を使用できます。これを行うには、`igxCellEditor` ディレクティブでマークされた `ng-template` を渡し、カスタム コントロールを に適切にバインドする必要があります:
+セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、 を使用できます。これを行うには、`igxCellEditor` ディレクティブでマークされた `ng-template` を渡し、カスタム コントロールを に適切にバインドする必要があります:
```html
@@ -178,7 +178,7 @@ public updateCell() {
-編集モードでセルの に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、[トランザクション状態](./batch-editing.md)に適用されます (トランザクションが有効な場合)。
+編集モードでセルの に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、[トランザクション状態](./batch-editing.md)に適用されます (トランザクションが有効な場合)。
@@ -616,15 +616,15 @@ $custom-grid-theme: grid-theme(
## API リファレンス
--
+-
-
--
+-
-
-
-
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/cell-selection.mdx b/docs/angular/src/content/jp/grids_templates/cell-selection.mdx
index 3275bd3f43..98e5d6b928 100644
--- a/docs/angular/src/content/jp/grids_templates/cell-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cell-selection.mdx
@@ -359,7 +359,7 @@ $custom-grid-theme: grid-theme(
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
index 5fc5f2f1e6..b3fe80946b 100644
--- a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
@@ -35,7 +35,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular {ComponentTitle} の列非表示
-Ignite UI for Angular {ComponentTitle} は、 のある を提供し、ユーザーがユーザー インターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを {ComponentTitle} のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。
+Ignite UI for Angular {ComponentTitle} は、 のある を提供し、ユーザーがユーザー インターフェイスを介して、または Angular コンポーネントを使用して列の非表示を実行できるようにします。Material UI Grid には組み込み列非表示 UI があり、これを {ComponentTitle} のツールバーから使用して列の表示状態を変更できます。更に別のコンポーネントとして列非表示 UI を定義してページの必要な場所に配置できます。
## Angular {ComponentTitle} 列非表示の例
@@ -267,7 +267,7 @@ public ngAfterViewInit() {
## カスタム列の非表示 UI
- を手動で定義し、 を追加して、その目的がわかるようにして、ページの任意の場所に配置します。ただし、最初に、`IgxColumnActionsModule` をインポートする必要があります。
+ を手動で定義し、 を追加して、その目的がわかるようにして、ページの任意の場所に配置します。ただし、最初に、`IgxColumnActionsModule` をインポートする必要があります。
```typescript
// app.module.ts
diff --git a/docs/angular/src/content/jp/grids_templates/column-moving.mdx b/docs/angular/src/content/jp/grids_templates/column-moving.mdx
index 8ac7a2b5e7..7bf915de2f 100644
--- a/docs/angular/src/content/jp/grids_templates/column-moving.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-moving.mdx
@@ -106,7 +106,7 @@ Ignite UI for Angular の {ComponentTitle} のコンポーネントは、標準
ドラッグアンドドロップ機能に加えて、列の移動機能には、プログラムで列を移動/並べ替えできる 2 つの API メソッドも用意されています。
- - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `position` ( 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。
+ - 列を別の列 (ターゲット) の前または後に移動します。最初のパラメーターは移動する列で、2 番目のパラメーターはターゲット列です。オプションの 3 番目のパラメーター `position` ( 値を表す) でターゲット列の前または後に列を配置するかどうかを決定します。
```typescript
// Move the ID column after the Name column
diff --git a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
index ad2542e3bb..90b0e8f89e 100644
--- a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
@@ -126,7 +126,7 @@ this.hierarchicalGrid.unpinColumn('Debut');
両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因として列がすでにそのステートになっていることがあります。
-列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、 イベントでイベント引数の プロパティを適切な位置インデックスに変更します。
+列をピン固定すると、一番右に配置されたピン固定列の右にピン固定されます。ピン固定列の順序を変更するには、 イベントでイベント引数の プロパティを適切な位置インデックスに変更します。
diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
index f36e8ff976..f7b2420f64 100644
--- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
@@ -56,7 +56,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## 基本的な使用方法
-列選択機能は、 値を受け取る 入力によって有効にすることができます。
+列選択機能は、 値を受け取る 入力によって有効にすることができます。
## インタラクション
diff --git a/docs/angular/src/content/jp/grids_templates/column-types.mdx b/docs/angular/src/content/jp/grids_templates/column-types.mdx
index 68015fcd4c..8371fd1b88 100644
--- a/docs/angular/src/content/jp/grids_templates/column-types.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-types.mdx
@@ -127,7 +127,7 @@ public timeFormats = [
#### セル編集
列タイプに基づくセル編集に関しては、別のエディターが表示されます。
-- dateTime - が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
+- dateTime - が使用されます。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
- date - が使用されます。
- time - が使用されます。
@@ -293,7 +293,7 @@ public init(column: IgxColumnComponent) {
## API リファレンス
--
+-
- Column
- {ComponentTitle}
- Column
diff --git a/docs/angular/src/content/jp/grids_templates/editing.mdx b/docs/angular/src/content/jp/grids_templates/editing.mdx
index 726a91b6b8..ab4af48726 100644
--- a/docs/angular/src/content/jp/grids_templates/editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/editing.mdx
@@ -59,10 +59,10 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、レコード
データ型固有の**編集テンプレート**を使用する場合、列 プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。
-- `string` データ型の場合、デフォルトのテンプレートは を使用します。
-- `number` データ型のデフォルト テンプレートは type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
+- `string` データ型の場合、デフォルトのテンプレートは を使用します。
+- `number` データ型のデフォルト テンプレートは type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
- `date` データ型ではデフォルトのテンプレートは を使用します。
-- `dateTime` データ型の場合、デフォルトのテンプレートは を使用しています。このエディターは、DateTime オブジェクトの入力要素部分のマスク方向を提供します。
+- `dateTime` データ型の場合、デフォルトのテンプレートは を使用しています。このエディターは、DateTime オブジェクトの入力要素部分のマスク方向を提供します。
- `date` データ型の場合、デフォルトのテンプレートは を使用しています。
- `time` データ型の場合、デフォルトのテンプレートは を使用しています。
- `boolean` データ型ではデフォルトのテンプレートは を使用します。
@@ -76,9 +76,9 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、レコード
`date`、`dateTime`、`time` 列データ タイプのテンプレート エディターは、`IgxGrid` の に応じてデフォルトの入力形式を使用します。
-列に オブジェクトの `format` プロパティが設定されている場合、エディターの入力形式はそこから推測されます。条件は、数値の日付と時刻の部分のみを含むものとして解析できることです。
+列に オブジェクトの `format` プロパティが設定されている場合、エディターの入力形式はそこから推測されます。条件は、数値の日付と時刻の部分のみを含むものとして解析できることです。
-エディターの入力形式を明示的に設定する必要がある場合は、 タイプの オブジェクトを利用できます。これは、`date`、`dateTime`、および `time` 列データ タイプのエディターの入力形式として使用される `dateTimeFormat` プロパティを受け入れます。
+エディターの入力形式を明示的に設定する必要がある場合は、 タイプの オブジェクトを利用できます。これは、`date`、`dateTime`、および `time` 列データ タイプのエディターの入力形式として使用される `dateTimeFormat` プロパティを受け入れます。
```typescript
const editorOptions: IColumnEditorOptions = {
@@ -96,14 +96,14 @@ const editorOptions: IColumnEditorOptions = {
| イベント | 説明 | 引数 | キャンセル可能 |
|-------|-------------|-----------|-------------|
-| | `rowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | `true` |
-| | セルが**編集モードに入る**ときに発生します (`rowEditEnter` の後)。| | `true` |
-| | 値が変更された場合、セルの値が**コミットされた前に**発生します (`Enter` の押下など)。| | `true` |
-| | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。| | `false` |
-| | セルが**編集モードを終了した**ときに発生します。| | `false` |
-| | `rowEditing` が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの`完了`ボタンをクリックなど)。| | `true` |
-| |`rowEditing`が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。| | `false` |
-| |`rowEditing`が有効な場合、行が**編集モードを終了した**ときに発生します。| | `false` |
+| | `rowEditing` が有効な場合、行が編集モードに入るときに発生します。 | | `true` |
+| | セルが**編集モードに入る**ときに発生します (`rowEditEnter` の後)。| | `true` |
+| | 値が変更された場合、セルの値が**コミットされた前に**発生します (`Enter` の押下など)。| | `true` |
+| | 値が変更された場合、セルが編集され、セルの値が**コミットされた後に**発生します。| | `false` |
+| | セルが**編集モードを終了した**ときに発生します。| | `false` |
+| | `rowEditing` が有効な場合、編集モードの値の行が**コミットされた前に**発生します (行編集オーバーレイの`完了`ボタンをクリックなど)。| | `true` |
+| |`rowEditing`が有効な場合、行が編集され、新しい行の値が**コミットされた後に**発生します。| | `false` |
+| |`rowEditing`が有効な場合、行が**編集モードを終了した**ときに発生します。| | `false` |
### イベントのキャンセル
@@ -159,15 +159,15 @@ public onSorting(event: ISortingEventArgs) {
## API リファレンス
--
+-
-
--
+-
-
-
-
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
index 3afd04fa11..ecc919457d 100644
--- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
@@ -79,7 +79,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
特定の列のフィルター メニューを開くには、ヘッダーの Angular フィルター アイコンをクリックします。さらに、選択したヘッダーで `Ctrl + Shift + L` の組み合わせを使用できます。列でフィルタリング機能と並べ替え、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。
-フィルターが適用されていない場合、リストのすべての項目が選択されます。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは `Enter` を押します。リスト項目に適用したフィルタリングは、`equals` オペレーターでフィルター式を作成します。各式間のロジック オペレーターは です。
+フィルターが適用されていない場合、リストのすべての項目が選択されます。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは `Enter` を押します。リスト項目に適用したフィルタリングは、`equals` オペレーターでフィルター式を作成します。各式間のロジック オペレーターは です。
検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、`[現在の選択をフィルターに追加]` オプションを選択する必要があります。
@@ -353,7 +353,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
## 書式設定された値のフィルタリング ストラテジ
-デフォルトで、{ComponentTitle} コンポーネントは元のセル値に基づいてデータをフィルターしますが、場合によっては書式設定された値に基づいてデータをフィルターすることができます。 そのためには、 を使用します。 そのためには、 を使用します。 以下のサンプルは、列の数値を文字列として書式設定し、文字列値に基づいて {ComponentTitle} をフィルターする方法を示します。
+デフォルトで、{ComponentTitle} コンポーネントは元のセル値に基づいてデータをフィルターしますが、場合によっては書式設定された値に基づいてデータをフィルターすることができます。 そのためには、 を使用します。 そのためには、 を使用します。 以下のサンプルは、列の数値を文字列として書式設定し、文字列値に基づいて {ComponentTitle} をフィルターする方法を示します。
@@ -380,7 +380,7 @@ Excel スタイル フィルタリング ダイアログ内のリスト項目は
## ツリー フィルター ビュー
-デフォルトでは、Excel スタイル フィルタリング ダイアログはリスト ビューで項目を表示します。それらをツリー ビューに表示するには、 を使用して、列フィールド名の配列を指定します。フィルター項目は、指定された列の場合はツリー ビューに、他のすべての列の場合はリスト ビューに表示されます。次のサンプルは、最初の列のツリー ビューにフィルター項目を表示する方法を示しています:
+デフォルトでは、Excel スタイル フィルタリング ダイアログはリスト ビューで項目を表示します。それらをツリー ビューに表示するには、 を使用して、列フィールド名の配列を指定します。フィルター項目は、指定された列の場合はツリー ビューに、他のすべての列の場合はリスト ビューに表示されます。次のサンプルは、最初の列のツリー ビューにフィルター項目を表示する方法を示しています:
diff --git a/docs/angular/src/content/jp/grids_templates/export-excel.mdx b/docs/angular/src/content/jp/grids_templates/export-excel.mdx
index e99ec72e3a..7478568b5c 100644
--- a/docs/angular/src/content/jp/grids_templates/export-excel.mdx
+++ b/docs/angular/src/content/jp/grids_templates/export-excel.mdx
@@ -50,7 +50,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-ユーザーがより深い分析のためのスプレッドシートを必要とする場合でも、すぐに共有できる洗練された PDF を必要とする場合でも、Ignite UI Exporter は {ComponentName} から数秒で適切なファイルを提供するのに役立ちます。 または をインジェクトし、それぞれの / メソッドを呼び出すと、コンポーネントがフィルターとソートの適用から出力形式の整形まで、残りの処理を行います。
+ユーザーがより深い分析のためのスプレッドシートを必要とする場合でも、すぐに共有できる洗練された PDF を必要とする場合でも、Ignite UI Exporter は {ComponentName} から数秒で適切なファイルを提供するのに役立ちます。 または をインジェクトし、それぞれの / メソッドを呼び出すと、コンポーネントがフィルターとソートの適用から出力形式の整形まで、残りの処理を行います。
@@ -59,7 +59,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-Ignite UI Excel および PDF Exporter サービスは、{ComponentName} をユーザーが画面で見ているとおりに扱います。階層レイアウトと集計を含みます。 または をインジェクトし、適切な / メソッドを呼び出して、サービスに最終ドキュメントを生成させます。
+Ignite UI Excel および PDF Exporter サービスは、{ComponentName} をユーザーが画面で見ているとおりに扱います。階層レイアウトと集計を含みます。 または をインジェクトし、適切な / メソッドを呼び出して、サービスに最終ドキュメントを生成させます。
@@ -98,7 +98,7 @@ Ignite UI Excel および PDF Exporter サービスは、{ComponentName} をユ
エクスポーターをプロジェクトに取り込むには、数行のコードのみが必要です。次の手順に従うと、オンデマンドで Excel または PDF 出力を作成できる再利用可能なサービスが得られます。
-1. ルート モジュールで および/または をインポートします。
+1. ルート モジュールで および/または をインポートします。
2. 必要なエクスポーターをインジェクトし、ユーザーがファイルを要求したときにその `export` メソッドを呼び出します。
```typescript
@@ -139,7 +139,7 @@ v12.2.1 以降、`IgxExcelExporterService` はルートで提供され、`provid
-コンストラクターの依存関係として定義し、Angular にインスタンスを提供させることで、いずれかのエクスポーター サービスにアクセスできます。共有 メソッドを呼び出すと、コンポーネントの状態、選択された行、および書式設定ルールを自動的に尊重しながらダウンロードが開始されます。
+コンストラクターの依存関係として定義し、Angular にインスタンスを提供させることで、いずれかのエクスポーター サービスにアクセスできます。共有 メソッドを呼び出すと、コンポーネントの状態、選択された行、および書式設定ルールを自動的に尊重しながらダウンロードが開始されます。
以下は、コンポーネントの TypeScript ファイルで両方のエクスポート プロセスを実行するコードです。
@@ -208,7 +208,7 @@ public exportButtonHandler() {
## 複数列ヘッダー グリッドのエクスポート
-ダッシュボードは、多くの場合、[複数列ヘッダー](multi-column-headers.md)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、 フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。
+ダッシュボードは、多くの場合、[複数列ヘッダー](multi-column-headers.md)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、 フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。
Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた {ComponentTitle} はテーブルとしてフォーマットされません。
@@ -234,7 +234,7 @@ Excel テーブルは複数の行ヘッダーをサポートしていないた
## 固定された列ヘッダーを使用してグリッドをエクスポートする
-長いシートは、ヘッダー行が表示範囲外にスクロールされると読みにくくなる可能性があります。固定ヘッダーを有効にすると、ユーザーがデータをさらに下に探索している間、ワークシートの上部に 「Customer」 や 「Invoice Total」 などの重要なコンテキストが表示されたままになります。`export` を呼び出す前に フラグを `true` に切り替えると、サービスが残りを処理します。
+長いシートは、ヘッダー行が表示範囲外にスクロールされると読みにくくなる可能性があります。固定ヘッダーを有効にすると、ユーザーがデータをさらに下に探索している間、ワークシートの上部に 「Customer」 や 「Invoice Total」 などの重要なコンテキストが表示されたままになります。`export` を呼び出す前に フラグを `true` に切り替えると、サービスが残りを処理します。
```typescript
public exportButtonHandler() {
@@ -250,7 +250,7 @@ PDF エクスポートには、ドキュメントの上部に列ヘッダー行
## エクスポートするコンテンツのカスタマイズ
-ほとんどのチームは、共有する前にエクスポートを調整します。内部使用列を非表示にしたり、ヘッダーの名前を変更したり、管理者にのみ適用される行をスキップしたりします。両方のエクスポーター サービスは、すべての行または列をインターセプトし、ファイルにどのように表示するかを決定できるイベントを公開します。 および をサブスクライブして、最後の瞬間の調整を行います。`cancel = true` を設定して項目を省略するか、イベント引数を調整してその場で値を更新します。
+ほとんどのチームは、共有する前にエクスポートを調整します。内部使用列を非表示にしたり、ヘッダーの名前を変更したり、管理者にのみ適用される行をスキップしたりします。両方のエクスポーター サービスは、すべての行または列をインターセプトし、ファイルにどのように表示するかを決定できるイベントを公開します。 および をサブスクライブして、最後の瞬間の調整を行います。`cancel = true` を設定して項目を省略するか、イベント引数を調整してその場で値を更新します。
@@ -286,7 +286,7 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
-{ComponentTitle} コンポーネントからデータをエクスポートする場合、サービスはソート、フィルタリング、集計、および非表示列を自動的に尊重するため、ファイルにはユーザーが現在表示しているものが反映されます。代わりに完全なデータセットが必要ですか? または の関連フラグを切り替えて、フィルターされた行、非表示列、またはカスタム メタデータを含めます。
+{ComponentTitle} コンポーネントからデータをエクスポートする場合、サービスはソート、フィルタリング、集計、および非表示列を自動的に尊重するため、ファイルにはユーザーが現在表示しているものが反映されます。代わりに完全なデータセットが必要ですか? または の関連フラグを切り替えて、フィルターされた行、非表示列、またはカスタム メタデータを含めます。
## 既知の制限
@@ -339,10 +339,10 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
以下は、その他の Excel Exporter と PDF Exporter サービスの API です。
--
--
--
--
+-
+-
+-
+-
使用したその他のコンポーネント:
diff --git a/docs/angular/src/content/jp/grids_templates/filtering.mdx b/docs/angular/src/content/jp/grids_templates/filtering.mdx
index 1a9bbdc2ca..2c589fa2bb 100644
--- a/docs/angular/src/content/jp/grids_templates/filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/filtering.mdx
@@ -121,7 +121,7 @@ IgniteUI for [Angular {ComponentTitle} コンポーネント](https://jp.infragi
## 使用方法
-デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。{ComponentTitle} には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された に基づいて、適切な のセットがフィルター UI ドロップダウンに読み込まれます。また、 と最初の プロパティを設定できます。
+デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件があり、カスタム実装で置き換えることも可能です。また、カスタム フィルタリング条件を追加することもできます。{ComponentTitle} には、簡易なフィルター UI と詳細なフィルター オプションがあります。列で設定された に基づいて、適切な のセットがフィルター UI ドロップダウンに読み込まれます。また、 と最初の プロパティを設定できます。
フィルタリング機能は、 入力を `true` に設定すると {ComponentTitle} コンポーネントで有効になります。デフォルトの は `quickFilter` で、実行時には**変更できません**。特定の列に対してこの機能を無効にするには、 入力を `false` に設定します。
@@ -168,11 +168,11 @@ IgniteUI for [Angular {ComponentTitle} コンポーネント](https://jp.infragi
以下の 5 つのフィルタリング オペランド クラスが公開されます。
-- : カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
-- は、`boolean` 型のすべてのデフォルト フィルタリング条件を定義します。
-- は、`numeric` 型のすべてのデフォルト フィルタリング条件を定義します。
-- は、`string` 型のすべてのデフォルト フィルタリング条件を定義します。
-- は、`Date` 型のすべてのデフォルト フィルタリング条件を定義します。
+- : カスタムフィルタリング条件の定義時に継承できるベース フィルタリング オペランドです。
+- は、`boolean` 型のすべてのデフォルト フィルタリング条件を定義します。
+- は、`numeric` 型のすべてのデフォルト フィルタリング条件を定義します。
+- は、`string` 型のすべてのデフォルト フィルタリング条件を定義します。
+- は、`Date` 型のすべてのデフォルト フィルタリング条件を定義します。
@@ -297,7 +297,7 @@ this.{ComponentObjectRef}.clearFilter();
## 初期のフィルター状態
-グリッドの初期フィルタリング状態の設定は、 プロパティを の配列に設定して各列をフィルターします。
+グリッドの初期フィルタリング状態の設定は、 プロパティを の配列に設定して各列をフィルターします。
@@ -358,9 +358,9 @@ import { FilteringLogic } from 'igniteui-angular/grids/core';
this.{ComponentObjectRef}.filteringLogic = FilteringLogic.OR;
```
- のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、'ProductName' セル値が 'myproduct' を含み、'Price' セル値が 55 より大きい場合に行が返されます。
+ のデフォルト値は現在適用されているすべてのフィルター式と一致する行のみを返します。上記の例は、'ProductName' セル値が 'myproduct' を含み、'Price' セル値が 55 より大きい場合に行が返されます。
- に設定される場合、'ProductName' セル値が 'myproduct' を含むか、'Price' セル値が 55 より大きい場合に行が返されます。
+ に設定される場合、'ProductName' セル値が 'myproduct' を含むか、'Price' セル値が 55 より大きい場合に行が返されます。
@@ -373,7 +373,7 @@ this.{ComponentObjectRef}.filteringLogic = FilteringLogic.OR;
## カスタム フィルタリング オペランド
-フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 ( 、 、 、 ) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス を拡張してフィルタリング メニュー項目の動作を変更できます。
+フィルタリング メニューは、フィルタリング オペランド削除または変更してカスタマイズします。デフォルトでフィルタリング メニューは列のデータ型 ( 、 、 、 ) に基づいて特定のオペランドを含みます。これらのクラスまたは基本クラス を拡張してフィルタリング メニュー項目の動作を変更できます。
以下のサンプルの "Product Name" と "Discontinued" 列フィルタリング メニューを確認してください。"Discontinued" 列フィルターでは、オペランドの数が All に制限されています。"Product Name" 列フィルター - Contains および Does Not Contain オペランド ロジックを変更して大文字と小文字を区別した検索を実行し、Empty と Not Empty を追加します。
@@ -382,7 +382,7 @@ this.{ComponentObjectRef}.filteringLogic = FilteringLogic.OR;
以下のサンプルの "Order Product" と "Delivered" 列フィルタリング メニューを確認してください。"Delivered" 列フィルターでは、オペランドの数が All に制限されています。"Order Product" 列フィルター - Contains および Does Not Contain オペランド ロジックを変更して大文字と小文字を区別した検索を実行し、Empty と Not Empty を追加します。
-これにより、 と を拡張し、オペランドとロジックを変更して列 入力を新しいオペランドに設定します。
+これにより、 と を拡張し、オペランドとロジックを変更して列 入力を新しいオペランドに設定します。
```typescript
// grid-custom-filtering.component.ts
@@ -676,12 +676,12 @@ Firefox などの一部のブラウザーは、地域固有の小数点区切り
- メソッドに新しいシグネチャがあります。以下のパラメーターを受け付けます。
- `name` - フィルターする列の名前。
- `value` - フィルタリングに使用する値。
- - `conditionOrExpressionTree` (オプション) - このパラメーターは、 または 型のオブジェクトを受け付けます。簡単なフィルタリングが必要な場合、フィルタリング処理を引数として渡すことができます。高度なフィルタリングの場合、複雑なフィルタリング ロジックを含む式ツリーが引数として渡すことができます。
+ - `conditionOrExpressionTree` (オプション) - このパラメーターは、 または 型のオブジェクトを受け付けます。簡単なフィルタリングが必要な場合、フィルタリング処理を引数として渡すことができます。高度なフィルタリングの場合、複雑なフィルタリング ロジックを含む式ツリーが引数として渡すことができます。
- `ignoreCase` (オプション) - フィルタリングで大文字と小文字を区別するかどうか。
-- イベントは、フィルター列のフィルタリング状態を含む型 の 1 パラメーターのみになりました。
-- フィルタリング オペランド: 条件プロパティは、フィルタリング状態メソッドに直接参照せずに を参照するようになりました。
-- は、 プロパティを公開し、 クラス参照を取得します。
-- カスタム フィルターは、 型の処理で の プロパティを生成して {ComponentTitle} 列で使用できます。
+- イベントは、フィルター列のフィルタリング状態を含む型 の 1 パラメーターのみになりました。
+- フィルタリング オペランド: 条件プロパティは、フィルタリング状態メソッドに直接参照せずに を参照するようになりました。
+- は、 プロパティを公開し、 クラス参照を取得します。
+- カスタム フィルターは、 型の処理で の プロパティを生成して {ComponentTitle} 列で使用できます。
diff --git a/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx b/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx
index f1ac91b66e..2ac9b5a88d 100644
--- a/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx
+++ b/docs/angular/src/content/jp/grids_templates/keyboard-navigation.mdx
@@ -140,33 +140,33 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
| API | 説明 | 引数 |
|---------|-------------|-----------|
-| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
-| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
+| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
+| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
| | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法: _grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
| API | 説明 | 引数 |
|---------|-------------|-----------|
-| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
-| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
+| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
+| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
| | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法: _grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
| API | 説明 | 引数 |
|---------|-------------|-----------|
-| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
-| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
+| | 上記のキー押下やキー押下の組み合わせのいずれかが実行されたときに発生されるイベント。キャンセルできます。その他のキーの押下/組み合わせには、デフォルトの `onkeydown`イベントを使用します。 | |
+| | アクティブ ノードが変更されたときに発生するイベント。これを使用して、アクティブ フォーカス位置 (ヘッダー、tbody など)、列インデックス、行インデックス、またはネストされたレベルを決定できます。| |
| | 提供された `rowindex` と `visibleColumnIndex` に基づいてグリッド内の位置に移動します。`{ targetType: GridKeydownTargetType, target: Object }` タイプのパラメーターを受け入れるコールバック関数を通してターゲット要素上でカスタム ロジックを実行することもできます。使用方法: _grid.navigateTo(10, 3, (args) => { args.target.nativeElement.focus(); });_ | `rowindex`: number, `visibleColumnIndex`: number, `callback`: (`{ targetType: GridKeydownTargetType, target: Object }`) => {} |
-| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
-| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で次のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const nextEditableCell = grid.getNextCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
+| | `rowIndex` と `visibileColumnIndex` で前のセルを定義する オブジェクトを返します。コールバック関数は、 メソッドの 3 番目のパラメーターとして渡すことができます。コールバック関数は、パラメーターとして `IgxColumnComponent` を受け取り、指定された条件が満たされた場合に `boolean` 値を返します: _const prevEditableCell = grid.getPreviousCell(0, 4, (col) => col.editable);_ | `currentRowIndex`: number, `currentVisibleColumnIndex`: number, `callback`: (`IgxColumnComponent`) => boolean |
@@ -233,7 +233,7 @@ public customKeydown(args: IGridKeydownEventArgs) {
}
```
- 値に基づいて、独自のロジックを提供する 2つ のケースを識別しました (上記を参照)。API のメソッドを使用して、目的の処理を実行しましょう。ユーザーが編集モードでセル上で Tab キーを押している場合、入力の検証を実行します。ユーザーがセル上で Enter キーを押すと、次の行のセルへフォーカスを移動します。
+ 値に基づいて、独自のロジックを提供する 2つ のケースを識別しました (上記を参照)。API のメソッドを使用して、目的の処理を実行しましょう。ユーザーが編集モードでセル上で Tab キーを押している場合、入力の検証を実行します。ユーザーがセル上で Enter キーを押すと、次の行のセルへフォーカスを移動します。
diff --git a/docs/angular/src/content/jp/grids_templates/live-data.mdx b/docs/angular/src/content/jp/grids_templates/live-data.mdx
index 078008ee6b..a06b897461 100644
--- a/docs/angular/src/content/jp/grids_templates/live-data.mdx
+++ b/docs/angular/src/content/jp/grids_templates/live-data.mdx
@@ -131,10 +131,10 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
-
-
-
--
--
--
--
+-
+-
+-
+-
## その他のリソース
@@ -163,12 +163,12 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
-
--
--
+-
+-
-
-
--
--
+-
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
index f6ebce5a2b..40ef430373 100644
--- a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
+++ b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
@@ -100,7 +100,7 @@ import multiRowLayout1 from '../../images/multi-row-layout-1.png';
グリッドでは、特定のキーが押されたときのデフォルトのナビゲーション動作をカスタマイズできます。`隣りのセル`または`下のセル`へ移動するような操作は、キーボード ナビゲーション API を使用して簡単に処理できます。
-- が公開されます。イベントは を発生します。このイベントは、キーボードで上記のキー組み合わせを介してのみ使用できます。他のすべてのキー操作では、`keydown` イベント `(keydown)="onKeydown($event)"` を使用できます。
+- が公開されます。イベントは を発生します。このイベントは、キーボードで上記のキー組み合わせを介してのみ使用できます。他のすべてのキー操作では、`keydown` イベント `(keydown)="onKeydown($event)"` を使用できます。
- - このメソッドを使用すると、提供された `rowindex` と `visibleColumnIndex` に基づいて位置に移動できます。
以下のデモでは、Excel と同じように、Enter と Shift + Enter キーを使って追加のナビゲーションを使用します。
diff --git a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
index 97d0f8a921..093d4c0fcc 100644
--- a/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
+++ b/docs/angular/src/content/jp/grids_templates/remote-data-operations.mdx
@@ -57,7 +57,7 @@ Ignite UI for Angular {ComponentTitle} は、リモート仮想化、リモー
## リモート仮想化
- は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される ディレクティブで実装された動作を公開します。
+ は、データ チャンクがリモート サービスから要求されるシナリオをサポートし、内部で使用される ディレクティブで実装された動作を公開します。
この機能を使用するには、 出力にサブスクライブし、取得した引数に基づいて適切な要求を行い、パブリック プロパティ とサービスの各情報を設定します。
@@ -94,10 +94,10 @@ public processData(reset) {
}
```
-データを要求時、 と プロパティを提供する インターフェイスを使用する必要があります。
+データを要求時、 と プロパティを提供する インターフェイスを使用する必要があります。
-最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。
+最初の は常に 0 で、特定のアプリケーション シナリオに基づいて設定する必要があります。
### リモート仮想化のデモ
@@ -903,7 +903,7 @@ public paginate(page: number) {
- 行の展開/縮小
- 行の編集
- 行のピン固定
-- リモート データ シナリオでは、グリッドに `primaryKey` が設定されている場合、 イベント引数には、現在データ ビューに含まれていない行の完全な行データ オブジェクトが含まれません。この場合、`rowSelectionChanging.oldSelection` オブジェクトには、`primaryKey` フィールドである 1 つのプロパティのみが含まれます。現在データ ビューにある残りの行については、`rowSelectionChanging.oldSelection` に行データ全体が含まれます。
+- リモート データ シナリオでは、グリッドに `primaryKey` が設定されている場合、 イベント引数には、現在データ ビューに含まれていない行の完全な行データ オブジェクトが含まれません。この場合、`rowSelectionChanging.oldSelection` オブジェクトには、`primaryKey` フィールドである 1 つのプロパティのみが含まれます。現在データ ビューにある残りの行については、`rowSelectionChanging.oldSelection` に行データ全体が含まれます。
## API リファレンス
diff --git a/docs/angular/src/content/jp/grids_templates/row-actions.mdx b/docs/angular/src/content/jp/grids_templates/row-actions.mdx
index ab6631a308..cf0465c76d 100644
--- a/docs/angular/src/content/jp/grids_templates/row-actions.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-actions.mdx
@@ -156,12 +156,12 @@ The predefined actions inherit [`IgxGridActionsBaseDirective`]({environment:infr
アクション ストリップで使用できるその他のコンポーネントとディレクティブ:
--
+-
-
-
--
+-
--
+-
-
-
--
+-
diff --git a/docs/angular/src/content/jp/grids_templates/row-adding.mdx b/docs/angular/src/content/jp/grids_templates/row-adding.mdx
index 6403488d95..ba0536857a 100644
--- a/docs/angular/src/content/jp/grids_templates/row-adding.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-adding.mdx
@@ -166,17 +166,17 @@ export class AppModule {}
-[行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。
+[行の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。
-[行の追加] と [子の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。
+[行の追加] と [子の追加] のボタンの表示状態を制御する IgxGridEditingActions 入力は、アクション ストリップ コンテキスト (タイプ ) を使用して、ボタンが表示するレコードを調整できます。
-内部の は {ComponentTitle} に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。
+内部の は {ComponentTitle} に自動的に提供されます。行の状態が送信またはキャンセルされるまで、保留中のセルの変更を保持します。
## プログラムで行の追加を開始
@@ -295,7 +295,7 @@ this.treeGrid.beginAddRowByIndex(null); // spawns the add row UI as the fi
- {ComponentTitle} がトランザクションを使用する場合
- 作成要求または一括更新要求が正常に完了し、追加されたレコード インスタンス (db で生成された ID) を返すと、 API メソッド を使用して関連する ADD トランザクションをトランザクション ログからクリアする必要があります。ローカル トランザクションに生成された id フィールドがあり、データベースで作成された id フィールドと異なる場合があるため、クリアする必要があります。返却されたレコードをローカル データ インスタンスに追加できます。
+ 作成要求または一括更新要求が正常に完了し、追加されたレコード インスタンス (db で生成された ID) を返すと、 API メソッド を使用して関連する ADD トランザクションをトランザクション ログからクリアする必要があります。ローカル トランザクションに生成された id フィールドがあり、データベースで作成された id フィールドと異なる場合があるため、クリアする必要があります。返却されたレコードをローカル データ インスタンスに追加できます。
これにより、リモートで生成された ID がローカル データに常に反映され、以降の更新/削除操作で正しいレコード ID がターゲットになります。
diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
index e761b6bab3..9c2e561225 100644
--- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
@@ -143,7 +143,7 @@ export class {ComponentName}RowDragComponent {
### ドロップ エリア イベント ハンドラー
-テンプレートでドロップ領域を定義したら、コンポーネントの `.ts` ファイルで `igxDrop` の 、 、 イベントを宣言する必要があります。
+テンプレートでドロップ領域を定義したら、コンポーネントの `.ts` ファイルで `igxDrop` の 、 、 イベントを宣言する必要があります。
はじめに、`enter` と `leave` ハンドラーを見てみましょう。これらのメソッドでは、ドラッグの **ghost** のアイコンを変更して、行をドロップできる領域の上にあることをユーザーに示すことができます。
@@ -205,7 +205,7 @@ export class {ComponentName}RowDragComponent {
}
```
-行が削除されたら、行の メソッドを呼び出すだけです。
+行が削除されたら、行の メソッドを呼び出すだけです。
@@ -650,7 +650,7 @@ class MyRowGhostComponent {
}
```
-最後に、 イベント (ドラッグされた行に対して発行) を処理するために使用されるメソッドを作成します。このメソッドは、`igxRowDragGhost` テンプレートで使用されているプロパティの値を変更し、強制的に再描画します。ドラッグしている特定の行の `dragMove` イベントのみをサブスクライブし、行がドロップされるたびに (メモリ リークを防ぐために) サブスクライブを解除します。
+最後に、 イベント (ドラッグされた行に対して発行) を処理するために使用されるメソッドを作成します。このメソッドは、`igxRowDragGhost` テンプレートで使用されているプロパティの値を変更し、強制的に再描画します。ドラッグしている特定の行の `dragMove` イベントのみをサブスクライブし、行がドロップされるたびに (メモリ リークを防ぐために) サブスクライブを解除します。
```typescript
class MyRowGhostComponent {
@@ -701,7 +701,7 @@ class MyRowGhostComponent {
次のセクションのデモでは、ドラッグされた行がドロップされる場所のインジケーターを表示する方法を確認します。このインジケーターは好きなようにカスタマイズできます - ドラッグされた行がドロップされる位置に配置されたプレースホルダー行、ドラッグされた行が現在ホバーされている行の上または下にドロップされるかどうかを示す境界線スタイルなどです。
-カーソルの位置を追跡するために、行のドラッグを開始するときに の `dragMove` イベントにバインドします。
+カーソルの位置を追跡するために、行のドラッグを開始するときに の `dragMove` イベントにバインドします。
グリッドに `primaryKey` が指定されていることを確認してください! ロジックが行を適切に並べ替えられるように、行には一意の識別子が必要です。
diff --git a/docs/angular/src/content/jp/grids_templates/row-editing.mdx b/docs/angular/src/content/jp/grids_templates/row-editing.mdx
index 831e3d10ba..bb6dd1a81d 100644
--- a/docs/angular/src/content/jp/grids_templates/row-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-editing.mdx
@@ -243,7 +243,7 @@ export class HGridRowEditingSampleComponent implements OnInit {
-{ComponentTitle} は、保留中のセル変更を保持するプロバイダー を行ステートをサブミットまたはキャンセルするまで内部使用します。
+{ComponentTitle} は、保留中のセル変更を保持するプロバイダー を行ステートをサブミットまたはキャンセルするまで内部使用します。
## 配置
diff --git a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
index ff496be9b5..048da1cc12 100644
--- a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
@@ -109,7 +109,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
## 行のピン固定 API
-行のピン固定は、 の `pinned` 設定によって制御されます。デフォルトでピン固定行は {ComponentTitle} の上側に固定して描画され、{ComponentTitle} 本体のピン固定されていない行は垂直スクロールされます。
+行のピン固定は、 の `pinned` 設定によって制御されます。デフォルトでピン固定行は {ComponentTitle} の上側に固定して描画され、{ComponentTitle} 本体のピン固定されていない行は垂直スクロールされます。
@@ -162,7 +162,7 @@ this.hierarchicalGrid.unpinRow('ALFKI');
注: 行の ID は、グリッドの またはレコード インスタンス自体によって定義される主キー値です。両方のメソッドは操作に成功したかどうかを示すブール値を返します。よくある失敗の原因に行がすでにその状態になっていることがあります。
-行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、 イベントにサブスクライブして プロパティを適切な位置インデックスに変更します。
+行は、最後にピンされた行の下にピン固定されます。ピン固定行の順序を変更するには、 イベントにサブスクライブして プロパティを適切な位置インデックスに変更します。
@@ -470,10 +470,10 @@ $custom-grid-theme: grid-theme(
## API リファレンス
-
--
--
--
--
+-
+-
+-
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/row-selection.mdx b/docs/angular/src/content/jp/grids_templates/row-selection.mdx
index 17a95aac7d..7e23baceaf 100644
--- a/docs/angular/src/content/jp/grids_templates/row-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-selection.mdx
@@ -280,7 +280,7 @@ public handleRowSelection(event) {
#### リモート データ シナリオでの行選択イベント
-リモート データ シナリオでは、グリッドに `primaryKey` が設定されている場合、 イベント引数には、現在データ ビューに含まれていない行の完全な行データ オブジェクトが含まれません。この場合、`rowSelectionChanging.oldSelection` オブジェクトには、`primaryKey` フィールドである 1 つのプロパティのみが含まれます。現在データ ビューにある残りの行については、`rowSelectionChanging.oldSelection` に行データ全体が含まれます。
+リモート データ シナリオでは、グリッドに `primaryKey` が設定されている場合、 イベント引数には、現在データ ビューに含まれていない行の完全な行データ オブジェクトが含まれません。この場合、`rowSelectionChanging.oldSelection` オブジェクトには、`primaryKey` フィールドである 1 つのプロパティのみが含まれます。現在データ ビューにある残りの行については、`rowSelectionChanging.oldSelection` に行データ全体が含まれます。
```html
@@ -539,7 +539,7 @@ public childSelectedRows = ['Initiation', 'Emergency'];
-
--
+-
-
diff --git a/docs/angular/src/content/jp/grids_templates/search.mdx b/docs/angular/src/content/jp/grids_templates/search.mdx
index 5523c61426..8ddb48ec68 100644
--- a/docs/angular/src/content/jp/grids_templates/search.mdx
+++ b/docs/angular/src/content/jp/grids_templates/search.mdx
@@ -379,19 +379,19 @@ public clearSearch() {
-
-
- メソッド:
+ メソッド:
プロパティ:
-
-
+
その他のコンポーネントおよびディレクティブ (またはそのいずれか) で使用した API:
-
-
--
--
+-
+-
-
スタイル:
diff --git a/docs/angular/src/content/jp/grids_templates/selection.mdx b/docs/angular/src/content/jp/grids_templates/selection.mdx
index eae52527a9..c8058835a2 100644
--- a/docs/angular/src/content/jp/grids_templates/selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/selection.mdx
@@ -210,7 +210,7 @@ IgxGrid はコピーされたデータを取得し、コンテナー要素に貼
-
--
+-
-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/sorting.mdx b/docs/angular/src/content/jp/grids_templates/sorting.mdx
index def3d2ccc1..a03d0610d6 100644
--- a/docs/angular/src/content/jp/grids_templates/sorting.mdx
+++ b/docs/angular/src/content/jp/grids_templates/sorting.mdx
@@ -129,7 +129,7 @@ this.{ComponentObjectRef}.sort([
-Sorting は、 アルゴリズムを使用して実行されます。 または は、代替アルゴリズムとして のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
+Sorting は、 アルゴリズムを使用して実行されます。 または は、代替アルゴリズムとして のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
フィルター動作で、ソート状態をクリアするには メソッドを使用します。
@@ -319,7 +319,7 @@ $custom-theme: grid-theme(
-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
index bae3f40ab9..14d67c9984 100644
--- a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
+++ b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
@@ -46,11 +46,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {ComponentTitle} の状態保持
-igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。 ディレクティブがグリッドに適用されると、 および メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。
+igxGridState ディレクティブによって開発者がグリッドの状態を簡単に保存および復元できます。 ディレクティブがグリッドに適用されると、 および メソッドが公開され、開発者はこれを使用して、あらゆるシナリオで状態の保持を実現できます。
## サポートされている機能
- ディレクティブは、以下の機能の状態の保存および復元をサポートします。
+ ディレクティブは、以下の機能の状態の保存および復元をサポートします。
@@ -70,7 +70,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
- 複数行レイアウト
- 列の順序
- - インターフェイスによって定義される列プロパティ。
+ - インターフェイスによって定義される列プロパティ。
- 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
@@ -88,7 +88,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
- `複数の列`
- **新規**: 複数列ヘッダーが標準でサポートされるようになりました。
- 列の順序
- - インターフェイスによって定義される列プロパティ。
+ - インターフェイスによって定義される列プロパティ。
- 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
@@ -107,7 +107,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
- `列`
- 複数列ヘッダー
- 列の順序
- - インターフェイスによって定義される列プロパティ。
+ - インターフェイスによって定義される列プロパティ。
- 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
@@ -119,7 +119,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
- `列の選択`
- `展開`
- `ピボット構成`
- - インターフェイスによって定義されるピボット構成プロパティ。
+ - インターフェイスによって定義されるピボット構成プロパティ。
- ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。
- ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボット ストラテジの復元](state-persistence.md#ピボット-ストラテジの復元)」セクションを参照してください。
@@ -127,7 +127,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
- ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「[列の復元](state-persistence.md#列の復元)」セクションを参照してください。
+ ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「[列の復元](state-persistence.md#列の復元)」セクションを参照してください。
@@ -137,7 +137,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
## 使用方法
- - このメソッドは、シリアル化された JSON 文字列でグリッド状態を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。このメソッドは最初のオプションのパラメーター `serialize` を受け取り、 が オブジェクトを返すか、シリアル化された JSON 文字列を返すかを決定します。
+ - このメソッドは、シリアル化された JSON 文字列でグリッド状態を返します。これは、開発者がそれを取得して任意のデータストレージ (データベース、クラウド、ブラウザーの localStorage など) に保存できます。このメソッドは最初のオプションのパラメーター `serialize` を受け取り、 が オブジェクトを返すか、シリアル化された JSON 文字列を返すかを決定します。
開発者は、機能名、または機能名を 2 番目の引数として持つ配列を渡すことにより、特定の機能の状態のみを取得することを選択できます。
```typescript
@@ -151,14 +151,14 @@ const gridState: IGridState = state.getState(false);
const sortingFilteringStates: IGridState = state.getState(false, ['sorting', 'filtering']);
```
- - メソッドは、シリアル化されたJSON文字列または オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。
+ - メソッドは、シリアル化されたJSON文字列または オブジェクトを引数として受け入れ、オブジェクト/JSON 文字列で見つかった各機能の状態を復元します。
```typescript
state.setState(gridState);
state.setState(sortingFilteringStates)
```
-`options` - オブジェクトは、 インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、 メソッドはその状態を復元しません。
+`options` - オブジェクトは、 インターフェースを実装します。特定の機能の名前であるキーには、この機能の状態を追跡するかどうかを示すブール値があります。 メソッドはこれらの機能の状態を戻り値に入れず、 メソッドはその状態を復元しません。
```typescript
public options = { cellSelection: false; sorting: false; }
@@ -289,7 +289,7 @@ public onColumnInit(column: IgxColumnComponent) {
## ピボット構成の復元
- は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません ([`制限`](state-persistence.md#制限)を参照)。`IgxPivotGrid` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント ( と ) を公開します。以下はその方法です。
+ は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません ([`制限`](state-persistence.md#制限)を参照)。`IgxPivotGrid` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント ( と ) を公開します。以下はその方法です。
- `dimensionInit` および `valueInit` イベントのイベント ハンドラーを割り当てます。
@@ -355,7 +355,7 @@ public onDimensionInit(dim: IPivotDimension) {
## 子グリッドの復元
-子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合:
+子グリッドの状態の保存/復元は、 プロパティによって制御され、デフォルトで有効に設定されています。 は、ルート グリッドと階層のすべての子グリッドの両方の機能を保存/復元するために同じオプションを使用します。たとえば、以下のオプションを渡す場合:
``` html
@@ -400,9 +400,9 @@ this.state.setState(state, ['filtering', 'rowIslands']);
## ピボット ストラテジの復元
- は、デフォルトで は ([`制限`](state-persistence.md#制限)を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、[Pivot Grid リモート操作](pivot-grid-custom.md)のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、 と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
+ は、デフォルトで は ([`制限`](state-persistence.md#制限)を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、[Pivot Grid リモート操作](pivot-grid-custom.md)のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、 と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
-> は、文字列引数で を使用している場合にのみ発行します。
+> は、文字列引数で を使用している場合にのみ発行します。
- カスタム ソート方法およびカスタム ピボット列/行ディメンション ストラテジを設定します。
@@ -449,11 +449,11 @@ public restoreState() {
## ストラテジの復元
- はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](remote-data-operations.md)サンプルを参照) も保持しません ([`制限`](state-persistence.md#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、 と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。
+ はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](remote-data-operations.md)サンプルを参照) も保持しません ([`制限`](state-persistence.md#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、 と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。
以下はその方法です。
- は、文字列引数で を使用している場合にのみ発行されます。
+ は、文字列引数で を使用している場合にのみ発行されます。
- カスタム ソート方法およびカスタム列/行ディメンション ストラテジを設定します。
@@ -503,27 +503,27 @@ state.setState(gridState.columnSelection);
-- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、[`IgxGridState`] ディレクティブは、列の 、 、 、 、 、 、 および プロパティを無視します。
+- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトを JSON 文字列に変換します。JSON.stringify() が関数をサポートしないため、[`IgxGridState`] ディレクティブは、列の 、 、 、 、 、 、 および プロパティを無視します。
-- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトをJSON文字列に変換します。JSON.stringify() は関数をサポートされていないため、 ディレクティブはピボット ディメンション 、ピボット値 、 、カスタム 関数、 およびピボット構成ストラテジ ( と ) を無視します。
+- メソッドは、JSON.stringify() メソッドを使用して、元のオブジェクトをJSON文字列に変換します。JSON.stringify() は関数をサポートされていないため、 ディレクティブはピボット ディメンション 、ピボット値 、 、カスタム 関数、 およびピボット構成ストラテジ ( と ) を無視します。
-
--
+-
-
--
+-
-
--
+-
-
--
+-
## その他のリソース
diff --git a/docs/angular/src/content/jp/grids_templates/summaries.mdx b/docs/angular/src/content/jp/grids_templates/summaries.mdx
index a50c40270a..f26d4ec192 100644
--- a/docs/angular/src/content/jp/grids_templates/summaries.mdx
+++ b/docs/angular/src/content/jp/grids_templates/summaries.mdx
@@ -217,7 +217,7 @@ public disableSummary() {
## カスタム {ComponentTitle} 集計
-この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これには、基本クラス 、 、 のいずれかを列データ型や必要に応じてオーバーライドします。このように既存の関数を再定義、または新しい関数を追加できます。 クラスは、 メソッドにデフォルト実装のみを提供します。 は を拡張し、 、 、 、 を提供します。 は を拡張し、追加で と を提供します。
+この関数が要件に合わない場合、指定した列にカスタム集計を提供できます。これには、基本クラス 、 、 のいずれかを列データ型や必要に応じてオーバーライドします。このように既存の関数を再定義、または新しい関数を追加できます。 クラスは、 メソッドにデフォルト実装のみを提供します。 は を拡張し、 、 、 、 を提供します。 は を拡張し、追加で と を提供します。
@@ -270,8 +270,8 @@ class MySummary extends IgxNumberSummaryOperand {
-例に表示されるように、基本クラスは メソッドを公開しているため、すべてのデフォルト集計を取得して結果を変更するか、まったく新しい集計結果を計算することができます。
-このメソッドは のリストを返し、集計を計算するためのオプションのパラメーターを取得します。
+例に表示されるように、基本クラスは メソッドを公開しているため、すべてのデフォルト集計を取得して結果を変更するか、まったく新しい集計結果を計算することができます。
+このメソッドは のリストを返し、集計を計算するためのオプションのパラメーターを取得します。
```typescript
interface IgxSummaryResult {
@@ -284,7 +284,7 @@ interface IgxSummaryResult {
以下の[「すべてのデータにアクセスするカスタム集計」](#すべてのデータにアクセスするカスタム集計)セクションを参照してください。
-集計行の高さを正しく計算するために、{ComponentTitle} の メソッドでデータが空の場合も常に 配列の正しい長さを返す必要があります。
+集計行の高さを正しく計算するために、{ComponentTitle} の メソッドでデータが空の場合も常に 配列の正しい長さを返す必要があります。
`UnitsInStock` 列にカスタム集計を追加します。 プロパティを以下に作成するクラスに設定します。
@@ -649,9 +649,9 @@ public dateSummaryFormat(summary: IgxSummaryResult, summaryOperand: IgxSummaryOp
## 集計のエクスポート
- オプションが `IgxExcelExporterOptions` にあり、エクスポートされたデータにグリッドの集計を含めるかどうかを指定します。デフォルトの `exportSummaries` 値は **false** です。
+ オプションが `IgxExcelExporterOptions` にあり、エクスポートされたデータにグリッドの集計を含めるかどうかを指定します。デフォルトの `exportSummaries` 値は **false** です。
- は、すべての列タイプのデフォルトの集計を同等の Excel 関数としてエクスポートするため、シートが変更された場合でも適切に機能し続けます。以下の例をご覧ください:
+ は、すべての列タイプのデフォルトの集計を同等の Excel 関数としてエクスポートするため、シートが変更された場合でも適切に機能し続けます。以下の例をご覧ください:
@@ -776,9 +776,9 @@ $custom-theme: grid-summary-theme(
-
-
-
--
--
--
+-
+-
+-
-
-
diff --git a/docs/angular/src/content/jp/grids_templates/toolbar.mdx b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
index 9b21bf999d..e2755f451b 100644
--- a/docs/angular/src/content/jp/grids_templates/toolbar.mdx
+++ b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
@@ -330,7 +330,7 @@ constructor() {
残りのツールバー操作と同様に、エクスポートは、すぐに使用できる を介して提供されます。
-エクスポート コンポーネントは、ターゲット データ形式 ( 、 、 ) のそれぞれのサービスを使用しています。つまり、それぞれのサービスが依存関係挿入チェーンを通じて提供されない場合、コンポーネントは何もエクスポートできません。
+エクスポート コンポーネントは、ターゲット データ形式 ( 、 、 ) のそれぞれのサービスを使用しています。つまり、それぞれのサービスが依存関係挿入チェーンを通じて提供されない場合、コンポーネントは何もエクスポートできません。
Angular の DI の復習が必要な場合は、[公式ガイド](https://angular.io/guide/dependency-injection)をご覧ください。これは、アプリケーションのすべてのエクスポート サービスを有効にする方法を示すサンプル スニペットです。
```typescript
diff --git a/docs/angular/src/content/jp/grids_templates/validation.mdx b/docs/angular/src/content/jp/grids_templates/validation.mdx
index 50ef44f890..8e50958e46 100644
--- a/docs/angular/src/content/jp/grids_templates/validation.mdx
+++ b/docs/angular/src/content/jp/grids_templates/validation.mdx
@@ -119,10 +119,10 @@ You can decide to write your own validator function, or use one of the [built-in
グリッドは、 プロパティを介して検証サービスを公開します。
このサービスには以下のパブリック API があります。
-- - グリッドの検証状態が有効であるかどうかを返します。
-- - 無効な状態のレコードを返します。
-- - レコードの状態を ID でクリアします。ID が提供されない場合はすべてのレコードの状態をクリアします。
-- - 関連するレコード/フィールドをタッチ済みとしてマークします。
+- - グリッドの検証状態が有効であるかどうかを返します。
+- - 無効な状態のレコードを返します。
+- - レコードの状態を ID でクリアします。ID が提供されない場合はすべてのレコードの状態をクリアします。
+- - 関連するレコード/フィールドをタッチ済みとしてマークします。
無効な状態は、検証ルールに従って検証エラーが修正されるか、クリアされるまで保持されます。
@@ -134,7 +134,7 @@ Invalid states will persist until the validation errors in them are fixed accord
- グリッドの に基づくセルエディターでの編集中。エディター入力中の変更時 (`change`)、またはエディターがフォーカスを失うか (`blur`) 閉じた場合。
- 、 などの API を使用してセル/行を更新する場合 。
-- トランザクション サービスの一括編集および / API を使用する場合。
+- トランザクション サービスの一括編集および / API を使用する場合。
ユーザー入力または編集 API で編集されていないレコードに対しては、検証はトリガーされません。セルの視覚的なインジケーターは、ユーザー操作または検証サービスの `markAsTouched` API を介して入力がタッチ済みと見なされる場合のみ表示されます。
@@ -189,7 +189,7 @@ export class PhoneFormatDirective extends Validators {
場合によっては、データ中の無効な値を送信しないようにしたいことがあります。
その場合は、 または イベントを使用し、新しい値が無効な場合にイベントをキャンセルできます。
-いずれのイベントも引数には プロパティがあり、これによってキャンセルできます。その使用方法は、[クロス フィールド検証の例](#クロス-フィールドの例)で確認できます。
+いずれのイベントも引数には プロパティがあり、これによってキャンセルできます。その使用方法は、[クロス フィールド検証の例](#クロス-フィールドの例)で確認できます。
@@ -747,7 +747,7 @@ public cellStyles = {
## API リファレンス
--
+-
-
-
diff --git a/docs/angular/src/content/jp/grids_templates/virtualization.mdx b/docs/angular/src/content/jp/grids_templates/virtualization.mdx
index d7cf1c9f77..b7fa836859 100644
--- a/docs/angular/src/content/jp/grids_templates/virtualization.mdx
+++ b/docs/angular/src/content/jp/grids_templates/virtualization.mdx
@@ -33,7 +33,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# Angular {ComponentTitle} 仮想化とパフォーマンス
-Ignite UI for Angular の コントロールは、 ディレクティブを使用し、水平および垂直方向にコンテンツを仮想化します。
+Ignite UI for Angular の コントロールは、 ディレクティブを使用し、水平および垂直方向にコンテンツを仮想化します。
## Angular {ComponentTitle} 仮想化とパフォーマンスの例
@@ -50,7 +50,7 @@ Ignite UI for Angular の コントロー
## 仮想化の有効化
- ディレクティブは、ビューポートに表示されているデータのみを描画し、ユーザーがスクロール時に表示データを切り替えた際に @@ が DOM 描画およびメモリ使用を最適化します。 の と は、デフォルトが `100%` で表示コンテンツが使用可能なスペースにフィットしない場合、水平または垂直のスクロールバーが必要になります。ただし、{ComponentTitle} の および/または を `null` に設定することが可能で、関連するディメンションが内部の項目サイズの合計で決定されます。スクロールバーが表示されず、すべての項目が相対するディメンション ( が `null` 値の場合は列で、 が `null` 値の場合は行) に描画されます。
+ ディレクティブは、ビューポートに表示されているデータのみを描画し、ユーザーがスクロール時に表示データを切り替えた際に @@ が DOM 描画およびメモリ使用を最適化します。 の と は、デフォルトが `100%` で表示コンテンツが使用可能なスペースにフィットしない場合、水平または垂直のスクロールバーが必要になります。ただし、{ComponentTitle} の および/または を `null` に設定することが可能で、関連するディメンションが内部の項目サイズの合計で決定されます。スクロールバーが表示されず、すべての項目が相対するディメンション ( が `null` 値の場合は列で、 が `null` 値の場合は行) に描画されます。
データのサイズは以下によって決定されます。
@@ -83,8 +83,8 @@ Ignite UI for Angular の コントロー
-
-
-
--
--
+-
+-
## その他のリソース
diff --git a/docs/xplat/package.json b/docs/xplat/package.json
index eaefb6dafc..0a74d29e45 100644
--- a/docs/xplat/package.json
+++ b/docs/xplat/package.json
@@ -67,7 +67,7 @@
"dependencies": {
"astro": "^6.1.6",
"docs-template": "file:../../",
- "igniteui-astro-components": "0.0.19",
+ "igniteui-astro-components": "0.0.20",
"sharp": "^0.34.2"
},
"devDependencies": {
diff --git a/docs/xplat/scripts/fix-api-link-attrs.mjs b/docs/xplat/scripts/fix-api-link-attrs.mjs
index 81087d5bd9..58a0a378e1 100644
--- a/docs/xplat/scripts/fix-api-link-attrs.mjs
+++ b/docs/xplat/scripts/fix-api-link-attrs.mjs
@@ -1,10 +1,9 @@
#!/usr/bin/env node
/**
* Post-pass over MDX files to fix already-emitted elements:
- * 1. For kind="enum": add prefixed={false} when missing.
- * DV / TypeDoc-generated React/WC enum URLs use the bare name (e.g.
- * .../enums/CategoryChartType), never with an Igr/Igx/Igc prefix.
- * 2. Strip CLR backtick-arity suffix in type="X`N" → type="X".
+ * 1. Strip CLR backtick-arity suffix in type="X`N" → type="X".
+ * 2. Reclassify known apiMap class entries that TypeDoc publishes as
+ * interfaces.
*
* Idempotent — safe to re-run.
*
@@ -67,14 +66,7 @@ function transformTag(tag) {
return `${a}${name}${c}`;
});
- // 2. Add prefixed={false} to kind="enum" tags that don't already have it.
- if (/\skind="enum"/.test(out) && !/\sprefixed=\{false\}/.test(out)) {
- // Insert before the closing " />" or "/>"
- out = out.replace(/\s*\/>$/, ' prefixed={false} />');
- changed = true;
- }
-
- // 3. Reclassify class → interface for known mis-classified types.
+ // 2. Reclassify class → interface for known mis-classified types.
const typeMatch = out.match(/\stype="([^"]+)"/);
if (typeMatch && FORCE_INTERFACE.has(typeMatch[1]) && !/\skind="/.test(out)) {
// No kind specified → defaults to class. Insert kind="interface" before type.
@@ -82,13 +74,6 @@ function transformTag(tag) {
changed = true;
}
- // 4. Spreadsheet types DO carry the platform Igr/Igx/Igc prefix
- // (only excel types are unprefixed). Strip incorrect prefixed={false}.
- if (/\spkg="spreadsheet"/.test(out) && /\sprefixed=\{false\}/.test(out)) {
- out = out.replace(/\s+prefixed=\{false\}/, '');
- changed = true;
- }
-
return { out, changed };
}
diff --git a/docs/xplat/scripts/generate.mjs b/docs/xplat/scripts/generate.mjs
index 679ba03774..47a532c492 100644
--- a/docs/xplat/scripts/generate.mjs
+++ b/docs/xplat/scripts/generate.mjs
@@ -129,6 +129,53 @@ const EXCLUDED_SLUGS = (() => {
console.log(`[generate] Excluded pages for ${PLATFORM}: ${EXCLUDED_SLUGS.size}`);
+// ---------------------------------------------------------------------------
+// Markdown spacing
+// ---------------------------------------------------------------------------
+
+function normalizeMarkdownSpacing(content) {
+ const hasFinalNewline = /\r?\n$/.test(content);
+ const lines = content.replace(/\r\n/g, '\n').split('\n');
+ const result = [];
+ let blankCount = 0;
+ let inFence = false;
+
+ for (const line of lines) {
+ if (/^\s*(```|~~~)/.test(line)) {
+ inFence = !inFence;
+ blankCount = 0;
+ result.push(line);
+ continue;
+ }
+
+ if (inFence) {
+ result.push(line);
+ continue;
+ }
+
+ if (line.trim() === '') {
+ blankCount++;
+ if (blankCount <= 1) {
+ result.push('');
+ }
+ continue;
+ }
+
+ blankCount = 0;
+ result.push(line);
+ }
+
+ let normalized = result.join('\n').replace(/\n+$/, '');
+ if (hasFinalNewline) {
+ normalized += '\n';
+ }
+ return normalized;
+}
+
+function prepareMarkdownOutput(content) {
+ return normalizeMarkdownSpacing(content);
+}
+
// ---------------------------------------------------------------------------
// Sort longer names first to avoid partial-match problems
// e.g. {PlatformLower} must match before {Platform}
@@ -576,7 +623,7 @@ function expandSharedFiles(sharedSrcDir, gridsOutDir) {
content = ensureMdxImports(content);
// 8. Write as .mdx
- writeFileSync(path.join(outSubDir, entry), content, 'utf8');
+ writeFileSync(path.join(outSubDir, entry), prepareMarkdownOutput(content), 'utf8');
}
console.log(`[generate] _shared/${entry} → grid/, hierarchical-grid/, tree-grid/, pivot-grid/`);
@@ -604,9 +651,9 @@ function processDir(srcDir, outDir, relBase = '') {
}
const raw = readFileSync(srcPath, 'utf8');
if (/\.mdx$/.test(entry)) {
- writeFileSync(path.join(outDir, entry), ensureMdxImports(transformMdxFile(raw)), 'utf8');
+ writeFileSync(path.join(outDir, entry), prepareMarkdownOutput(ensureMdxImports(transformMdxFile(raw))), 'utf8');
} else {
- writeFileSync(path.join(outDir, entry), transformRegularFile(raw), 'utf8');
+ writeFileSync(path.join(outDir, entry), prepareMarkdownOutput(transformRegularFile(raw)), 'utf8');
}
} else if (entry.endsWith('.json') && entry !== 'toc.json') {
const raw = readFileSync(srcPath, 'utf8');
diff --git a/docs/xplat/scripts/resolve-api-links.mjs b/docs/xplat/scripts/resolve-api-links.mjs
index 53a0da2d08..8e1f853ae1 100644
--- a/docs/xplat/scripts/resolve-api-links.mjs
+++ b/docs/xplat/scripts/resolve-api-links.mjs
@@ -220,46 +220,6 @@ function pkgForType(t) {
return 'core';
}
-/**
- * Utility / non-component classes that should be rendered with suffix={false}
- * because Angular DV doesn't wrap them in a Component (no `Component` suffix
- * in the URL).
- *
- * Heuristic: any type whose name matches one of these suffix patterns.
- */
-const NON_COMPONENT_SUFFIXES = [
- 'Operand', // SummaryOperand, NumberSummaryOperand
- 'Strategy', // SortingStrategy
- 'Service', // GridSelectionService
- 'EventArgs',
- 'Args',
- 'Descriptor',
- 'Description',
- 'Information',
- 'Settings',
- 'Options',
- 'Behavior',
- 'Provider',
- 'Manager',
- 'Factory',
- 'Mapping',
- 'Comparer',
- 'Resolver',
- 'Adapter',
- 'Item',
- 'Frame',
- 'Layout',
-];
-
-function needsSuffix(typeName, type) {
- // Enums and interfaces never get a Component suffix.
- if (type && (type.isEnum || type.isInterface)) return false;
- for (const s of NON_COMPONENT_SUFFIXES) {
- if (typeName.endsWith(s)) return false;
- }
- return true;
-}
-
/**
* Find a type by name. Falls back to the `Xam`-prefixed form because the
* migration to MDX dropped the `Xam` prefix from `mentionedTypes` entries
@@ -428,8 +388,6 @@ function parseFrontmatter(text) {
function buildApiLink(match, originalText) {
const t = match.type;
const pkg = pkgForType(t);
- const isExcel = pkg === 'excel' || pkg === 'spreadsheet';
- const suffix = isExcel ? false : needsSuffix(t.originalName, t);
const isEnum = t.isEnum;
const isIface = t.isInterface;
const kind = isEnum ? 'enum' : (isIface ? 'interface' : 'class');
@@ -446,17 +404,6 @@ function buildApiLink(match, originalText) {
props.push(`member="${jsMemberName(match.member)}"`);
props.push(`label="${originalText}"`);
}
- // Cases where the platform Igr/Igx/Igc/Igb prefix must NOT be auto-added:
- // 1. Excel / Spreadsheet types — DV docs don't prefix these.
- // 2. Enums — TypeDoc-generated DV docs publish enums under bare names
- // (e.g. `enums/CategoryChartType`, never `enums/IgrCategoryChartType`).
- // 3. Inline backticks that already contain the prefix (avoids "IgrIgrFoo").
- const alreadyPrefixed = /^(Igr|Igx|Igc|Igb)/.test(originalText) && match.kind === 'type';
- if (isExcel || isEnum || alreadyPrefixed) {
- props.push(`prefixed={false}`);
- }
- if (!suffix && kind === 'class') props.push(`suffix={false}`);
-
return ` `;
}
diff --git a/docs/xplat/src/content/en/components/bullet-graph.mdx b/docs/xplat/src/content/en/components/bullet-graph.mdx
index bb4b22cddc..3f982e25d1 100644
--- a/docs/xplat/src/content/en/components/bullet-graph.mdx
+++ b/docs/xplat/src/content/en/components/bullet-graph.mdx
@@ -18,14 +18,14 @@ The {ProductName} bullet graph component provides you with the ability to create
## {Platform} Bullet Graph Example
-The following sample demonstrates how setting multiple properties on the same can transform it to completely different bullet graph.
+The following sample demonstrates how setting multiple properties on the same can transform it to completely different bullet graph.
-The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property.
+The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the property.
The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.
@@ -45,7 +45,7 @@ npm install --save {PackageGauges}
## Component Modules
-The requires the following modules:
+The requires the following modules:
@@ -315,7 +315,7 @@ Performance value is the primary measure displayed by the component and it is vi
## Highlight Value
-The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the appear with a lower opacity. A good example is if is 50 and is set to 25. This would represent a performance of 50% regardless of what the value of is set to. To enable this first set to Overlay and then apply a to something lower than .
+The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the appear with a lower opacity. A good example is if is 50 and is set to 25. This would represent a performance of 50% regardless of what the value of is set to. To enable this first set to Overlay and then apply a to something lower than .
@@ -791,7 +791,7 @@ The backing element represents background and border of the bullet graph compone
## Scale
-The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using property) and all labels will be rendered from right-to-left instead of left-to-right.
+The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using property) and all labels will be rendered from right-to-left instead of left-to-right.
@@ -1166,8 +1166,8 @@ For your convenience, all above code snippets are combined into one code block b
## API References
-
-
+
+
## Additional Resources
You can find more information about other types of gauges in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/chart-api.mdx b/docs/xplat/src/content/en/components/charts/chart-api.mdx
index c73ec2b28b..000cfbbd87 100644
--- a/docs/xplat/src/content/en/components/charts/chart-api.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-api.mdx
@@ -11,111 +11,111 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Charts API
-The {ProductName} charts provide simple and easy to use APIs to plot your data in , , , , , , and UI elements.
+The {ProductName} charts provide simple and easy to use APIs to plot your data in , , , , , , and UI elements.
## {Platform} Category Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
| Chart Properties | Axis Properties | Series Properties |
|------------------|-----------------|-------------------|
-| - - - - - - - - - | - - - - - - - - - - | - - - - - - |
+| - - - - - - - - - | - - - - - - - - - - | - - - - - - |
## {Platform} Financial Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
| Chart Properties | Axis Properties | Series Properties |
|------------------|-----------------|-------------------|
-| - - - - - - - - - | - - - - - - - - - - | - - - - - - - - |
+| - - - - - - - - - | - - - - - - - - - - | - - - - - - - - |
## {Platform} Data Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
| Chart Properties | Axis Classes |
|------------------|--------------|
-| - - - - - - - - - - | - is base class for all axis types - used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) - used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md) - used with [Radial Series](types/radial-chart.md) - used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md) - used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) - used with [Polar Series](types/polar-chart.md) - used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md) - used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md) |
+| - - - - - - - - - - | - is base class for all axis types - used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) - used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md) - used with [Radial Series](types/radial-chart.md) - used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md) - used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) - used with [Polar Series](types/polar-chart.md) - used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md) - used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md) |
-The {Platform} can use the following type of series that inherit from :
+The {Platform} can use the following type of series that inherit from :
| Category Series | Stacked Series |
|------------------|----------------|
-| - - - - - - - - - - - - `RangeBarSeries` - | - - - - - - - - - - |
+| - - - - - - - - - - - - `RangeBarSeries` - | - - - - - - - - - - |
| Scatter Series | Financial Series |
|----------------|------------------|
-| - - - - - - - - - | - - - - - - - - - - and [many more](types/stock-chart.md) |
+| - - - - - - - - - | - - - - - - - - - - and [many more](types/stock-chart.md) |
| Radial Series | Polar Series |
|---------------|--------------|
-| - - - - | - - - - - |
+| - - - - | - - - - - |
## {Platform} Data Legend API
-The {Platform} has the following API members:
-
--
--
--
--
--
--
--
--
--
--
--
--
--
--
--
--
+The {Platform} has the following API members:
+
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
## {Platform} Donut Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
--
--
--
+-
+-
+-
## {Platform} Data Pie Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
--
--
--
--
--
+-
+-
+-
+-
+-
## {Platform} Pie Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
## {Platform} Sparkline Chart API
-The {Platform} has the following API members:
+The {Platform} has the following API members:
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/charts/chart-features.mdx b/docs/xplat/src/content/en/components/charts/chart-features.mdx
index 1c856ceac8..37609f2313 100644
--- a/docs/xplat/src/content/en/components/charts/chart-features.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-features.mdx
@@ -76,6 +76,6 @@ Use trendlines to identify a trend or find patterns in your data. There are many
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/chart-overview.mdx b/docs/xplat/src/content/en/components/charts/chart-overview.mdx
index 64c836b4bc..2da1dfa7f1 100644
--- a/docs/xplat/src/content/en/components/charts/chart-overview.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-overview.mdx
@@ -54,7 +54,7 @@ Choosing these specific domain charts allows to simplify the API and draw a lot
Domain charts are using a data chart at its core; so the same performance optimizations apply to both. The difference lies in whether they are trying to make things very easy to specify for the developer, or to be as flexible as possible. {Platform} Data Chart is more verbose, unlocking all of our charting capabilities you need, allowing you to mix and match of any number of series, axes or annotation for example. For the category and financial charts, there might be a situation that cannot be easily done that the data chart is more suited for, such as a series with a scatter series with a numeric x axis.
-It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using {Platform} Data Chart, such as presenting something other than what is covered by the category chart's property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the {Platform} Financial Chart covers only column, OHLC bar, candlestick, and line series types.
+It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using {Platform} Data Chart, such as presenting something other than what is covered by the category chart's property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the {Platform} Financial Chart covers only column, OHLC bar, candlestick, and line series types.
We make {Platform} Category and Financial Chart easier to use, the good news you can always switch to data chart in the future.
@@ -290,6 +290,6 @@ If you are considering any other {Platform} Charts on the market, here are a few
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
index 66380be02f..3af45c9122 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
@@ -14,11 +14,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
Animations allows you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis.
-Animations are disabled in the {ProductName} Charts, but they can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
+Animations are disabled in the {ProductName} Charts, but they can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
## {Platform} Chart Animation Example
-The following example depicts a [Line Chart](../types/line-chart.md) with an animation set to the default - "Auto." The drop-down and slider at the top in this example will allow you to modify the and , respectively, so that you can see what the different supported animations look like at different speeds.
+The following example depicts a [Line Chart](../types/line-chart.md) with an animation set to the default - "Auto." The drop-down and slider at the top in this example will allow you to modify the and , respectively, so that you can see what the different supported animations look like at different speeds.
@@ -32,4 +32,4 @@ You can find more information about related chart features in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-annotations.mdx
index 0d85f153a2..bac404a9eb 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-annotations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-annotations.mdx
@@ -28,18 +28,18 @@ Like this sample? Get access to our complete {Platform} toolkit and start buildi
## {Platform} Crosshair Layer
-The renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.
+The renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.
Crosshair types include:
- Horizontal
- Vertical
- Both
-The chart's crosshairs can also be configured to snap to data points by setting the property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
+The chart's crosshairs can also be configured to snap to data points by setting the property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
-You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the property.
+You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the property.
-By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the property of the Crosshair Layer.
+By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the property of the Crosshair Layer.
The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color.
@@ -50,15 +50,15 @@ The following example shows how to configure the crosshair layer but targeting a
## {Platform} Final Value Layer
-The of the control provides a quick view along the axis of the ending value displayed in a series.
+The of the control provides a quick view along the axis of the ending value displayed in a series.
-You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the property.
+You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the property.
You can also customize this annotation by setting the following properties:
-- : This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
-- : This property is used to choose the brush for the annotation's text color.
-- : This property is used to choose the brush for the annotation's outline color.
+- : This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
+- : This property is used to choose the brush for the annotation's text color.
+- : This property is used to choose the brush for the annotation's outline color.
The following example demonstrates how to style the final value layer annotation by setting the properties listed above.
@@ -102,21 +102,21 @@ The following example demonstrates how to style the final value layer annotation
## {Platform} Callout Layer
-The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.
+The displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.
Use the callout annotations to display additional information, such as notes or specific details about data points, that you would like to point out to your users.
-You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the property.
+You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the property.
You can also customize this annotation by setting the following properties:
-- : This property is used to choose the brush for the leader lines for the callouts for the layer.
-- : This property is used to choose the brush for the annotation's outline color.
-- : This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
-- : This property is used to choose the brush for the annotation's text color.
-- : This property is used to choose the thickness for the callout backing.
-- : This property is used to curve the corners of the callouts.
-- : This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom
+- : This property is used to choose the brush for the leader lines for the callouts for the layer.
+- : This property is used to choose the brush for the annotation's outline color.
+- : This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
+- : This property is used to choose the brush for the annotation's text color.
+- : This property is used to choose the thickness for the callout backing.
+- : This property is used to curve the corners of the callouts.
+- : This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom
The following example demonstrates how to style the callout layer annotations by setting the properties listed above:
@@ -187,7 +187,7 @@ chart.calloutsLabelMemberPath = "info";
### Timeline Styling
-The following example demonstrates how to style the data chart as a timeline with annotations by setting the properties listed above:
+The following example demonstrates how to style the data chart as a timeline with annotations by setting the properties listed above:
@@ -198,4 +198,4 @@ The following example demonstrates how to style the data chart as a timeline wit
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
index e7082aea3d..202de79a77 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
All {ProductName} charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.
-the following examples can be applied to as well as controls.
+the following examples can be applied to as well as controls.
Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines.
@@ -39,20 +39,20 @@ This example shows how configure the axis gridline to display major and minor gr
Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.
-In order to display minor gridlines that correspond to minor interval, you need to set and properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.
+In order to display minor gridlines that correspond to minor interval, you need to set and properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.
You can customize how the gridlines are displayed in your {Platform} chart by setting the following properties:
| Axis Visuals | Type | Property Names | Description |
| -----------------------|---------|--------------------------------------------------------------|---------------- |
-| Major Stroke Color | string | | These properties set the color of axis major gridlines. |
-| Minor Stroke Color | string | | These properties set the color of axis minor gridlines. |
-| Major Stroke Thickness | number | | These properties set the thickness in pixels of the axis major gridlines. |
-| Minor Stroke Thickness | number | | These properties set the thickness in pixels of the axis minor gridlines. |
-| Major Interval | number | | These properties set interval between axis major gridlines and labels. |
-| Minor Interval | number | | These properties set interval between axis minor gridlines, if used. |
-| Axis Line Stroke Color | string | | These properties set the color of an axis line. |
-| Axis Stroke Thickness | number | | These properties set the thickness in pixels of an axis line. |
+| Major Stroke Color | string | | These properties set the color of axis major gridlines. |
+| Minor Stroke Color | string | | These properties set the color of axis minor gridlines. |
+| Major Stroke Thickness | number | | These properties set the thickness in pixels of the axis major gridlines. |
+| Minor Stroke Thickness | number | | These properties set the thickness in pixels of the axis minor gridlines. |
+| Major Interval | number | | These properties set interval between axis major gridlines and labels. |
+| Minor Interval | number | | These properties set interval between axis minor gridlines, if used. |
+| Axis Line Stroke Color | string | | These properties set the color of an axis line. |
+| Axis Stroke Thickness | number | | These properties set the thickness in pixels of an axis line. |
Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties.
@@ -67,9 +67,9 @@ The following example demonstrates how to customize the gridlines by setting the
-The axes of the also have the ability to place a dash array on the major and minor gridlines by utilizing the and properties, respectively. The actual axis line can be dashed as well by setting the property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.
+The axes of the also have the ability to place a dash array on the major and minor gridlines by utilizing the and properties, respectively. The actual axis line can be dashed as well by setting the property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.
-The following example demonstrates a with the above dash array properties set:
+The following example demonstrates a with the above dash array properties set:
@@ -78,9 +78,9 @@ The following example demonstrates a w
## {Platform} Axis Tickmarks Example
-Axis tick marks are enabled by setting the and properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
+Axis tick marks are enabled by setting the and properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
-Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the property is set to 5, axis labels will be shifted left by that amount.
+Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the property is set to 5, axis labels will be shifted left by that amount.
The following example demonstrates how to customize the tickmarks by setting the properties above:
@@ -97,9 +97,9 @@ You can customize how the axis tickmarks are displayed in our {Platform} chats b
| Axis Visuals | Type | Property Names | Description |
| -----------------------|---------|------------------------------------------------------------|------------------------- |
-| Tick Stroke Color | string | | These properties set the color of the tickmarks. |
-| Tick Stroke Thickness | number | | These properties set the thickness of the axis tick marks. |
-| Tick Stroke Length | number | | These properties set the length of the axis tick marks. |
+| Tick Stroke Color | string | | These properties set the color of the tickmarks. |
+| Tick Stroke Thickness | number | | These properties set the thickness of the axis tick marks. |
+| Tick Stroke Length | number | | These properties set the length of the axis tick marks. |
## Additional Resources
@@ -113,25 +113,25 @@ You can find more information about related chart features in these topics:
The following is a list of API members mentioned in the above sections:
-| | or |
+| | or |
| -------------------------------------------------- | ----------------------------------- |
-| -> -> | (Major Interval) |
-| -> -> | (Major Interval) |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | (Axis Line Color) |
-| -> -> | (Axis Line Color) |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | (Space between Major Gridlines) |
-| -> -> | (Space between Major Gridlines) |
+| -> -> | (Major Interval) |
+| -> -> | (Major Interval) |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | (Axis Line Color) |
+| -> -> | (Axis Line Color) |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | (Space between Major Gridlines) |
+| -> -> | (Space between Major Gridlines) |
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
index cb3445fc2d..42fb681281 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
@@ -17,14 +17,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
All {ProductName} charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below.
-the following examples can be applied to as well as controls.
+the following examples can be applied to as well as controls.
## Axis Locations Example
-For all axes, you can specify axis location in relationship to chart plot area. The property of the {Platform} charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the property to position y-axis on left side or right side of plot area.
+For all axes, you can specify axis location in relationship to chart plot area. The property of the {Platform} charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the property to position y-axis on left side or right side of plot area.
-The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
+The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
@@ -39,11 +39,11 @@ e.g. https://www.infragistics.com/help/wpf/datachart-axis-orientation
## Axis Advanced Scenarios
-For more advanced axis layout scenarios, you can use {Platform} Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the .
+For more advanced axis layout scenarios, you can use {Platform} Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the .
### Axis Sharing Example
-You can share and add multiple axes in the same plot area of the {Platform} . It a common scenario to use share and add multiple to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).
+You can share and add multiple axes in the same plot area of the {Platform} . It a common scenario to use share and add multiple to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).
The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.md) and a [Column Chart](../types/column-chart.md) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.md) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.md), while the X-Axis is shared between the two.
@@ -56,7 +56,7 @@ The following example depicts a stock price and trade volume chart with a [Stock
### Axis Crossing Example
-In addition to placing axes outside plot area, the {Platform} also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting and properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
+In addition to placing axes outside plot area, the {Platform} also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting and properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.md) with the X and Y axes crossing each other at the (0, 0) origin point.
@@ -73,7 +73,7 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline
### Axis Timeline Example
-The following example demonstrates how to style the data chart using the as a timeline:
+The following example demonstrates how to style the data chart using the as a timeline:
@@ -99,24 +99,24 @@ The following is a list of API members mentioned in the above sections:
d in the above sections:
-| | |
+| | |
| ------------------------------------------------------ | ------------------------------- |
-| -> -> | None |
-| -> -> | None |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
-| -> -> | |
+| -> -> | None |
+| -> -> | None |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
+| -> -> | |
{/*TODO correct links in Transformer */}
{/*
-| -> -> `labelSettings.location` | |
-| -> -> `labelSettings.location` | |
-| -> -> `labelSettings.horizontalAlignment` | |
-| -> -> `labelSettings.verticalAlignment` | |
-| -> -> `labelSettings.visibility` | |
-| -> -> `labelSettings.visibility` | |*/}
+| -> -> `labelSettings.location` | |
+| -> -> `labelSettings.location` | |
+| -> -> `labelSettings.horizontalAlignment` | |
+| -> -> `labelSettings.verticalAlignment` | |
+| -> -> `labelSettings.visibility` | |
+| -> -> `labelSettings.visibility` | |*/}
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
index 1794f79635..d198f3da81 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
@@ -39,15 +39,15 @@ The {Platform} Charts allows you full control over configuring, formatting, and
The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis.
-This enhanced calculation is something that you need to opt-in to, which you can do by setting the property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the property of the axis, you can set the property on the axis to true.
+This enhanced calculation is something that you need to opt-in to, which you can do by setting the property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the property of the axis, you can set the property on the axis to true.
-The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired.
+The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired.
-After setting the , you can set the property to true to opt into the automatic margin or set the property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the and to provide extra space or a maximum possible margin, respectively.
+After setting the , you can set the property to true to opt into the automatic margin or set the property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the and to provide extra space or a maximum possible margin, respectively.
-Custom label formats such as `NumberFormatSpecifier` and `DateTimeFormatSpecifier` can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`.
+Custom label formats such as and can be added to each axis via the and collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the or need to be set to data item's property name on the , eg. `{Date}`. For the the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`.
-The following example formats the yAxis with a `NumberFormatSpecifier` to represent $USD prices for top box office movies in the United States.
+The following example formats the yAxis with a to represent $USD prices for top box office movies in the United States.
@@ -56,9 +56,9 @@ The following example formats the yAxis with a `NumberFormatSpecifier` to repres
## Axis Range Example
-In the {Platform} charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the and options.
+In the {Platform} charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the and options.
-By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the property.
+By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the property.
@@ -70,11 +70,11 @@ By default, charts will calculate the minimum and maximum values for the numeric
## Axis Modes & Scale
-In the and controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the property is set to true or on linear scale when this property is set to false (default value). With the property, you can change base of logarithmic scale from default value of 10 to other integer value.
+In the and controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the property is set to true or on linear scale when this property is set to false (default value). With the property, you can change base of logarithmic scale from default value of 10 to other integer value.
-The and control allows you to choose how your data is represented along the y-axis using property that provides and modes. The mode will plot data with the exact values while the mode will display the data as percentage change relative to the first data point provided. The default value is mode.
+The and control allows you to choose how your data is represented along the y-axis using property that provides and modes. The mode will plot data with the exact values while the mode will display the data as percentage change relative to the first data point provided. The default value is mode.
-In addition to property, the control has property that provides and modes for the x-axis. The mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The mode will collapse date areas where data does not exist. The default value is mode.
+In addition to property, the control has property that provides and modes for the x-axis. The mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The mode will collapse date areas where data does not exist. The default value is mode.
@@ -85,13 +85,13 @@ In addition to property of the {Platform} charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
+The property of the {Platform} charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
-The property of the {Platform} charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set to.
+The property of the {Platform} charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set to.
-The property of the {Platform} charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
+The property of the {Platform} charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
-The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
+The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
@@ -102,9 +102,9 @@ The following example shows the average maximum temperature in Celsius in New Yo
## Axis Overlap Example
-The property of the {Platform} charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
+The property of the {Platform} charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
-The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
+The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
@@ -124,20 +124,20 @@ You can find more information about related chart features in these topics:
The following is a list of API members mentioned in the above sections:
-| | | |
+| | | |
| ------------------------------------------------------ | ---------------------- | ---------------------- |
-| -> -> | | |
-| -> -> | | |
-| -> -> | | |
-| -> -> | | |
-| -> -> | None | |
-| -> -> | None | |
-| -> | | None |
-| -> | | None |
-| -> -> `labelSettings.angle` | | |
-| -> -> `labelSettings.angle` | | |
-| -> -> `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` |
-| -> -> `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` |
-| -> -> `labelSettings.visibility` | | |
-| -> -> `labelSettings.visibility` | | |
+| -> -> | | |
+| -> -> | | |
+| -> -> | | |
+| -> -> | | |
+| -> -> | None | |
+| -> -> | None | |
+| -> | | None |
+| -> | | None |
+| -> -> `labelSettings.angle` | | |
+| -> -> `labelSettings.angle` | | |
+| -> -> `labelSettings.textColor` | `YAxisLabelForeground` | `YAxisLabelForeground` |
+| -> -> `labelSettings.textColor` | `XAxisLabelForeground` | `XAxisLabelForeground` |
+| -> -> `labelSettings.visibility` | | |
+| -> -> `labelSettings.visibility` | | |
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
index 3987b4564d..d519596d14 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
@@ -13,150 +13,150 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Axis Types
-The {ProductName} Category Chart uses only one and one type. Similarly, {ProductName} Financial Chart uses only one and one types. However, the {ProductName} Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
+The {ProductName} Category Chart uses only one and one type. Similarly, {ProductName} Financial Chart uses only one and one types. However, the {ProductName} Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
## Cartesian Axes
-The with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis
-( , , and ) and 2 types of Y-Axis ( and ).
+The with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis
+( , , and ) and 2 types of Y-Axis ( and ).
### Category X-Axis
-The treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source.
+The treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source.
-The requires you to provide a `DataSource` and a in order to plot data with it. It is generally used with the to plot the following type of series:
+The requires you to provide a and a in order to plot data with it. It is generally used with the to plot the following type of series:
| Category Series | Stacked Series | Financial Series |
|------------------|----------------|--------------------|
-| - - - - - - - - - - - | - - - - - - - - | - - - - - - - - |
+| - - - - - - - - - - - | - - - - - - - - | - - - - - - - - |
- The following example demonstrates usage of the type:
+ The following example demonstrates usage of the type:
### Category Y-Axis
-The works very similarly to the described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a `DataSource` and a in order to plot data with it. The is generally used with the to plot the following type of series:
+The works very similarly to the described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a and a in order to plot data with it. The is generally used with the to plot the following type of series:
--
+-
- `RangeBarSeries`
--
--
+-
+-
- The following example demonstrates usage of the type:
+ The following example demonstrates usage of the type:
### Numeric X-Axis
-The treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the labels depends on the property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the , `RangeBarSeries`, , and .
+The treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the labels depends on the property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the , `RangeBarSeries`, , and .
-The is compatible with the following type of series:
+The is compatible with the following type of series:
--
+-
- `RangeBarSeries`
--
--
--
--
--
--
--
--
--
--
--
-
- The following example demonstrates usage of the :
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+
+ The following example demonstrates usage of the :
### Numeric Y-Axis
-The treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the labels depends on the property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
+The treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the labels depends on the property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a . Alternatively, if combined with the , these labels will be placed corresponding to the of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
-The is compatible with the following type of series:
+The is compatible with the following type of series:
| Category Series | Stacked Series | Financial Series | Scatter Series |
|------------------|----------------|------------------|----------------|
-| - - - - - - - - - - - | - - - - - - - - | - - - - - - - - | - - - - - - - - - |
+| - - - - - - - - - - - | - - - - - - - - | - - - - - - - - | - - - - - - - - - |
- The following example demonstrates usage of the :
+ The following example demonstrates usage of the :
### Time X Axis
-The treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its . This, along with a `DataSource` is required to plot data with this axis type.
+The treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its . This, along with a is required to plot data with this axis type.
-The is the X-Axis type in the component.
+The is the X-Axis type in the component.
#### Breaks in Time X Axis
-The has the option to exclude intervals of data by using . As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of can be added to the collection of the axis and configured by using a unique , and .
+The has the option to exclude intervals of data by using . As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of can be added to the collection of the axis and configured by using a unique , and .
#### Formatting in Time X Axis
-The has the property, which represents a collection of objects. Each added to the collection is responsible for assigning a unique and . This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart.
+The has the property, which represents a collection of objects. Each added to the collection is responsible for assigning a unique and . This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart.
-The property of the specifies what format to use for a particular visible range. The property of the specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format.
+The property of the specifies what format to use for a particular visible range. The property of the specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format.
#### Intervals in Time X Axis
-The replaces the conventional property of the category and numeric axes with an collection of type . Each added to the collection is responsible for assigning a unique , and . This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below:
+The replaces the conventional property of the category and numeric axes with an collection of type . Each added to the collection is responsible for assigning a unique , and . This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below:
-- : This specifies the interval to use. This is tied to the property. For example, if the is set to `Days`, then the numeric value specified in will be in days.
-- : This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours.
-- : This specifies the unit of time for the property.
+- : This specifies the interval to use. This is tied to the property. For example, if the is set to `Days`, then the numeric value specified in will be in days.
+- : This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours.
+- : This specifies the unit of time for the property.
## Polar Axes
-The with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart.
+The with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart.
### Category Angle Axis
-The treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
+The treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
-The is generally used with the to plot [Radial Series](../types/radial-chart.md).
+The is generally used with the to plot [Radial Series](../types/radial-chart.md).
-The following example demonstrates usage of the type:
+The following example demonstrates usage of the type:
### Proportional Category Angle Axis
-The treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
+The treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
-The is generally used with the to plot a pie chart eg. [Radial Series](../types/radial-chart.md).
+The is generally used with the to plot a pie chart eg. [Radial Series](../types/radial-chart.md).
-The following example demonstrates usage of the type:
+The following example demonstrates usage of the type:
### Numeric Angle Axis
-The treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the varies according to the value in the data column mapped using the property of the [Polar Series](../types/polar-chart.md) object or the property of the [Radial Series](../types/radial-chart.md) object.
+The treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the varies according to the value in the data column mapped using the property of the [Polar Series](../types/polar-chart.md) object or the property of the [Radial Series](../types/radial-chart.md) object.
-The The can be used with either the to plot [Radial Series](../types/radial-chart.md) or with the to plot [Polar Series](../types/polar-chart.md) respectively.
+The The can be used with either the to plot [Radial Series](../types/radial-chart.md) or with the to plot [Polar Series](../types/polar-chart.md) respectively.
-The following example demonstrates usage of the type:
+The following example demonstrates usage of the type:
### Numeric Radius Axis
-The treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series.
+The treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series.
-The can be used with the to plot [Polar Series](../types/polar-chart.md).
+The can be used with the to plot [Polar Series](../types/polar-chart.md).
-The following example demonstrates usage of the type:
+The following example demonstrates usage of the type:
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
index 51856d9cc4..a9a245503a 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
@@ -13,13 +13,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Data Aggregations
-In the {ProductName} control Data Aggregations feature allows you to group data in the chart by unique values on the and then sort those groups. You may then apply summaries which will be reflected by the range of the and will be displayed in the tooltip when hovering the series.
+In the {ProductName} control Data Aggregations feature allows you to group data in the chart by unique values on the and then sort those groups. You may then apply summaries which will be reflected by the range of the and will be displayed in the tooltip when hovering the series.
## {Platform} Data Aggregations Example
-The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.
+The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.
-Note, the abbreviated functions found within the dropdowns for and have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc
+Note, the abbreviated functions found within the dropdowns for and have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc
@@ -64,4 +64,4 @@ Note, the abbreviated functions found within the dropdowns for
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
index e558fa365d..410b907294 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
@@ -30,7 +30,7 @@ Like this sample? Get access to our complete {Platform} toolkit and start buildi
## {Platform} Data Annotation Slice Layer Example
-In {Platform}, the renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the property.
+In {Platform}, the renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the property.
For example, you can use DataAnnotationSliceLayer to annotate stock prices with important events such as stock split and outcome of earning reports.
@@ -41,9 +41,9 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with
## {Platform} Data Annotation Strip Layer Example
-In {Platform}, the renders multiple vertical or horizontal strips between 2 values on an axis in the component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
+In {Platform}, the renders multiple vertical or horizontal strips between 2 values on an axis in the component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the also supports data binding via the property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
-For example, you can use to annotate chart with stock market crashes and changes in federal interest rates.
+For example, you can use to annotate chart with stock market crashes and changes in federal interest rates.
@@ -52,7 +52,7 @@ For example, you can use renders multiple lines between 2 points in plot area of the component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using and properties and the ending points should be mapped using and properties.
+In {Platform}, renders multiple lines between 2 points in plot area of the component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using and properties and the ending points should be mapped using and properties.
For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis.
@@ -63,7 +63,7 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline
## {Platform} Data Annotation Rect Layer Example
-In {Platform}, the renders multiple rectangles defined by starting and ending points in plot area of the component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using and properties and the ending points should be mapped using and properties.
+In {Platform}, the renders multiple rectangles defined by starting and ending points in plot area of the component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using and properties and the ending points should be mapped using and properties.
For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis.
@@ -74,7 +74,7 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an
## {Platform} Data Annotation Band Layer Example
-In {Platform}, the renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the `DataSource` property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using and properties and the ending points should be mapped using and properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
+In {Platform}, the renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using and properties and the ending points should be mapped using and properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices.
@@ -87,14 +87,14 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in
The following is a list of API members mentioned in the above sections:
-- : This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- `DataSource`: This property binds data to the annotation layer to provide the precise shape.
-- : This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- : This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- : This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- : This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- : This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis.
-- | | | | : These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label.
-- : This property is a mapping to the data column representing the axis label for the starting position of , , on the y-axis.
-- : This property is a mapping to the data column representing the axis label for the ending position of , , on the y-axis.
+- : This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
+- : This property binds data to the annotation layer to provide the precise shape.
+- : This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
+- : This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
+- : This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
+- : This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
+- : This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis.
+- | | | | : These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label.
+- : This property is a mapping to the data column representing the axis label for the starting position of , , on the y-axis.
+- : This property is a mapping to the data column representing the axis label for the ending position of , , on the y-axis.
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
index 7edfcdb458..8ee7635336 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
@@ -22,13 +22,13 @@ A complete list of valid expressions and keywords to form a query string can be
## {Platform} Chart Data Filter Example
-The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the property, to update the chart visual and thus filtering out the other decades out.
+The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the property, to update the chart visual and thus filtering out the other decades out.
-The property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in.
+The property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in.
eg. To show all countries that start with the letter B:
@@ -49,4 +49,4 @@ You can find more information about related chart features in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx
index 6d4f9e2328..deaa08e08b 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-legend.mdx
@@ -15,37 +15,37 @@ import layoutMode from '@xplat-images/general/layout_mode.png';
# {Platform} Data Legend
-In {ProductName}, the is highly-customizable version of the , that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the , , and . Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit).
+In {ProductName}, the is highly-customizable version of the , that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the , , and . Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit).
## {Platform} Data Legend Rows
-The rows of the include the header row, series row(s), and the summary row. The header row displays the axis label of the point that is hovered, and can be changed using the property.
+The rows of the include the header row, series row(s), and the summary row. The header row displays the axis label of the point that is hovered, and can be changed using the property.
### Header Row
-The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use and properties to format date and time in the if the x-axis shows dates. For other types of series, the does not render the header row.
+The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use and properties to format date and time in the if the x-axis shows dates. For other types of series, the does not render the header row.
### Series Row
-The series row represents each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol or unit of measurement, if specified. You can filter series rows by setting or properties to a collection of series' indexes (1, 2, 3) or series' titles (Tesla, Microsoft).
+The series row represents each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol or unit of measurement, if specified. You can filter series rows by setting or properties to a collection of series' indexes (1, 2, 3) or series' titles (Tesla, Microsoft).
### Summary Row
-Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the property of the legend. Also, you can use the property to customize whether you display the , , , or of series values in the summary row.
+Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the property of the legend. Also, you can use the property to customize whether you display the , , , or of series values in the summary row.
## {Platform} Data Legend Columns
-The columns of the include the series title, label, value of data column, and optional unit associated with the value. Some series in the chart can have multiple columns for label, value, and units. For example, financial price series has **High**, **Low**, **Open**, and **Close** data columns which can be filtered in the using the or properties.
+The columns of the include the series title, label, value of data column, and optional unit associated with the value. Some series in the chart can have multiple columns for label, value, and units. For example, financial price series has **High**, **Low**, **Open**, and **Close** data columns which can be filtered in the using the or properties.
-Setting values on the and properties, depends on type of series and how many data columns they support. For example, you can set property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend.
+Setting values on the and properties, depends on type of series and how many data columns they support. For example, you can set property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend.
| Type of Series | Column Names |
| -----------------|-------------- |
@@ -61,20 +61,20 @@ Where the **TypicalPrice** and percentage **Change** of OHLC prices are automati
### Title Column
-The title column displays legend badges and series titles, which come from the property of the different plotted in the chart.
+The title column displays legend badges and series titles, which come from the property of the different plotted in the chart.
### Label Column
-The label column displays short name on the left side of value column, e.g. "O" for **Open** stock price. You can toggle visibility of this column using the property.
+The label column displays short name on the left side of value column, e.g. "O" for **Open** stock price. You can toggle visibility of this column using the property.
### Value Column
-The value column displays values of series as abbreviated text which can be formatted using the property to apply the same abbreviation for all numbers by setting this property to . Alternatively, a user can select other abbreviations such as , , , etc. Precision of abbreviated values is controlled using the and for minimum and maximum digits, respectively.
+The value column displays values of series as abbreviated text which can be formatted using the property to apply the same abbreviation for all numbers by setting this property to . Alternatively, a user can select other abbreviations such as , , , etc. Precision of abbreviated values is controlled using the and for minimum and maximum digits, respectively.
### Unit Column
-The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the property, e.g. "M" for the abbreviation.
+The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the property, e.g. "M" for the abbreviation.
### Customizing Columns
@@ -88,11 +88,11 @@ You can customize text displayed in the **Label** and **Unit** columns using pr
| Range Series | HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K" |
| Financial Series | OpenMemberAsLegendLabel="O:" OpenMemberAsLegendUnit="K" HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K" CloseMemberAsLegendLabel="C:" CloseMemberAsLegendUnit="K" |
-Also, you can use the `UnitText` property on the to change text displayed in all Unit columns.
+Also, you can use the `UnitText` property on the to change text displayed in all Unit columns.
## Layout Mode
-Legend items can be positioned in a vertical or table structure via the property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
+Legend items can be positioned in a vertical or table structure via the property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
eg.
@@ -100,7 +100,7 @@ eg.
## {Platform} Data Legend Styling
-The provides properties for styling each type of column. Each of these properties begins with **Title**, **Label**, **Value**, or **Units**. You can style the text's color, font, and margin. For example, if you wanted to set the text color of all columns, you would set the , , , and properties. The following example demonstrates a utilization of the styling properties mentioned above:
+The provides properties for styling each type of column. Each of these properties begins with **Title**, **Label**, **Value**, or **Units**. You can style the text's color, font, and margin. For example, if you wanted to set the text color of all columns, you would set the , , , and properties. The following example demonstrates a utilization of the styling properties mentioned above:
@@ -109,7 +109,7 @@ The provides properties for styling e
## {Platform} Data Legend Value Formatting
-The provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
+The provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
The following example demonstrates how to use those properties:
@@ -119,7 +119,7 @@ The following example demonstrates how to use those properties:
## {Platform} Data Legend Value Mode
-You have the ability to change the default decimal display of values within the to a currency by changing the property. Also, you can change the culture of the displayed currency symbol by setting the property a culture tag. For example, the following example data legend with the set to "en-GB" to display British Pounds (£) symbol:
+You have the ability to change the default decimal display of values within the to a currency by changing the property. Also, you can change the culture of the displayed currency symbol by setting the property a culture tag. For example, the following example data legend with the set to "en-GB" to display British Pounds (£) symbol:
@@ -127,8 +127,8 @@ You have the ability to change the default decimal display of values within the
## {Platform} Data Legend Grouping
- can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
-By default, DataLegend will hide names of groups, but you can display group names by setting the property to true.
+ can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
+By default, DataLegend will hide names of groups, but you can display group names by setting the property to true.
@@ -138,37 +138,37 @@ By default, DataLegend will hide names of groups, but you can display group name
Several properties are exposed including grouping portions of the legend.
--
--
--
--
--
--
--
--
--
--
--
--
--
--
--
-
-The has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for:
-
-- : This event fires for each group to style text displayed in group rows.
-- : This event fires when rendering the header row.
-- : This event fires once for each series row, which allows conditional styling of the values of the series.
-- : This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart.
-- : This event fires once when rendering the summary row.
-- : This event fires once when rendering the summary column.
-
-Some of the events exposes a parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series.
-
-`StyleSummaryColumn` and `SeriesStyleColumn` events expose a parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns.
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+
+The has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for:
+
+- : This event fires for each group to style text displayed in group rows.
+- : This event fires when rendering the header row.
+- : This event fires once for each series row, which allows conditional styling of the values of the series.
+- : This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart.
+- : This event fires once when rendering the summary row.
+- : This event fires once when rendering the summary column.
+
+Some of the events exposes a parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series.
+
+`StyleSummaryColumn` and `SeriesStyleColumn` events expose a parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns.
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx
index bee5aba7f2..3ce60e27a7 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-selection.mdx
@@ -18,7 +18,7 @@ The {ProductName} selection feature in {Platform} Data Chart allows users to int
## Configuring Selection
-The default behavior turned off and requires opting into one of the following options. There are several selection modes available in the :
+The default behavior turned off and requires opting into one of the following options. There are several selection modes available in the :
- **Auto**
- **None**
@@ -34,10 +34,10 @@ The default behavior setting.
+`GrayscaleOthers` will behave similarly to `FadeOthers` but instead show a gray color to the rest of the series. Note this will override any setting.
`SelectionColorOutline` and `SelectionColorThickOutline` will draw a border around the series.
-In conjunction, a is available to provide greater control on which items get selected. The default behavior for Auto is `PerSeriesAndDataItemMultiSelect`.
+In conjunction, a is available to provide greater control on which items get selected. The default behavior for Auto is `PerSeriesAndDataItemMultiSelect`.
- **Auto**
- **PerDataItemMultiSelect**
@@ -58,7 +58,7 @@ The following example shows the combination of both `SelectionColorFill` and `Au
## Configuring Multiple Selection
-Other selection modes offer various methods of selection. For example using with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories.
+Other selection modes offer various methods of selection. For example using with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories.
`PerSeriesAndDataItemGlobalSingleSelect` allows single series selection across all categories at a time.
@@ -66,19 +66,19 @@ Other selection modes offer various methods of selection. For example using is applied, selected series will appear with a border when the property is set to one of the focus options.
+When is applied, selected series will appear with a border when the property is set to one of the focus options.
## Radial Series Selection
-This example demonstrates another series type via the where each radial series can be selected with different colors.
+This example demonstrates another series type via the where each radial series can be selected with different colors.
## Programmatic Selection
-Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be.
+Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the . The property of the object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be.
-The matcher is ideal for using in charts, such as the when you do not have access to the actual series, like the . In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the collection using a matcher with the following properties set
+The matcher is ideal for using in charts, such as the when you do not have access to the actual series, like the . In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the collection using a matcher with the following properties set
For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set.
@@ -89,6 +89,6 @@ For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar
The following is a list of API members mentioned in the above sections:
-| Properties | Properties |
+| Properties | Properties |
| ----------------------------------------------|---------------------------|
| | |
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx
index 964ab16acf..684a6bdae5 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-tooltip.mdx
@@ -15,11 +15,11 @@ import layoutMode from '@xplat-images/general/layout_mode.png';
# {Platform} Chart Data Tooltip
-In {ProductName}, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the , , and components.
+In {ProductName}, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the , , and components.
## {Platform} Data Tooltip Properties
-All properties of are prefixed with **DataToolTip** and exposed on API of and components. However, you will need to create an instance of and add it to series collection of component if you want to use it with Radial Charts, Polar Charts, Scatter Charts.
+All properties of are prefixed with **DataToolTip** and exposed on API of and components. However, you will need to create an instance of and add it to series collection of component if you want to use it with Radial Charts, Polar Charts, Scatter Charts.
## {Platform} Data Tooltip Elements
@@ -29,11 +29,11 @@ The **DataToolTip** displays content using a set of three types of rows and four
The rows of the **DataToolTip** include the header row, series row(s), and the summary row.
-The header row displays the axis label of the point that is hovered, and can be changed using the property.
+The header row displays the axis label of the point that is hovered, and can be changed using the property.
The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified.
-Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the property of the legend. Also, you can use the property to customize whether you display the Total, Min, Max, or Average of series values in the summary row.
+Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the property of the legend. Also, you can use the property to customize whether you display the Total, Min, Max, or Average of series values in the summary row.
The following example demonstrates the data tooltip with a summary applied:
@@ -44,15 +44,15 @@ The following example demonstrates the data tooltip with a summary applied:
### {Platform} Data Tooltip Columns
-The columns of the include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the or collections of the chart.
+The columns of the include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the or collections of the chart.
-The title column displays legend badges and series titles, which come from the property of the different plotted in the chart.
+The title column displays legend badges and series titles, which come from the property of the different plotted in the chart.
-The label column displays the name or abbreviation of the different property paths in the or collections of the tooltip.
+The label column displays the name or abbreviation of the different property paths in the or collections of the tooltip.
-The value column displays series values as abbreviated text which can be formatted using the property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the and for minimum and maximum digits, respectively.
+The value column displays series values as abbreviated text which can be formatted using the property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the and for minimum and maximum digits, respectively.
-The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the for all columns or using the following properties on each series in the chart:
+The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the for all columns or using the following properties on each series in the chart:
- Category Series (e.g. ColumnSeries)
- ValueMemberAsLegendUnit="K"
@@ -72,7 +72,7 @@ The units column displays an abbreviation symbol and/or unit text, which can be
For the above-listed properties, there are corresponding properties ending with **MemberAsLegendLabel** to determine the text in the label columns mentioned previously.
-The columns included in the and collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip.
+The columns included in the and collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip.
The following example demonstrates a data tooltip with the added columns of Open, High, Low, Close, and Change:
@@ -83,8 +83,8 @@ The following example demonstrates a data tooltip with the added columns of Open
## {Platform} Data Tooltip Grouping for Data Chart
- can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
-By default, DataLegend will hide names of groups, but you can display group names by setting the property to true. should be set to "Grouped" and should be set to "Visible" on the Data Tooltip Layer.
+ can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
+By default, DataLegend will hide names of groups, but you can display group names by setting the property to true. should be set to "Grouped" and should be set to "Visible" on the Data Tooltip Layer.
@@ -92,7 +92,7 @@ By default, DataLegend will hide names of groups, but you can display group name
## {Platform} Data Tooltip Grouping & Positioning for Category Chart & Financial Chart
-You can set property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the and properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area.
+You can set property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the and properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area.
The following example demonstrates a data tooltip positioned to the top-right of the chart:
@@ -101,7 +101,7 @@ The following example demonstrates a data tooltip positioned to the top-right of
## {Platform} Data Tooltip Value Formatting
-The **DataToolTip** provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
+The **DataToolTip** provides automatic abbreviation of large numbers using its property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the and . This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
The following example demonstrates a **DataToolTip** with the minimum and maximum fractions set:
@@ -112,14 +112,14 @@ The following example demonstrates a **DataToolTip** with the minimum and maximu
## {Platform} Data Tooltip Value Mode
-You can change the default decimal display of values within the **DataToolTip** to be currency by changing the property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the set to "en-GB":
+You can change the default decimal display of values within the **DataToolTip** to be currency by changing the property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the set to "en-GB":
## Layout Mode
-Legend items can be positioned in a vertical or table structure via the property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
+Legend items can be positioned in a vertical or table structure via the property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
eg.
@@ -128,7 +128,7 @@ eg.
## {Platform} Data Tooltip Styling
-The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the , , , and properties.
+The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the , , , and properties.
The following example demonstrates usage of the styling properties mentioned above:
@@ -137,24 +137,24 @@ The following example demonstrates usage of the styling properties mentioned abo
Several properties are exposed including grouping portions of the tooltip.
--
--
--
--
--
--
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
+-
## API References
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
index 8273b64120..0421ce8015 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
@@ -18,45 +18,45 @@ The {ProductName} Chart components support a data highlighting overlay that can
-Note that data highlighting feature is supported by the and , but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature.
+Note that data highlighting feature is supported by the and , but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature.
## Using Highlight Filter with DataChart
-In the , much of the highlight filter API happens on the series themselves, mainly by setting the property to a collection representing a subset of the data you want to highlight. The count of the items in the needs to match the count of the data bound to the of the series that you are looking to highlight, and in the case of category series, it will use the `ValueMemberPath` that you have defined as the highlight path by default. The sample at the top of this page uses the in the to show the overlay.
+In the , much of the highlight filter API happens on the series themselves, mainly by setting the property to a collection representing a subset of the data you want to highlight. The count of the items in the needs to match the count of the data bound to the of the series that you are looking to highlight, and in the case of category series, it will use the `ValueMemberPath` that you have defined as the highlight path by default. The sample at the top of this page uses the in the to show the overlay.
-In the case that the schema does not match between the and the of the series, you can configure this using the `HighlightedValueMemberPath` property on the series. Additionally, if you would like to use the of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the `HighlightedValueMemberPath` property to that path and not providing a .
+In the case that the schema does not match between the and the of the series, you can configure this using the `HighlightedValueMemberPath` property on the series. Additionally, if you would like to use the of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the `HighlightedValueMemberPath` property to that path and not providing a .
-The reduced opacity of the column and area series types is configurable by setting the property on the series. You can also set the property to `Hidden` if you do not wish to see the overlay at all.
+The reduced opacity of the column and area series types is configurable by setting the property on the series. You can also set the property to `Hidden` if you do not wish to see the overlay at all.
-The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the . This will append the value that you provide to the end of the of the series.
+The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the . This will append the value that you provide to the end of the of the series.
-If the or is used then the highlighted series will appear grouped. This can be managed by setting the property on the series to categorize them appropriately.
+If the or is used then the highlighted series will appear grouped. This can be managed by setting the property on the series to categorize them appropriately.
-The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the control using the :
+The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the control using the :
-The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the control using the :
+The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the control using the :
-The following example demonstrates the usage of the data highlighting overlay feature within the control using the :
+The following example demonstrates the usage of the data highlighting overlay feature within the control using the :
## Using Highlight Filter in CategoryChart
-The highlight filter happens on the chart by setting the property. Since the takes all of the properties on your underlying data item into account by default, you will need to define the on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the to a value path in your underlying data item to group by a path that has duplicate values.
+The highlight filter happens on the chart by setting the property. Since the takes all of the properties on your underlying data item into account by default, you will need to define the on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the to a value path in your underlying data item to group by a path that has duplicate values.
{/*Unsure of this part. Need to review */}
-{/* ????? The is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/}
+{/* ????? The is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/}
-Similar to the , the property is also exposed on the . In the case that you do not want to see the overlay, you can set this property to `Hidden`.
+Similar to the , the property is also exposed on the . In the case that you do not want to see the overlay, you can set this property to `Hidden`.
-The following example demonstrates the usage of the data highlighting overlay feature within the control:
+The following example demonstrates the usage of the data highlighting overlay feature within the control:
@@ -78,13 +78,13 @@ You can find more information about related chart features in these topics:
The following is a list of API members mentioned in the above sections:
-| Properties | Properties |
+| Properties | Properties |
| ----------------------------------------------|---------------------------|
-| | |
-| | |
-| | |
-| | |
-| | |
-| | |
-| | |
-| | |
\ No newline at end of file
+| | |
+| | |
+| | |
+| | |
+| | |
+| | |
+| | |
+| | |
\ No newline at end of file
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
index 2560598b4e..351dc1f7bd 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
@@ -20,21 +20,21 @@ The following example demonstrates the different highlighting options that are a
# {Platform} Chart Highlighting Modes & Behaviors
-All {Platform} Charts support a variety of highlighting options. can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the , , and controls and they have the same API for using the highlighting feature.
+All {Platform} Charts support a variety of highlighting options. can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the , , and controls and they have the same API for using the highlighting feature.
-The following example demonstrates the {Platform} chart.
+The following example demonstrates the {Platform} chart.
-The following example demonstrates the {Platform} chart.
+The following example demonstrates the {Platform} chart.
# {Platform} Chart Legend Highlighting
-All {Platform} Charts support legend highlighting. can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the , , and controls and they have the same API for using the highlighting feature.
+All {Platform} Charts support legend highlighting. can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the , , and controls and they have the same API for using the highlighting feature.
The following example demonstrates the legend series highlighting {Platform} chart.
@@ -43,13 +43,13 @@ The following example demonstrates the legend series highlighting {Platform} cha
## Highlight Layers
-The {ProductName} can enable three types of highlighting when hovering over data items.
+The {ProductName} can enable three types of highlighting when hovering over data items.
-1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the property to true.
+1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the property to true.
-2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the property to true.
+2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the property to true.
-3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the property to true.
+3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the property to true.
The following example demonstrates the different highlighting layers that are available on the {Platform} chart.
@@ -67,6 +67,6 @@ You can find more information about related chart features in these topics:
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
index 0a82204424..fec890c53d 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
@@ -18,9 +18,9 @@ In {ProductName}, markers are visual elements that display the values of data po
## {Platform} Chart Marker Example
-In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the property to enum value.
+In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the property to enum value.
-The colors of the markers are also managed by setting the and properties in the sample below. The markers and is configurable in this sample by using the drop-downs as well.
+The colors of the markers are also managed by setting the and properties in the sample below. The markers and is configurable in this sample by using the drop-downs as well.
@@ -28,7 +28,7 @@ The colors of the markers are also managed by setting the property of a series rendered in the control as it is demonstrated in example below.
+In addition to marker properties, you can implement your own marker by setting a function to the property of a series rendered in the control as it is demonstrated in example below.
@@ -44,4 +44,4 @@ You can find more information about related chart features in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
index 848c68f917..69c8605212 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
@@ -27,9 +27,9 @@ Like this sample? Get access to our complete {Platform} toolkit and start buildi
## Chart Navigation with User Interactions
-Whether or not zooming is on by default depends on the chart you are using. If you are using , it is on by default, but it is not in the . In order to enable or disable navigation in the UI, you need to set either the and/or the properties of the chart, depending on the direction that you wish to enable or disable zooming.
+Whether or not zooming is on by default depends on the chart you are using. If you are using , it is on by default, but it is not in the . In order to enable or disable navigation in the UI, you need to set either the and/or the properties of the chart, depending on the direction that you wish to enable or disable zooming.
-It is also possible to zoom or pan simply by clicking the mouse or using touch. The property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This property can also be set to either `DragPan` to allow panning or `None` to prevent these operations.
+It is also possible to zoom or pan simply by clicking the mouse or using touch. The property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This property can also be set to either `DragPan` to allow panning or `None` to prevent these operations.
## Chart Navigation with Touch, Mouse and Keyboard
@@ -39,9 +39,9 @@ Navigation in the {Platform} data chart can happen with either touch, the mouse
- **Zoom In**: Using the PAGE UP key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
- **Zoom Out**: Using the PAGE DOWN key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
- **Fit to Chart Plot Area**: Using the HOME key on the keyboard. There is no mouse or touch operation for this.
-- **Area Zoom**: Click and drag the mouse within the plot area with the property set to its default - `DragZoom`.
+- **Area Zoom**: Click and drag the mouse within the plot area with the property set to its default - `DragZoom`.
-The zoom and pan operations can also be enabled by using modifier keys by setting the and properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:
+The zoom and pan operations can also be enabled by using modifier keys by setting the and properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:
| Modifier Value | Corresponding Key |
| ---------------|------------------ |
@@ -53,7 +53,7 @@ The zoom and pan operations can also be enabled by using modifier keys by settin
## Chart Navigation with Scrollbars
-The chart can be scrolled by enabling the and properties.
+The chart can be scrolled by enabling the and properties.
These can be configured to the following options
@@ -71,16 +71,16 @@ The following example demonstrates enabling scrollbars.
## Chart Navigation through Code
-Code navigation of the chart can only be used for the control.
+Code navigation of the chart can only be used for the control.
The {Platform} data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:
-- : A numeric value describing the X portion of the content view rectangle displayed by the data chart.
-- : A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
-- : A `Rect` object representing a rectangle that represents the portion of the chart that is currently in view. For example, a of "0, 0, 1, 1" would be the entirety of the data chart.
-- : A numeric value describing the width portion of the content view rectangle displayed by the data chart.
-- : A numeric value describing the height portion of the content view rectangle displayed by the data chart.
+- : A numeric value describing the X portion of the content view rectangle displayed by the data chart.
+- : A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
+- : A object representing a rectangle that represents the portion of the chart that is currently in view. For example, a of "0, 0, 1, 1" would be the entirety of the data chart.
+- : A numeric value describing the width portion of the content view rectangle displayed by the data chart.
+- : A numeric value describing the height portion of the content view rectangle displayed by the data chart.
## Additional Resources
@@ -91,6 +91,6 @@ You can find more information about related chart features in these topics:
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
index ef52c64050..cdbd1dbce9 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
@@ -14,7 +14,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
# {Platform} Chart Overlays
-The {Platform} allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the . This can help you to visualize data such as the mean or median of a particular series.
+The {Platform} allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the . This can help you to visualize data such as the mean or median of a particular series.
## {Platform} Value Overlay Example
@@ -27,35 +27,35 @@ The following example depicts a [Column Chart](../types/column-chart.md) with a
## {Platform} Value Overlay Properties
-Unlike other series types that use a for data binding, the value overlay uses a property to bind a single numeric value. In addition, the value overlay requires you to define a single to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.
+Unlike other series types that use a for data binding, the value overlay uses a property to bind a single numeric value. In addition, the value overlay requires you to define a single to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.
-When using a numeric X or Y axis, the property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the should reflect the index of the category at which you want the value overlay to appear.
+When using a numeric X or Y axis, the property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the should reflect the index of the category at which you want the value overlay to appear.
When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle.
- appearance properties are inherited from and so and for example are available and work the same way they do with other types of series.
+ appearance properties are inherited from and so and for example are available and work the same way they do with other types of series.
-It is also possible to show an axis annotation on a to show the value of the overlay on the owning axis. In order to show this, you can set the property to true.
+It is also possible to show an axis annotation on a to show the value of the overlay on the owning axis. In order to show this, you can set the property to true.
## {Platform} Value Layer
The {Platform} charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values.
-Applying the in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart.
+Applying the in the and components is done by setting the property on the chart. This property takes a collection of the enumeration. You can mix and match multiple value layers in the same chart by adding multiple enumerations to the collection of the chart.
-In the , this is done by adding a to the collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below:
+In the , this is done by adding a to the collection of the chart and then setting the property to one of the enumerations. Each of these enumerations and what they mean is listed below:
-- : The default value mode of the enumeration.
-- : Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
-- : Applies a single value line to call out the average of all of the series values in the chart.
-- : Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
-- : Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
-- : Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
-- : Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.
+- : The default value mode of the enumeration.
+- : Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
+- : Applies a single value line to call out the average of all of the series values in the chart.
+- : Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
+- : Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
+- : Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
+- : Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.
-If you want to prevent any particular series from being taken into account when using the element, you can set the property on the layer. This will force the layer to target the series that you define. You can have as many elements within a single as you want.
+If you want to prevent any particular series from being taken into account when using the element, you can set the property on the layer. This will force the layer to target the series that you define. You can have as many elements within a single as you want.
-The following sample demonstrates usage of the different in the :
+The following sample demonstrates usage of the different in the :
@@ -67,9 +67,9 @@ You can also plot built-in financial overlays and indicators in {Platform} [Stoc
## Chart Overlay Text
-The {Platform} , , and all Data Annotation Layers can render custom overlay text inside plot area of the DataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.
+The {Platform} , , and all Data Annotation Layers can render custom overlay text inside plot area of the DataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.
-For example, you can use , , and to show overlay text.
+For example, you can use , , and to show overlay text.
@@ -77,7 +77,7 @@ For example, you can use , , and .
+the , , and .
@@ -139,9 +139,9 @@ You can find more information about related chart types in these topics:
## API References
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
index e1b9b2c9a1..1654cc6b8a 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
@@ -22,7 +22,7 @@ The following examples demonstrates two high performance scenarios of {Platform}
## {Platform} Chart with High-Frequency
-In High-Frequency scenario, the {Platform} Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the in High-Frequency scenario.
+In High-Frequency scenario, the {Platform} Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the in High-Frequency scenario.
@@ -31,7 +31,7 @@ In High-Frequency scenario, the {Platform} Charts can render data items that are
## {Platform} Chart with High-Volume
-In High-Volume scenario, the {Platform} Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the in High-Volume scenario.
+In High-Volume scenario, the {Platform} Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the in High-Volume scenario.
@@ -43,7 +43,7 @@ This section lists guidelines and chart features that add to the overhead and pr
### Data Size
-If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using {Platform} with one of the following type of series which where designed for specially for that purpose.
+If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using {Platform} with one of the following type of series which where designed for specially for that purpose.
- [Scatter HD Chart](../types/scatter-chart.md#{PlatformLower}-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#{PlatformLower}-scatter-marker-chart)
- [Scatter Polyline Chart](../types/shape-chart.md#{PlatformLower}-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#{PlatformLower}-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#{PlatformLower}-scatter-line-chart)
@@ -51,7 +51,7 @@ If you need to plot data sources with large number of data points (e.g. 10,000+)
### Data Structure
-Although {Platform} charts support rendering of multiple data sources by binding array of arrays of data points to property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:
+Although {Platform} charts support rendering of multiple data sources by binding array of arrays of data points to property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:
@@ -135,7 +135,7 @@ export class MultiDataSources {
### Data Filtering
-{Platform} and the controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use and to filter only those data columns that you actually want to render. For example,
+{Platform} and the controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use and to filter only those data columns that you actually want to render. For example,
@@ -159,7 +159,7 @@ this.Chart.excludedProperties = [ "CHN", "FRN", "GER" ];
### Chart Types
-Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use `CategoryChart.ChartType` property of {Platform} or the control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in {Platform} control.
+Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use property of {Platform} or the control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in {Platform} control.
The following table lists chart types in order from the fastest performance to slower performance in each group of charts:
@@ -230,7 +230,7 @@ this.LineSeries.markerType = MarkerType.None;
### Chart Resolution
-Setting the property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.
+Setting the property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.
This code snippet shows how to decrease resolution in the {Platform} charts.
@@ -272,10 +272,10 @@ Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performa
Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does.
-The already uses ordinal/category axis so there is no need to change its properties.
+The already uses ordinal/category axis so there is no need to change its properties.
-This code snippet shows how to ordinal/category x-axis in the and controls.
+This code snippet shows how to ordinal/category x-axis in the and controls.
@@ -327,7 +327,7 @@ This code snippet shows how to ordinal/category x-axis in the based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
+By default, {Platform} charts will automatically calculate based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
We do not recommend setting axis minor interval as it will decrease chart performance.
@@ -397,7 +397,7 @@ This code snippet shows how to set axis major interval in the {Platform} charts.
### Axis Scale
-Setting the property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
+Setting the property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
### Axis Labels Visibility
@@ -477,7 +477,7 @@ This code snippet shows how to hide axis labels in the {Platform} charts.
### Axis Labels Abbreviation
-Although, the {Platform} charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting to a string that represents factor used used to abbreviate your data values.
+Although, the {Platform} charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting to a string that represents factor used used to abbreviate your data values.
This code snippet shows how to set axis title in the {Platform} charts.
@@ -607,78 +607,78 @@ The following code snippet shows how to set a fixed extent for labels on y-axis
Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the {Platform} charts.
-For example, changing these properties on the or control:
+For example, changing these properties on the or control:
| Axis Visual | X-Axis Properties | Y-Axis Properties |
| ---------------------|-------------------|------------------- |
-| All Axis Visual | | |
-| Axis Tickmarks | | |
-| Axis Major Gridlines | | |
-| Axis Minor Gridlines | | |
-| Axis Main Line | | |
-| Axis Titles | | |
-| Axis Strips | | |
+| All Axis Visual | | |
+| Axis Tickmarks | | |
+| Axis Major Gridlines | | |
+| Axis Minor Gridlines | | |
+| Axis Main Line | | |
+| Axis Titles | | |
+| Axis Strips | | |
-Or changing properties of an in the control:
+Or changing properties of an in the control:
| Axis Visual | Axis Properties |
| ---------------------|------------------- |
| All Axis Visuals | `Interval`, `MinorInterval` |
-| Axis Tickmarks | , , |
-| Axis Major Gridlines | , |
-| Axis Minor Gridlines | , |
-| Axis Main Line | , |
-| Axis Titles | , `TitleAngle` |
-| Axis Strips | |
+| Axis Tickmarks | , , |
+| Axis Major Gridlines | , |
+| Axis Minor Gridlines | , |
+| Axis Main Line | , |
+| Axis Titles | , `TitleAngle` |
+| Axis Strips | |
## Performance in Financial Chart
-In addition to above performance guidelines, the {Platform} control has the following unique features that affect performance.
+In addition to above performance guidelines, the {Platform} control has the following unique features that affect performance.
### Y-Axis Mode
-Setting the option to `Numeric` is recommended for higher performance, as fewer operations are needed than using mode.
+Setting the option to `Numeric` is recommended for higher performance, as fewer operations are needed than using mode.
### Chart Panes
-Setting a lot of panes using and options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.
+Setting a lot of panes using and options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.
### Zoom Slider
-Setting the option to will improve chart performance and enable more vertical space for other indicators and the volume pane.
+Setting the option to will improve chart performance and enable more vertical space for other indicators and the volume pane.
### Volume Type
-Setting the property can have the following impact on chart performance:
+Setting the property can have the following impact on chart performance:
-- - is the least expensive since it does not display the volume pane.
-- - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
-- - is more expensive to render than the volume type.
-- - is more expensive to render than the volume type and it is recommended when rendering volume data of 1-3 stocks.
+- - is the least expensive since it does not display the volume pane.
+- - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
+- - is more expensive to render than the volume type.
+- - is more expensive to render than the volume type and it is recommended when rendering volume data of 1-3 stocks.
## Performance in Data Chart
-In addition to the general performance guidelines, the {Platform} control has the following unique features that affect performance.
+In addition to the general performance guidelines, the {Platform} control has the following unique features that affect performance.
### Axes Collection
-Adding too many axis to the collection of the control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series.
+Adding too many axis to the collection of the control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series.
### Series Collection
-Also, adding a lot of series to the collection of the {Platform} control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series:
+Also, adding a lot of series to the collection of the {Platform} control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series:
| Slower Performance Scenario | Faster Scenario with Conditional Styling |
| ----------------------------|---------------------------------------- |
-| 10+ of | Single |
-| 20+ of | Single |
-| 10+ of | Single |
-| 10+ of | Single |
-| 20+ of | Single |
-| 20+ of | Single |
-| 10+ of | Single |
-| 10+ of | Single |
+| 10+ of | Single |
+| 20+ of | Single |
+| 10+ of | Single |
+| 10+ of | Single |
+| 20+ of | Single |
+| 20+ of | Single |
+| 10+ of | Single |
+| 10+ of | Single |
## Additional Resources
@@ -709,6 +709,6 @@ You can find more information about related chart types in these topics:
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-synchronization.mdx b/docs/xplat/src/content/en/components/charts/features/chart-synchronization.mdx
index 99e362bf9a..cb2a929afe 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-synchronization.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-synchronization.mdx
@@ -25,10 +25,10 @@ This sample shows synchronization of two {Platform} data charts:
There are four options of chart synchronization, in that you can synchronize horizontally only, vertically only, both, or you can choose not to synchronize at all, which is the default.
-If you want to synchronize a set of charts, you can assign them the same name to the property and then specify whether or not to synchronize the charts horizontally and/or vertically by setting the and properties to the corresponding boolean value.
+If you want to synchronize a set of charts, you can assign them the same name to the property and then specify whether or not to synchronize the charts horizontally and/or vertically by setting the and properties to the corresponding boolean value.
-Note that in order to synchronize either vertically and/or horizontally, you will need to set the and/or property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting.
+Note that in order to synchronize either vertically and/or horizontally, you will need to set the and/or property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting.
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx b/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
index d1b7f49490..383186ede6 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
@@ -27,21 +27,21 @@ When adding a title or subtitle to the chart control, the content of the chart a
| Property Name | Property Type | Description |
| ----------------------|------------------|------------|
-| `ChartTitle` | string | Title's text content. |
-| | string | Title's text. color |
-| | HorizontalAlignment | Title's horizontal alignment. |
-| | string | Title's font style, e.g. Italic Bold 8pt Times New Roman |
-| | number | Title's top margin. |
-| | number | Title's left margin. |
-| | number | Title's right margin. |
-| | number | Title's bottom margin. |
-| | string | Title's text content. |
-| | string | Title's text. color |
-| | HorizontalAlignment | Title's horizontal alignment. |
-| | string | Title's font style, e.g. Italic Bold 8pt Times New Roman |
-| | number | Title's top margin. |
-| | number | Title's left margin. |
-| | number | Title's right margin. |
-| | number | Title's bottom margin. |
+| | string | Title's text content. |
+| | string | Title's text. color |
+| | HorizontalAlignment | Title's horizontal alignment. |
+| | string | Title's font style, e.g. Italic Bold 8pt Times New Roman |
+| | number | Title's top margin. |
+| | number | Title's left margin. |
+| | number | Title's right margin. |
+| | number | Title's bottom margin. |
+| | string | Title's text content. |
+| | string | Title's text. color |
+| | HorizontalAlignment | Title's horizontal alignment. |
+| | string | Title's font style, e.g. Italic Bold 8pt Times New Roman |
+| | number | Title's top margin. |
+| | number | Title's left margin. |
+| | number | Title's right margin. |
+| | number | Title's bottom margin. |
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
index 8d036d4c77..89b3cb6a0e 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
@@ -12,25 +12,25 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Chart Tooltips
-In {Platform} charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the , , and controls.
+In {Platform} charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the , , and controls.
## {Platform} Chart Tooltip Types
-{Platform} Chart provide three types of tooltips that you can with tooltips enabled by setting the property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips.
+{Platform} Chart provide three types of tooltips that you can with tooltips enabled by setting the property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips.
-The property is configurable and can be set to one of the following options:
+The property is configurable and can be set to one of the following options:
| Property Value | Description |
| -------------------|----------------|
-| Tooltip | Display a tooltip for a single item when the pointer is positioned over it. |
-| Tooltip | Display the data tooltips for all series in the chart. |
-| Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. |
-| Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. |
+| Tooltip | Display a tooltip for a single item when the pointer is positioned over it. |
+| Tooltip | Display the data tooltips for all series in the chart. |
+| Tooltip | Display a tooltip for each data item in the category that the pointer is positioned over. |
+| Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over. |
## {Platform} Chart Tooltip Template
@@ -39,7 +39,7 @@ If none of built-in types of tooltips are matching your requirements, you can cr
## Custom Tooltips in Category Chart
-This example shows how to create custom tooltips for all series in {Platform} control. Note that you can also apply the same logic to custom tooltips in {Platform} control.
+This example shows how to create custom tooltips for all series in {Platform} control. Note that you can also apply the same logic to custom tooltips in {Platform} control.
@@ -63,7 +63,7 @@ You can find more information about related chart features in these topics:
## API References
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
index c363cc1c1b..3e6498677b 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
@@ -12,15 +12,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Chart Trendlines
-In {ProductName} charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the , , and (except for stacked series, shape series, and range series).
+In {ProductName} charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the , , and (except for stacked series, shape series, and range series).
-Trendlines are off by default, but you can enable them by setting the property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness.
+Trendlines are off by default, but you can enable them by setting the property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness.
-The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the property to an array of numbers. The numeric array describes the length of the dashes of the trendline.
+The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the property to an array of numbers. The numeric array describes the length of the dashes of the trendline.
## {Platform} Chart Trendlines Example
-The following sample depicts a showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down.
+The following sample depicts a showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down.
@@ -29,7 +29,7 @@ The following sample depicts a sh
## {Platform} Chart Trendlines Dash Array Example
-The following sample depicts a showing a with a **QuarticFit** dashed trendline applied via the property:
+The following sample depicts a showing a with a **QuarticFit** dashed trendline applied via the property:
@@ -38,29 +38,29 @@ The following sample depicts a showing
## {Platform} Chart Trendline Layer
-The is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the is a series type, you can add more than one of them to the collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously.
+The is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the is a series type, you can add more than one of them to the collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously.
## Trendline Layer Usage
-The must be provided with a and a in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series.
+The must be provided with a and a in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series.
-If you would like to show the in the Legend, you can do so by setting the property to `true`.
+If you would like to show the in the Legend, you can do so by setting the property to `true`.
## Styling the Trendline Layer
-By default, the renders with the same color as its in a dashed line. This can be configured by using the various styling properties on the .
+By default, the renders with the same color as its in a dashed line. This can be configured by using the various styling properties on the .
-To change the color of the trendline that is drawn, you can set its property. Alternatively, you can also set the property to `true`, which will pull from the chart's palette based on the index in which the is placed in the chart's collection.
+To change the color of the trendline that is drawn, you can set its property. Alternatively, you can also set the property to `true`, which will pull from the chart's palette based on the index in which the is placed in the chart's collection.
-You can also modify the way that the appears by using its and properties. The takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift".
+You can also modify the way that the appears by using its and properties. The takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift".
-The following are the options for the property:
+The following are the options for the property:
- `Auto`: This will default to the DashPattern enumeration.
-- `BrightnessShift`: The trendline will take the brush and modify its brightness based on the provided .
-- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the property on the .
-- `OpacityShift`: The trendline will take the brush and modify its opacity based on the provided .
-- `SaturationShift`: The trendline will take the brush and modify its saturation based on the provided .
+- `BrightnessShift`: The trendline will take the brush and modify its brightness based on the provided .
+- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the property on the .
+- `OpacityShift`: The trendline will take the brush and modify its opacity based on the provided .
+- `SaturationShift`: The trendline will take the brush and modify its saturation based on the provided .
## Additional Resources
@@ -71,7 +71,7 @@ You can find more information about related chart features in these topics:
## API References
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
index 18abbe9bd4..3785ceecc3 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
@@ -17,9 +17,9 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
# {Platform} Chart User Annotation Layer
-In {ProductName}, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
+In {ProductName}, you can annotate the with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically.
+This is directly integrated with the available tools of the . The following topic explains, with examples, how you can utilize the to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically.
@@ -30,9 +30,9 @@ This feature is designed to support X and Y axes and does not currently support
## Using the User Annotations with the Toolbar
-The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`.
+The exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the property on the corresponding chart to `true`.
-The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the . This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart.
+The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the . This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart.
@@ -40,34 +40,34 @@ You can delete the annotations that you have previously added by selecting the "
-When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added.
+When adding one of these user annotations via the , the will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added.
-The table below details the different configurable properties on :
+The table below details the different configurable properties on :
| Property | Type | Description |
|------------|---------|-------------|
-| |`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.|
-| |`string`|This read-only property returns the unique string ID of the user annotation.|
-| |`string`|This property gets or sets the color to use for the badge in the user annotation.|
-| |`string`|This property gets or sets a path to an image to use for the badge in the user annotation.|
-| |`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.|
-| |`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.|
-| |`string`|This property gets or sets the label to be shown in the user annotation.|
-| |`string`|This property gets or sets the color to be used to fill the background of the user annotation.|
+| |`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.|
+| |`string`|This read-only property returns the unique string ID of the user annotation.|
+| |`string`|This property gets or sets the color to use for the badge in the user annotation.|
+| |`string`|This property gets or sets a path to an image to use for the badge in the user annotation.|
+| |`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.|
+| |`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.|
+| |`string`|This property gets or sets the label to be shown in the user annotation.|
+| |`string`|This property gets or sets the color to be used to fill the background of the user annotation.|
-After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
+After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
## Using the User Annotations Programmatically
-When using the programmatically, you can invoke two different methods on the to put the chart into a mode where you can add or remove a user annotation. These methods are named and , respectively.
+When using the programmatically, you can invoke two different methods on the to put the chart into a mode where you can add or remove a user annotation. These methods are named and , respectively.
-After invoking , you can add a slice annotation by clicking on a label on the X or Y axis, add a strip annotation by clicking and dragging in the plot area and releasing the mouse button, or add a point annotation by clicking on a data point on a series plotted in the chart.
+After invoking , you can add a slice annotation by clicking on a label on the X or Y axis, add a strip annotation by clicking and dragging in the plot area and releasing the mouse button, or add a point annotation by clicking on a data point on a series plotted in the chart.
-Adding one of these user annotations will raise an event named `UserAnnotationInformationRequested`, where you can provide more information for the user annotation. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added.
+Adding one of these user annotations will raise an event named `UserAnnotationInformationRequested`, where you can provide more information for the user annotation. This event's arguments have a property named `AnnotationInfo` that will return a object that allows the configuration of multiple different aspects of the annotation to be added.
-After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
+After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the method on the to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling and passing the of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
-Once the user annotation has been added to the chart, it will appear in the collection as a . The has an collection that can store , and elements depending on the type of annotations added to the plot area.
+Once the user annotation has been added to the chart, it will appear in the collection as a . The has an collection that can store , and elements depending on the type of annotations added to the plot area.
## User Annotation ToolTip
@@ -79,12 +79,12 @@ The tooltip is designed to work in tandem with the `UserAnnotationInformationReq
## API References
-
-
-
-
-
-
+
+
+
+
+
+
## Additional Resources
You can find more information about related chart features in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
index d38b9b8530..426368aa17 100644
--- a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Area Chart renders as a collection of points connected by stra
## {Platform} Area Chart Example
-You can create {Platform} Category Area Chart in the control by binding your data to property and setting property to **Area** enum, as shown in the example below.
+You can create {Platform} Category Area Chart in the control by binding your data to property and setting property to **Area** enum, as shown in the example below.
@@ -58,7 +58,7 @@ There are several common use cases for choosing an Area Chart:
## {Platform} Area Chart with Single Series
-{Platform} Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in control by binding your data and setting property to value, as shown in the example below.
+{Platform} Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in control by binding your data and setting property to value, as shown in the example below.
@@ -69,7 +69,7 @@ There are several common use cases for choosing an Area Chart:
## {Platform} Area Chart with Multiple Series
-Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to property of the control.
+Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to property of the control.
@@ -89,11 +89,11 @@ Area charts often have semi-transparent fill for their areas, thicker lines and
## Advanced Types of Area Charts
-The following sections explain more advanced types of {Platform} Area Charts that can be created using the control instead of control with simplified API.
+The following sections explain more advanced types of {Platform} Area Charts that can be created using the control instead of control with simplified API.
## {Platform} Step Area Chart
-The {Platform} Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in control by binding your data and setting property to value, as shown in the example below.
+The {Platform} Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in control by binding your data and setting property to value, as shown in the example below.
@@ -103,11 +103,11 @@ The {Platform} Step Area Chart belongs to a group of category charts and it is r
-The following sections explain more advanced types of {Platform} Area Charts that can be created using the control instead of control with simplified API.
+The following sections explain more advanced types of {Platform} Area Charts that can be created using the control instead of control with simplified API.
## {Platform} Range Area Chart
-The {Platform} Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -118,7 +118,7 @@ The {Platform} Range Area Chart allows you show the area as a range between two
## {Platform} Stacked Area Chart
-The {Platform} Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -129,7 +129,7 @@ The {Platform} Stacked Area Chars is rendered using a collection of points conne
## {Platform} Stacked 100% Area Chart
-The {Platform} Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -140,7 +140,7 @@ The {Platform} Stacked 100% Area Chart allows you represent your data as part of
## {Platform} Stacked Spline Area Chart
-The {Platform} Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -152,7 +152,7 @@ The {Platform} Stacked Spline Area Chart is rendered using a collection of point
## {Platform} Stacked 100% Spline Area Chart
-The {Platform} Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -163,7 +163,7 @@ The {Platform} Stacked 100% Spline Area Chart is identical to the Stacked Spline
## {Platform} Radial Area Chart
-The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -174,7 +174,7 @@ The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-cha
## {Platform} Polar Area Chart
-The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -185,7 +185,7 @@ The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.
## {Platform} Polar Spline Area Chart
-The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -212,27 +212,27 @@ The following table lists API members mentioned in above sections:
| Chart Type | Control Name | API Members |
| -------------------------|-----------------|-----------------------|
-| Area | | `CategoryChart.ChartType` = |
-| Step Area | | `CategoryChart.ChartType` = |
-| Range Area | | |
-| Radial Area | | |
-| Polar Area | | |
-| Polar Spline Area | | |
-| Stacked Area | | |
-| Stacked Spline Area | | |
-| Stacked 100% Area | | |
-| Stacked 100% Spline Area | | |
+| Area | | = |
+| Step Area | | = |
+| Range Area | | |
+| Radial Area | | |
+| Polar Area | | |
+| Polar Spline Area | | |
+| Stacked Area | | |
+| Stacked Spline Area | | |
+| Stacked 100% Area | | |
+| Stacked 100% Spline Area | | |
## API References
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
index 9eb01a4fa7..1875f8e471 100644
--- a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down)
## {Platform} Bar Chart Example
-You can create {Platform} Bar Chart in the control by binding your data sources to multiple , as shown in the example below:
+You can create {Platform} Bar Chart in the control by binding your data sources to multiple , as shown in the example below:
@@ -62,7 +62,7 @@ These use cases are commonly used for the following scenarios:
## {Platform} Bar Chart with Single Series
-Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -71,7 +71,7 @@ Bar Chart belongs to a group of Category Series and it is rendered using a colle
## {Platform} Bar Chart with Multiple Series
-The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the control by binding your data to multiple , as shown in the example below:
+The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the control by binding your data to multiple , as shown in the example below:
@@ -79,7 +79,7 @@ The Bar Chart is able to render multiple bars per category for comparison purpos
## {Platform} Bar Chart Styling
-The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the control by binding your data to a and adding a , as shown in the example below:
+The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the control by binding your data to a and adding a , as shown in the example below:
@@ -92,7 +92,7 @@ A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is u
The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -103,7 +103,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -122,9 +122,9 @@ You can find more information about related chart types in these topics:
## API References
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
index d06448a51d..058bb888e9 100644
--- a/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
@@ -13,22 +13,22 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart) but with the option to have various radius scale sizes.
## {Platform} Bubble Chart Example
-You can create {ProductName} Bubble Chart in control using the and two numeric axes, as shown in the example below.
+You can create {ProductName} Bubble Chart in control using the and two numeric axes, as shown in the example below.
## {Platform} Bubble Chart with Single Series
-You can bind your data to property of and map data columns using its , , properties, as shown in the example below:
+You can bind your data to property of and map data columns using its , , properties, as shown in the example below:
## {Platform} Bubble Chart with Multiple Series
-In {Platform} Bubble Chart, binding multiple data sources works by setting each new data source to property of a additional , as shown in the example below:
+In {Platform} Bubble Chart, binding multiple data sources works by setting each new data source to property of a additional , as shown in the example below:
## {Platform} Bubble Chart Styling
-In {Platform} Bubble Chart, you can customize shape of bubble markers using property, their size with property, and their appearance using , , properties. In addition, you can also color bubble markers based on a data column using and properties. In this example, usage of above properties is demonstrated.
+In {Platform} Bubble Chart, you can customize shape of bubble markers using property, their size with property, and their appearance using , , properties. In addition, you can also color bubble markers based on a data column using and properties. In this example, usage of above properties is demonstrated.
@@ -38,6 +38,6 @@ In {Platform} Bubble Chart, you can customize shape of bubble markers using
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
index 6941d6555e..75a3bbff86 100644
--- a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Column Char, Column Graph, or Vertical Bar Chart is among the
## {Platform} Column Chart Example
-You can create {Platform} Column Chart in the control by binding your data and setting to **Column** enum, as shown in the example below:
+You can create {Platform} Column Chart in the control by binding your data and setting to **Column** enum, as shown in the example below:
@@ -54,7 +54,7 @@ There are several uses cases for Column Charts. When you:
Column Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the bottom to top of the chart towards the values of data points.
-You can create this type of chart in the control by binding your data and setting the property to **Column** value, as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to **Column** value, as shown in the example below:
@@ -65,7 +65,7 @@ You can create this type of chart in the control by binding your data and setting the property to **Column** value, as shown in the example below:
+The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the control by binding your data and setting the property to **Column** value, as shown in the example below:
@@ -79,7 +79,7 @@ The Column Chart is able to render multiple columns per category for comparison
The {Platform} Column Chart has many options for styling and modification of the visual appearance.
-You can create this type of chart in the control by binding your data, as shown in the example below:
+You can create this type of chart in the control by binding your data, as shown in the example below:
@@ -90,14 +90,14 @@ You can create this type of chart in the control instead of control with simplified API.
+The following sections explain more advanced types of {Platform} Column Charts that can be created using the control instead of control with simplified API.
## {Platform} Waterfall Chart
The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#{PlatformLower}-range-column-chart), but it requires only one numeric data column rather than two columns for each data point.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -110,7 +110,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -123,7 +123,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -138,7 +138,7 @@ The {Platform} Range Column Chart belongs to a group of range charts and is rend
The Range Column Chart is identical to the [Range Area Chart](area-chart.md)(area-chart.md#{PlatformLower}-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -151,7 +151,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -174,19 +174,19 @@ The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
| --------------------|--------------------|------------------------|
-| Column | | `CategoryChart.ChartType` = **Column** |
-| Radial Column | | |
-| Range Column | | |
-| Stacked Column | | |
-| Stacked 100% Column | | |
-| Waterfall | | |
-
-
-
-
-
-
-
-
-
-
+| Column | | = **Column** |
+| Radial Column | | |
+| Range Column | | |
+| Stacked Column | | |
+| Stacked 100% Column | | |
+| Waterfall | | |
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
index 1962fd812c..baef18c4b8 100644
--- a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Composite Chart, also called a Combo Chart, is visualization t
## {Platform} Composite / Combo Example
-The following example demonstrates how to create Composite Chart using and in the control.
+The following example demonstrates how to create Composite Chart using and in the control.
@@ -34,8 +34,8 @@ The following example demonstrates how to create Composite Chart using
-
-
-
-
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
index 50f3df65a1..fe2f9860fe 100644
--- a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.
## {Platform} Data Pie Chart Example
-You can create the {Platform} Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization.
+You can create the {Platform} Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization.
@@ -53,13 +53,13 @@ Do Not Use Pie Chart When:
## {Platform} Data Pie Chart Legend
Legends are used to show information about each point, to know about its contribution towards the total sum.
-In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its property.
+In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its property.
-The labels shown on the legend will display the same content as the label that is shown for each slice in the by default, but this can be modified by utilizing the property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart.
+The labels shown on the legend will display the same content as the label that is shown for each slice in the by default, but this can be modified by utilizing the property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart.
-You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the property on the chart, and you can set this to be a circle, line, bar, column, and more.
+You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the property on the chart, and you can set this to be a circle, line, bar, column, and more.
-Below is an example that demonstrates usage of the ItemLegend with the .
+Below is an example that demonstrates usage of the ItemLegend with the .
@@ -68,86 +68,86 @@ Below is an example that demonstrates usage of the ItemLegend with the has three main, configurable properties - , , and that allow you to configure how the Others slice in the chart is shown. These are each described below:
+The Others category in the has three main, configurable properties - , , and that allow you to configure how the Others slice in the chart is shown. These are each described below:
-The property works in tandem with the property of the . For the , you can define whether you want the to be evaluated as a number or a percentage. For example, if you decide on number and set the to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the will become part of the Others category.
+The property works in tandem with the property of the . For the , you can define whether you want the to be evaluated as a number or a percentage. For example, if you decide on number and set the to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the will become part of the Others category.
-To get the underlying data items that are contained within the Others slice in the chart, you can utilize the method on the chart. This return type of this method is an which exposes an property. The property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this .
+To get the underlying data items that are contained within the Others slice in the chart, you can utilize the method on the chart. This return type of this method is an which exposes an property. The property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this .
-By default, the Others slice will be represented by a label of "Others." You can change this by modifying the property of the chart.
+By default, the Others slice will be represented by a label of "Others." You can change this by modifying the property of the chart.
### {Platform} Styling the Others Slice
You can style the aggregated Others slice separately from other slices by using these properties:
--
+-
Sets the fill (brush) used for the Others slice.
--
+-
Sets the outline (stroke) used for the Others slice.
These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior.
-The Others slice is only rendered when the chart is configured to create it (for example, with greater than `0` and an appropriate ). If the Others slice is not present, and have no visible effect.
+The Others slice is only rendered when the chart is configured to create it (for example, with greater than `0` and an appropriate ). If the Others slice is not present, and have no visible effect.
-If you want to ensure that the Others category does not show up in the , you can set the to 0.
+If you want to ensure that the Others category does not show up in the , you can set the to 0.
-The following sample demonstrates usage of the Others slice in the :
+The following sample demonstrates usage of the Others slice in the :
## {Platform} Data Pie Chart Selection
-The supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the and properties of the chart, described below:
+The supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the and properties of the chart, described below:
-The main two options of the are and , which will enable single and multiple selection, respectively.
+The main two options of the are and , which will enable single and multiple selection, respectively.
-The property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do:
+The property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do:
-- : The selected slices will be highlighted.
-- : The selected slices will remain their same color and others will fade.
-- : The selected slices will change their background to the FocusBrush of the chart.
-- : The selected slices will have an outline with the color defined by the FocusBrush of the chart.
-- : The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
-- : The unselected slices will have a gray color filter applied to them.
-- : There is no effect on the selected slices.
-- : The selected slices will change their background to the SelectionBrush of the chart.
-- : The selected slices will have an outline with the color defined by the SelectionBrush of the chart.
-- : The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
-- : The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart.
+- : The selected slices will be highlighted.
+- : The selected slices will remain their same color and others will fade.
+- : The selected slices will change their background to the FocusBrush of the chart.
+- : The selected slices will have an outline with the color defined by the FocusBrush of the chart.
+- : The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
+- : The unselected slices will have a gray color filter applied to them.
+- : There is no effect on the selected slices.
+- : The selected slices will change their background to the SelectionBrush of the chart.
+- : The selected slices will have an outline with the color defined by the SelectionBrush of the chart.
+- : The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
+- : The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart.
When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the DataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed.
-The following sample demonstrates the selection feature of the control:
+The following sample demonstrates the selection feature of the control:
## {Platform} Data Pie Chart Highlighting
-The supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source.
+The supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source.
-First, the enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do:
+First, the enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do:
-- : The slices are only highlighted when the mouse is directly over them.
-- : The nearest slice to the mouse position will be highlighted.
-- : The nearest slice and series to the mouse position will be highlighted.
-- : The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized.
+- : The slices are only highlighted when the mouse is directly over them.
+- : The nearest slice to the mouse position will be highlighted.
+- : The nearest slice and series to the mouse position will be highlighted.
+- : The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized.
-The enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do:
+The enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do:
-- : The series will have its color brightened when the mouse position is over or near it.
-- : The series will retain its color when the mouse position is over or near it, while the others will appear faded.
-- : The series and slices will not be highlighted.
+- : The series will have its color brightened when the mouse position is over or near it.
+- : The series will retain its color when the mouse position is over or near it, while the others will appear faded.
+- : The series and slices will not be highlighted.
-The following example demonstrates the mouse highlighting behaviors of the component:
+The following example demonstrates the mouse highlighting behaviors of the component:
-In addition to the mouse highlighting, the exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a for the control and by setting the property to `Overlay`. The expects a subset of the data assigned to the property of the .
+In addition to the mouse highlighting, the exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a for the control and by setting the property to `Overlay`. The expects a subset of the data assigned to the property of the .
When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.
@@ -158,13 +158,13 @@ The following example demonstrates highlight filtering.
## {Platform} Data Pie Chart Animation
-The supports animating its slices into view, as well as when a value changes.
+The supports animating its slices into view, as well as when a value changes.
-You can set the property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the enumerated property to the type of animation you would like to see. Additionally, you can also set the property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the property, which takes a `TimeSpan`.
+You can set the property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the enumerated property to the type of animation you would like to see. Additionally, you can also set the property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the property, which takes a `TimeSpan`.
-If you would like to animate data changes, this can also be done by setting the property to **true**. The duration of this change can be configured by setting the property as well.
+If you would like to animate data changes, this can also be done by setting the property to **true**. The duration of this change can be configured by setting the property as well.
-The following sample demonstrates the usage of animation in the :
+The following sample demonstrates the usage of animation in the :
@@ -175,4 +175,4 @@ The following sample demonstrates the usage of animation in the
+
diff --git a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
index 18e9f58b36..39cf89664c 100644
--- a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Donut Chart is similar to the [Pie Chart](pie-chart.md), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.
## {Platform} Donut Chart Example
-You can create Donut Chart using the control by binding your data as shown in the example below.
+You can create Donut Chart using the control by binding your data as shown in the example below.
@@ -53,7 +53,7 @@ The {Platform} Donut Chart includes interactive features that give the viewer to
- You have negative data, as this can not be represented in a donut chart.
## {Platform} Donut Chart - Slice Selection
-The {Platform} Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.
+The {Platform} Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.
@@ -72,4 +72,4 @@ You can find more information about related chart types in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
index 6a5e00235e..b44b56ee27 100644
--- a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
@@ -16,7 +16,7 @@ The {ProductName} Gantt Chart is a type of bar chart, that visualizes various ca
## {Platform} Gantt Chart Example
-The following example demonstrates how to create Gantt Chart using in the control.
+The following example demonstrates how to create Gantt Chart using in the control.
@@ -36,8 +36,8 @@ The following example demonstrates how to create Gantt Chart using
-
-
-
-
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
index a727fd2b5d..5f57828345 100644
--- a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Line Chart or Line Graph is a type of category charts that sho
## {Platform} Line Chart Example
-You can create the {Platform} Line Chart in the control by binding your data to property and setting property to enum, as shown in the example below.
+You can create the {Platform} Line Chart in the control by binding your data to property and setting property to enum, as shown in the example below.
@@ -73,7 +73,7 @@ There are several common use cases for choosing a Line Chart:
The {Platform} Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period, as we have shown in the example below.
-You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -86,7 +86,7 @@ You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -101,7 +101,7 @@ The {Platform} Line chart is capable of handling high volumes of data, ranging i
In this example, we are streaming live data into the {Platform} Line Chart at an interval of your choosing. You can set the data points from 5,000 to 1 million and update the chart to optimize the scale based on the device you are rendering the chart on.
-You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -114,14 +114,14 @@ You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
-You can also create a dashed line within the by using the and setting the property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line.
+You can also create a dashed line within the by using the and setting the property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line.
-The following example demonstrates usage of the in a in :
+The following example demonstrates usage of the in a in :
@@ -131,11 +131,11 @@ The following example demonstrates usage of the control instead of control with simplified API.
+The following sections explain more advanced types of {Platform} Line Charts that can be created using the control instead of control with simplified API.
## {Platform} Stacked Line Chart
-The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -148,7 +148,7 @@ The Stacked Line Chart is often used to show the change of value over time such
The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -161,7 +161,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -174,7 +174,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -200,16 +200,16 @@ The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
| ------------------|--------------------|----------------------- |
-| Line | | `CategoryChart.ChartType` = |
-| Polar Line | | |
-| Radial Line | | |
-| Stacked Line | | |
-| Stacked 100% Line | | |
-
-
-
-
-
-
-
-
+| Line | | = |
+| Polar Line | | |
+| Radial Line | | |
+| Stacked Line | | |
+| Stacked 100% Line | | |
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/network-chart.mdx b/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
index 39c7dc34e8..d1eabd0cfe 100644
--- a/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
@@ -15,12 +15,12 @@ The {ProductName} Network Chart, also called Network Graph or Polyline Chart, vi
The following sections provide examples of various types of Network Charts.
## {Platform} Network Polar Chart
-This example demonstrates how to create Network Polar Chart using (for rendering node markers) and (for rendering node connections) in the control.
+This example demonstrates how to create Network Polar Chart using (for rendering node markers) and (for rendering node connections) in the control.
## {Platform} Network Scatter Chart
-This example shows how to create Network Scatter Chart using (for rendering node markers) and (for rendering node connections) in the control.
+This example shows how to create Network Scatter Chart using (for rendering node markers) and (for rendering node connections) in the control.
@@ -32,13 +32,13 @@ This example shows how to create Network Scatter Chart using
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
index d89eb38083..79e0589a30 100644
--- a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.
## {Platform} Pie Chart Example
-You can create the {Platform} Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department.
+You can create the {Platform} Pie Chart in the by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department.
@@ -60,9 +60,9 @@ Do Not Use Pie Chart When:
## {Platform} Pie Chart Legend
Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click.
-In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The can then be used to specify which property on your data model it will use to display inside the legend for each pie slice.
+In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the property. The can then be used to specify which property on your data model it will use to display inside the legend for each pie slice.
-Additionally you can use the and properties and the various font properties on ItemLegend to further customize the look of the legend items.
+Additionally you can use the and properties and the various font properties on ItemLegend to further customize the look of the legend items.
@@ -72,9 +72,9 @@ Additionally you can use the is set to 2, and is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category.
+In the sample below, the is set to 2, and is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category.
-If you set to Percent, then will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever is most appropriate for your application.
+If you set to Percent, then will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever is most appropriate for your application.
@@ -90,9 +90,9 @@ The pie chart supports explosion of individual pie slices as well as a `SliceCli
## {Platform} Pie Chart Selection
-The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the property. The selected slices are then highlighted.
+The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the property. The selected slices are then highlighted.
-There is a property called which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`.
+There is a property called which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`.
The pie chart supports three different selection modes.
@@ -108,7 +108,7 @@ The pie chart has 4 events associated with selection:
The events that end in "Changing" are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it.
-For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice.
+For scenarios where you click on the Others slice, the pie chart will return an object called . This object contains a list of the data items contained within the Others slice.
@@ -142,4 +142,4 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g
- [Radial Chart](radial-chart.md)
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/types/point-chart.mdx b/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
index 77669c297c..acdc4d19cf 100644
--- a/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Point Chart renders a collection of points. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). These charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values.
## {Platform} Point Chart Example
-You can create the {Platform} Point Chart in the control by binding your data to property and setting property to **Point** enum, as shown in the example below.
+You can create the {Platform} Point Chart in the control by binding your data to property and setting property to **Point** enum, as shown in the example below.
@@ -34,7 +34,7 @@ Once the {Platform} Point Chart is set up, we may want to make some further styl
## Advanced Types of Point Charts
-You can create more advanced types of {Platform} Point Charts using the control instead of control by following these topics:
+You can create more advanced types of {Platform} Point Charts using the control instead of control by following these topics:
- [Scatter Bubble Chart](bubble-chart.md)
- [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart)
@@ -50,5 +50,5 @@ You can find more information about related chart features in these topics:
## API References
-
-
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
index 2d215137fd..77c0d70220 100644
--- a/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
@@ -13,12 +13,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
The {ProductName} Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.md) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.
## {Platform} Polar Area Chart
-The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#{PlatformLower}-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#{PlatformLower}-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
## {Platform} Polar Spline Area Chart
-The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#{PlatformLower}-polar-area-chart) does. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#{PlatformLower}-polar-area-chart) does. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -26,17 +26,17 @@ The Polar Spline Area Chart renders also as a collection of polygons but they ha
## {Platform} Polar Marker Chart
-The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
## {Platform} Polar Line Chart
-The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#{PlatformLower}-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#{PlatformLower}-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
## {Platform} Polar Spline Chart
-The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#{PlatformLower}-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#{PlatformLower}-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -44,7 +44,7 @@ The Polar Spline Chart renders using a collection of curved splines connecting d
## {Platform} Polar Chart Styling
-Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -64,11 +64,11 @@ You can find more information about related chart types in these topics:
## API References
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
index 822b6a52a8..f09c319989 100644
--- a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Pyramid Chart, also called an age pyramid or population pyrami
## {Platform} Pyramid Chart Example
-The following example demonstrates how to create Pyramid Chart using in the control.
+The following example demonstrates how to create Pyramid Chart using in the control.
@@ -34,7 +34,7 @@ The following example demonstrates how to create Pyramid Chart using
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
index e3c2ec00ee..38acc54b41 100644
--- a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Radial Chart takes data and render it as collection of data po
## {Platform} Radial Area Chart
-The {Platform} Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below.
+The {Platform} Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in control by binding your data to , as shown in the example below.
@@ -26,7 +26,7 @@ The {Platform} Radial Area Chart has a shape of a filled polygon that is bound b
## {Platform} Radial Column Chart
-The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.md), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.md), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -37,7 +37,7 @@ The Radial Column Chart is visualized by using a collection of rectangles that e
## {Platform} Radial Line Chart
-The {Platform} Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the control by binding your data to , as shown in the example below:
+The {Platform} Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the control by binding your data to , as shown in the example below:
@@ -48,7 +48,7 @@ The {Platform} Radial Line Chart has renders as a collection of straight lines c
## {Platform} Radial Pie Chart
-The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -59,7 +59,7 @@ The Radial Pie Chart uses pie slices that extend from the center of chart toward
## {Platform} Radial Chart Styling
-Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in control.
+Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in control.
@@ -68,7 +68,7 @@ Once our radial chart is created, we may want to make some further styling custo
## {Platform} Radial Chart Settings
-In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the property for the .
+In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the property for the .
@@ -86,10 +86,10 @@ You can find more information about related chart types in these topics:
## API References
-
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
index bb12a133c7..f9343edcd9 100644
--- a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
## {Platform} Scatter Marker Chart
-{Platform} Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+{Platform} Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -26,7 +26,7 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
## {Platform} Scatter Line Chart
-{Platform} Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+{Platform} Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -37,7 +37,7 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
## {Platform} Scatter Spline Chart
-{Platform} Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+{Platform} Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -48,7 +48,7 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
## {Platform} Scatter High Density Chart
-Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -59,7 +59,7 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
## {Platform} Scatter Area Chart
-{Platform} Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+{Platform} Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -70,7 +70,7 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
## {Platform} Scatter Contour Chart
-{Platform} Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+{Platform} Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -94,9 +94,9 @@ The following table lists API members mentioned in the above sections:
|Chart Type | Control Name | API Members |
|----------------------------|----------------|------------------------ |
- |Scatter Marker | | |
- |Scatter Line | | |
- |Scatter Spline | | |
- |High Density Scatter | | |
- |Scatter Area | | |
- |Scatter Contour | | |
+ |Scatter Marker | | |
+ |Scatter Line | | |
+ |Scatter Spline | | |
+ |High Density Scatter | | |
+ |Scatter Area | | |
+ |Scatter Contour | | |
diff --git a/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx b/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
index c09a0f2857..f8ab99f746 100644
--- a/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
@@ -15,17 +15,17 @@ The {ProductName} Shape Charts are a group of charts that take array of shapes (
## {Platform} Scatter Polygon Chart
-The {Platform} Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using in the control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings.
+The {Platform} Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using in the control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
## {Platform} Scatter Polyline Chart
-The {Platform} Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using in the control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements.
+The {Platform} Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using in the control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -38,8 +38,8 @@ You can find more information about related chart types in these topics:
- [Scatter Chart](scatter-chart.md)
## API References
-
-
-
-
-
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
index c739b0a42c..3a3c973c92 100644
--- a/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
@@ -11,11 +11,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Sparkline
-The {ProductName} Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips.
+The {ProductName} Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips.
## {Platform} Sparkline Example
-The following example shows all the different types of available. The type is defined by setting the property. If the property is not specified, then by default, the type is displayed.
+The following example shows all the different types of available. The type is defined by setting the property. If the property is not specified, then by default, the type is displayed.
@@ -47,18 +47,18 @@ The {Platform} Sparkline has the ability to mark the data points with elliptical
- The text in the data source fields can be used to display the first and last label on the X-Axis.
## Sparkline Types
-The {Platform} Sparkline supports the following types of sparklines by setting the property accordingly:
+The {Platform} Sparkline supports the following types of sparklines by setting the property accordingly:
-- : Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline.
-- : Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline.
-- : Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible.
-- : This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the {Platform} Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values.
+- : Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline.
+- : Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline.
+- : Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible.
+- : This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the {Platform} Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values.
## Markers
-The {Platform} Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of , , and . The type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property.
+The {Platform} Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of , , and . The type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property.
Markers in the sparkline can be placed in any combination of the following locations:
@@ -69,7 +69,7 @@ Markers in the sparkline can be placed in any combination of the following locat
- `Last`: Display a marker on the last data point in the sparkline.
- `Negative`: Display markers on the negative data points plotted in the sparkline.
-All of the markers mentioned above can be customized using the related marker type's property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties , , and .
+All of the markers mentioned above can be customized using the related marker type's property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties , , and .
@@ -77,23 +77,23 @@ All of the markers mentioned above can be customized using the related marker ty
The normal range feature of the {Platform} Sparkline is a horizontal stripe representing some pre-defined meaningful range when the data is being visualized. The normal range can be set as a shaded area outlined with the desired color.
-The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range:
+The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range:
- `NormalRangeVisibility`: Whether the normal range is visible.
- `NormalRangeMaximum`: The bottom border of the range.
- `NormalRangeMinimum`: The top border of the range.
-By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the property.
+By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the property.
-You can also configure whether to show the normal range in front of or behind the plotted series in your {Platform} Sparkline by setting the property.
+You can also configure whether to show the normal range in front of or behind the plotted series in your {Platform} Sparkline by setting the property.
## Trendlines
-The {Platform} Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the property.
+The {Platform} Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the property.
-The trendlines are calculated according to the algorithm specified by the property using the values of the data the the chart is bound to.
+The trendlines are calculated according to the algorithm specified by the property using the values of the data the the chart is bound to.
Trendlines can only be displayed one at a time and by default, the trendline is not displayed.
@@ -105,7 +105,7 @@ The sample below shows all the available trendlines via the dropdown:
The {Platform} Sparkline can detect unknown values and render the space for unknown values through a specified interpolation algorithm. If your data contains null values and you do not use this feature, meaning no interpolation is specified, the unknown value will not be plotted.
-To plot the unknown values, you can set the property of the {Platform} Sparkline. The sample below shows the differences between the values of the property, allowing you to toggle it on or off using a checkbox:
+To plot the unknown values, you can set the property of the {Platform} Sparkline. The sample below shows the differences between the values of the property, allowing you to toggle it on or off using a checkbox:
@@ -125,4 +125,4 @@ You can find more information about related chart types in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
index c2f75b05c6..f3337476c4 100644
--- a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
@@ -14,7 +14,7 @@ The {ProductName} Spline Chart belongs to a group of Category Charts that render
## {Platform} Spline Chart Example
-The following example shows how to create {Platform} Spline Chart in the control by binding your data and setting the property to enum.
+The following example shows how to create {Platform} Spline Chart in the control by binding your data and setting the property to enum.
@@ -27,7 +27,7 @@ The following example shows how to create {Platform} Spline Chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -40,7 +40,7 @@ You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -53,7 +53,7 @@ You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
+You can create this type of chart in the control by binding your data and setting the property to , as shown in the example below:
@@ -64,13 +64,13 @@ You can create this type of chart in the control instead of control with simplified API.
+The following sections explain more advanced types of {Platform} Spline Charts that can be created using the control instead of control with simplified API.
## {Platform} Stacked Spline Chart
The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions, as we have shown in the example below.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -83,7 +83,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -108,11 +108,11 @@ The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
| --------------------|--------------------|-------------------------- |
-| Spline | | `CategoryChart.ChartType` = |
-| Stacked Spline | | |
-| Stacked 100% Spline | | |
-
-
-
-
-
+| Spline | | = |
+| Stacked Spline | | |
+| Stacked 100% Spline | | |
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx b/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
index 42b04fe367..f730c77b25 100644
--- a/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Stacked Chart belongs to a special group of charts that render
## {Platform} Stacked Chart Types
-The following example, you can use the drop-down to switch between all of the different types stacked charts available in the {Platform} control.
+The following example, you can use the drop-down to switch between all of the different types stacked charts available in the {Platform} control.
@@ -25,14 +25,14 @@ The following sections demonstrate individual types of {ProductName} Stacked Cha
Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as [Area Chart](area-chart.md), with the only difference being that visually, the shaded areas are stacked on top of each other.
-You can create this type of chart in the control by binding your data to a , as shown in the example below.
+You can create this type of chart in the control by binding your data to a , as shown in the example below.
## {Platform} Stacked 100 Area Chart
Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea.
-You can create this type of chart in the control by binding your data to a , as shown in the example below.
+You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -42,7 +42,7 @@ A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is u
The Stacked Bar Chart differs from the [Bar Chart](bar-chart.md) in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
-In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the control by binding your data to a , as shown in the example below.
+In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -50,7 +50,7 @@ In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels
The {Platform} Stacked 100% Bar Chart is identical to the {Platform} stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point.
-In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the control by binding your data to a , as shown in the example below.
+In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -58,7 +58,7 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown
The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
-You can create this type of chart in the control by binding your data to a , as shown in the example below.
+You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -66,13 +66,13 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below.
+The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. You can create this type of chart in the control by binding your data to a , as shown in the example below.
## {Platform} Stacked Line Chart
-The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below:
+The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -80,7 +80,7 @@ The Stacked Line Chart is often used to show the change of value over time such
The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-You can create this type of chart in the control by binding your data to a , as shown in the example below:
+You can create this type of chart in the control by binding your data to a , as shown in the example below:
@@ -88,7 +88,7 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below.
+You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -96,13 +96,13 @@ You can create this type of chart in the control by binding your data to a , as shown in the example below.
+You can create this type of chart in the control by binding your data to a , as shown in the example below.
## {Platform} Stacked Spline Chart
-The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below.
+The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the control by binding your data to a , as shown in the example below.
@@ -110,7 +110,7 @@ The Stacked Spline Chart is often used to show the change of value over time suc
The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-You can create this type of chart in the control by binding your data to a .
+You can create this type of chart in the control by binding your data to a .
@@ -128,15 +128,15 @@ The following table lists API members mentioned in the above sections:
| Chart Type | Control Name | API Members |
| -------------------------|----------------|-------------------------------- |
-| Stacked Area | | |
-| Stacked Bar | | |
-| Stacked Column | | |
-| Stacked Line | | |
-| Stacked Spline | | |
-| Stacked Spline Area | | |
-| Stacked 100% Area | | |
-| Stacked 100% Bar | | |
-| Stacked 100% Column | | |
-| Stacked 100% Line | | |
-| Stacked 100% Spline | | |
-| Stacked 100% Spline Area | | |
+| Stacked Area | | |
+| Stacked Bar | | |
+| Stacked Column | | |
+| Stacked Line | | |
+| Stacked Spline | | |
+| Stacked Spline Area | | |
+| Stacked 100% Area | | |
+| Stacked 100% Bar | | |
+| Stacked 100% Column | | |
+| Stacked 100% Line | | |
+| Stacked 100% Spline | | |
+| Stacked 100% Spline Area | | |
diff --git a/docs/xplat/src/content/en/components/charts/types/step-chart.mdx b/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
index 0426701608..8dc0d58b53 100644
--- a/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Step Chart belongs to a group of category charts that render a
## {Platform} Step Area Chart
-You can create {Platform} Step Area Chart in the control by setting property to enum, as shown in the example below.
+You can create {Platform} Step Area Chart in the control by setting property to enum, as shown in the example below.
@@ -23,13 +23,13 @@ You can create {Platform} Step Area Chart in the control by binding your data and setting property to value, as shown in the example below.
+You can create Step Line Chart in the control by binding your data and setting property to value, as shown in the example below.
## {Platform} Step Chart Styling
-If you need Step Charts with more features such as composite other series, you can configure the , , , lines' , and lines' properties on the control as demonstrated below.
+If you need Step Charts with more features such as composite other series, you can configure the , , , lines' , and lines' properties on the control as demonstrated below.
@@ -42,4 +42,4 @@ You can find more information about related chart types in these topics:
- [Chart Markers](../features/chart-markers.md)
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
index 5af251b335..9fd810720d 100644
--- a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Stock Chart, sometimes referred to as {Platform} Financial Cha
## {Platform} Stock Chart Example
-You can create Stock Chart using the control by binding your data and optionally setting property to value, as shown in the example below.
+You can create Stock Chart using the control by binding your data and optionally setting property to value, as shown in the example below.
@@ -76,7 +76,7 @@ If you need a Stock Chart with more features such as composite other series, you
## {Platform} Chart Annotations
-The Crosshair Annotation Layer provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
+The Crosshair Annotation Layer provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
The Final Value Layer provides a quick view along the axis of the ending value displayed in a series.
@@ -99,20 +99,20 @@ The following panes are available:
Financial Indicators are often used by traders to measure changes and to show trends in stock prices. These indicators are usually displayed below the price pane because they do not share the same Y-Axis scale.
By default the indicator panes are not displayed. The toolbar allows the end user to select which indicator to display at run time.
-In order to display an indicator pane initially, the property must be set to a least one type of indicator, as demonstrated in the following code:
+In order to display an indicator pane initially, the property must be set to a least one type of indicator, as demonstrated in the following code:
### Volume Pane
The volume pane represents the number of shares traded during a given period. Low volume would indicate little interest, while high volume would indicate high interest with a lot of trades. This can be displayed using column, line or area chart types. The toolbar allows the end user to display the volume pane by selecting a chart type to render the data at runtime. In order the display the pane, a volume type must be set, as demonstrated in the following code:
### Price Pane
-This pane displays stock prices and shows the stock's high, low, open and close prices over time. In addition it can display trend lines and overlays. Your end user can choose different chart types from the toolbar. By default, the chart type is set to . You can override the default setting, as demonstrated in the following code:
+This pane displays stock prices and shows the stock's high, low, open and close prices over time. In addition it can display trend lines and overlays. Your end user can choose different chart types from the toolbar. By default, the chart type is set to . You can override the default setting, as demonstrated in the following code:
Note that is recommended to use line chart type if plotting multiple data sources or if plotting data source with a lot of data points.
### Zoom Pane
-This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the to `none` as demonstrated in the following code:
+This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the to `none` as demonstrated in the following code:
-Note that you should set the option to the same value as the option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this:
+Note that you should set the option to the same value as the option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this:
In this example, the stock chart is plotting revenue for United States.
@@ -129,4 +129,4 @@ You can find more information about related chart features in these topics:
- [Chart Performance](../features/chart-performance.md)
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
index 0400450dbf..c0c261a33f 100644
--- a/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
@@ -15,7 +15,7 @@ The {ProductName} Treemap chart displays hierarchical (tree-structured) data as
## {Platform} Treemap Example
-In the following example, the demonstrates the 30 largest countries in the world by total area.
+In the following example, the demonstrates the 30 largest countries in the world by total area.
@@ -52,13 +52,13 @@ There are several common use cases for choosing a Treemap. When you:
- The data source must be an array or a list of data items
- The data source must contain at least one data item otherwise the map will not render any nodes.
-- All data items must contain at least one data column (e.g. string) which should be mapped to the property.
-- All data items must contain at least one numeric data column which should be mapped using the property.
-- To categorize data into organized tiles you can optionally use and .
+- All data items must contain at least one data column (e.g. string) which should be mapped to the property.
+- All data items must contain at least one numeric data column which should be mapped using the property.
+- To categorize data into organized tiles you can optionally use and .
## {Platform} Treemap Configuration
-In the following example, the treemap demonstrates the ability of changing it's algorithmic structure by modifying the and properties.
+In the following example, the treemap demonstrates the ability of changing it's algorithmic structure by modifying the and properties.
@@ -77,9 +77,9 @@ The Treemap allows you to choose the algorithm that is best for your requirement
### Layout Orientation
- property enables the user to set the direction in which the nodes of the hierarchy will be expanded.
+ property enables the user to set the direction in which the nodes of the hierarchy will be expanded.
-Note that the property works with the layout types SliceAndDice and Strip.
+Note that the property works with the layout types SliceAndDice and Strip.
- `Horizontal` – the child nodes are going to be stacked horizontally(SliceAndDice).
- `Vertical` – the child nodes are going to be stacked vertically (SliceAndDice).
@@ -93,17 +93,17 @@ In the following example, the treemap demonstrates the ability of changing the l
### {Platform} Treemap Highlighting
-In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set to Brighten or FadeOthers.
+In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set to Brighten or FadeOthers.
## {Platform} Treemap Percent based highlighting
-- : Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property.
-- : Specifies the name of the property in the datasource where the highlighted values are read.
-- : Controls the opacity of the normal value behind the highlighted value.
-- : Enables or disables highlighted values.
+- : Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property.
+- : Specifies the name of the property in the datasource where the highlighted values are read.
+- : Controls the opacity of the normal value behind the highlighted value.
+- : Enables or disables highlighted values.
- Auto: The treemap decides what mode to use.
- Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value.
- Hidden: The treemap does not show highlighted values.
@@ -121,4 +121,4 @@ You can find more information about related chart types in these topics:
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/dashboard-tile.mdx b/docs/xplat/src/content/en/components/dashboard-tile.mdx
index bbae259e60..10d60f0e22 100644
--- a/docs/xplat/src/content/en/components/dashboard-tile.mdx
+++ b/docs/xplat/src/content/en/components/dashboard-tile.mdx
@@ -16,7 +16,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
# {Platform} Dashboard Tile
-The {Platform} Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways.
+The {Platform} Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded that let you alter the visualization that is presented in a variety of ways.
A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts.
@@ -137,7 +137,7 @@ builder.Services.AddIgniteUIBlazor(
## Usage
-Depending on what you bind the Dashboard Tile's `DataSource` property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the {ProductName} toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:
+Depending on what you bind the Dashboard Tile's property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the {ProductName} toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:
- [{IgPrefix}CategoryChart](charts/chart-overview.md)
- [{IgPrefix}DataChart](charts/chart-overview.md)
@@ -146,25 +146,25 @@ Depending on what you bind the Dashboard Tile's `DataSource` property to will de
- [{IgPrefix}Linear Gauge](linear-gauge.md)
- [{IgPrefix}RadialGauge](radial-gauge.md)
-The data visualization that is chosen by default is mainly dependent on the schema and the count of the `DataSource` that you have bound. For example, if you bind a single numeric value, you will get a , but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a . If you bind an `DataSource` that has more value paths, you will receive a with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a `ShapeDataSource` or data the appears to contain geographic points to receive a .
+The data visualization that is chosen by default is mainly dependent on the schema and the count of the that you have bound. For example, if you bind a single numeric value, you will get a , but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a . If you bind an that has more value paths, you will receive a with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a or data the appears to contain geographic points to receive a .
-You are not locked into a single visualization when you bind the `DataSource`, and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so:
+You are not locked into a single visualization when you bind the , and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so:
{/*TODO SAMPLE*/}
-The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below:
+The visualization or properties of the visualization are also configurable using the at the top of the control. This has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below:
From left to right:
-- The first tool will show a data grid with the `DataSource` provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization.
+- The first tool will show a data grid with the provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization.
- The second tool allows you to configure the settings of the current data visualization.
- The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above.
-- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the or collection on the control.
+- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the or collection on the control.
This demo demonstrates dashboard tile integration with the {Platform} Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization.
@@ -180,13 +180,13 @@ This demo demonstrates dashboard tile integration with the {Platform} Geographic
-
-
-
-
-
-
-
+
+
+
+
+
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/excel-library-using-cells.mdx b/docs/xplat/src/content/en/components/excel-library-using-cells.mdx
index 33bccef0de..ad77814eaf 100644
--- a/docs/xplat/src/content/en/components/excel-library-using-cells.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-using-cells.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Using Cells
-The objects in an Excel worksheet is the object that holds your actual data values for the worksheet. This topic goes over the many operations that you can perform on these cells, such as accessing them and their regions by name, adding formulas and comments to the cells, and merging and formatting them.
+The objects in an Excel worksheet is the object that holds your actual data values for the worksheet. This topic goes over the many operations that you can perform on these cells, such as accessing them and their regions by name, adding formulas and comments to the cells, and merging and formatting them.
## {Platform} Using Cells Example
@@ -43,7 +43,7 @@ import { FormattedString } from "{PackageExcel}";
## Referencing Cells and Regions
-You can access a object or a object by calling the object’s or methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents.
+You can access a object or a object by calling the object’s or methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents.
The following example code demonstrates how to reference cells and regions:
@@ -75,7 +75,7 @@ var region = worksheet.GetRegion("G1:G10");
In Microsoft Excel, individual cells, as well as cell regions can have names assigned to them. The name of a cell or region can be used to reference that cell or region instead of their address.
-The Infragistics {Platform} Excel Library supports the referencing of cells and regions by name through the and methods of the object. You refer to the cell or region using the instance that refers to that cell or region.
+The Infragistics {Platform} Excel Library supports the referencing of cells and regions by name through the and methods of the object. You refer to the cell or region using the instance that refers to that cell or region.
You can use the following code snippet as an example for naming a cell or region:
@@ -117,7 +117,7 @@ var region = worksheet.GetRegion("myRegion");
## Adding a Comment to a Cell
-A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics {Platform} Excel Library allows you to add comments to a cell by setting a object’s property.
+A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics {Platform} Excel Library allows you to add comments to a cell by setting a object’s property.
The following example code demonstrates how to add a comment to a cell:
@@ -149,7 +149,7 @@ worksheet.Rows[0].Cells[0].Comment = cellComment;
## Adding a Formula to a Cell
-The Infragistics {Platform} Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the object’s method or by instantiating a object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the object using the object’s property. If you need the value, use the cell’s property.
+The Infragistics {Platform} Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the object’s method or by instantiating a object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the object using the object’s property. If you need the value, use the cell’s property.
The following code shows you how to add a formula to a cell.
@@ -178,7 +178,7 @@ sumFormula.ApplyTo(worksheet.Rows[5].Cells[0]);
## Copying a Cell’s Format
-Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column.
+Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the object’s property, you can call the object’s method and pass it a object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column.
The following code shows you how to copy the format of the 2nd column to the 4th column:
@@ -212,7 +212,7 @@ worksheet.Columns[3].CellFormat.SetFormatting(worksheet.Columns[1].CellFormat);
## Formatting a Cell
-The Infragistics {Platform} Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the property of the , , , or objects.
+The Infragistics {Platform} Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the property of the , , , or objects.
You can customize every aspect of a cell’s appearance. You can set a cell’s font, background, and borders, as well as text alignment and rotation. You can even apply a different format on a character-by-character basis for a cell’s text.
@@ -242,27 +242,27 @@ worksheet.Columns[2].CellFormat.FormatString = "\"$\"#,##0.00";
The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. You can open this color dialog by navigating to Excel Options => Save => Colors.
-You can create all possible fill types using static properties and methods on the class. They are as follows:
+You can create all possible fill types using static properties and methods on the class. They are as follows:
- `NoColor` - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through.
-- `CreateSolidFill` - Returns a instance which has a pattern style of `Solid` and a background color set to the or specified in the method.
+- `CreateSolidFill` - Returns a instance which has a pattern style of `Solid` and a background color set to the or specified in the method.
-- `CreatePatternFill` - Returns a instance which has the specified pattern style and the or values, specified for the background and pattern colors.
+- `CreatePatternFill` - Returns a instance which has the specified pattern style and the or values, specified for the background and pattern colors.
-- `CreateLinearGradientFill` - Returns a instance with the specified angle and gradient stops.
+- `CreateLinearGradientFill` - Returns a instance with the specified angle and gradient stops.
-- `CreateRectangularGradientFill` - Returns a instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle.
+- `CreateRectangularGradientFill` - Returns a instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle.
The derived types, representing the various fills which can be created, are as follows:
-- - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel.
+- - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel.
-- - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient.
+- - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient.
-- - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges.
+- - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges.
-The following code snippet demonstrates how to create a solid fill in a :
+The following code snippet demonstrates how to create a solid fill in a :
```ts
var workbook = new Workbook();
@@ -324,11 +324,11 @@ Each workbook has 12 associated theme colors. They are the following:
- There are default values when a workbook is created, which can be customized via Excel.
-Colors are defined by the class, which is a sealed immutable class. The class has a static `Automatic` property, which returns the automatic color, and there are various constructors which allow you to create a instance with a color or a theme value and an optional tint.
+Colors are defined by the class, which is a sealed immutable class. The class has a static `Automatic` property, which returns the automatic color, and there are various constructors which allow you to create a instance with a color or a theme value and an optional tint.
-The method on allows you to determine what color will actually be seen by the user when they open the file in Excel.
+The method on allows you to determine what color will actually be seen by the user when they open the file in Excel.
-If the represents a theme color, you must pass in a Workbook instance to the method so it can get the theme color’s RGB value from the workbook.
+If the represents a theme color, you must pass in a Workbook instance to the method so it can get the theme color’s RGB value from the workbook.
When saving out in the newer file formats such as .xlsx, the newer color information is saved directly into the file. When saving out in an older file format such as .xls, the index to the closest color in the palette will be saved out. In addition, the older formats have future feature records that can be saved out to indicate the newer color information.
@@ -336,37 +336,37 @@ When the older formats are opened in Microsoft Excel 2003 and earlier versions,
## Excel Format Support
-You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked.
+You can set a host of different formats on a by using the object returned by the property of that cell. This object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked.
-You can also access the built-in styles to Microsoft Excel 2007 using the collection of the object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007.
+You can also access the built-in styles to Microsoft Excel 2007 using the collection of the object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007.
-There is a special type of style on the workbook’s collection known as the "normal" style, which can be accessed using that collection’s property, or by indexing into the collection with the name "Normal".
+There is a special type of style on the workbook’s collection known as the "normal" style, which can be accessed using that collection’s property, or by indexing into the collection with the name "Normal".
-The contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing the properties on the will change all of the default cell format properties on the workbook. This is useful, for example, if you want to change the default font for your workbook.
+The contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing the properties on the will change all of the default cell format properties on the workbook. This is useful, for example, if you want to change the default font for your workbook.
-You can clear the collection or reset it to its predefined state by using the and methods, respectively. Both of these will remove all user-defined styles, but will clear the collection entirely.
+You can clear the collection or reset it to its predefined state by using the and methods, respectively. Both of these will remove all user-defined styles, but will clear the collection entirely.
-With this feature, a property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the property always returns the by default.
+With this feature, a property has been added to the object. This is a reference to a instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the property always returns the by default.
-If the property is set to null, it will revert back to the . If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format.
+If the property is set to null, it will revert back to the . If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format.
-When the property is set on a cell format, the format options included on the are removed from the cell format. All other properties are left intact. For example, if a cell style including border formatting was created and that style was set as the cell’s , the border format option on the cell format would be removed and the cell format only includes fill formatting.
+When the property is set on a cell format, the format options included on the are removed from the cell format. All other properties are left intact. For example, if a cell style including border formatting was created and that style was set as the cell’s , the border format option on the cell format would be removed and the cell format only includes fill formatting.
When a format option flag is removed from a format, all associated properties are reset to their unset values, so the cell format’s border properties are implicitly reset to default/unset values.
-You can determine what would really be seen in cells by using the method on classes which represent a row, column, cell, and merged cell.
+You can determine what would really be seen in cells by using the method on classes which represent a row, column, cell, and merged cell.
-This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a call.
+This method returns a instance which refers back to the associated on which it is based. So subsequent changes to the property will be reflected in the instance returned from a call.
## Merging Cells
Aside from setting the value or format of cells, you can also merge cells to make two or more cells appear as one. If you merge cells, they must be in a rectangular region.
-When you merge cells, each cell in the region will have the same value and cell format. The merged cells will also be associated with the same object, accessible from their property. The resultant object will also have the same value and cell format as the cells.
+When you merge cells, each cell in the region will have the same value and cell format. The merged cells will also be associated with the same object, accessible from their property. The resultant object will also have the same value and cell format as the cells.
Setting the value (or cell format) of the region or any cell in the region will change the value of all cells and the region. If you un-merge cells, all of the previously merged cells will retain the shared cell format they had before they were unmerged. However, only the top-left cell of the region will retain the shared value.
-In order to create a merged cell region, you must add a range of cells to the object’s collection. This collection exposes an `Add` method that takes four integer parameters. The four parameters determine the index of the starting row and column (top-left most cell) and the index of the ending row and column (bottom-right most cell).
+In order to create a merged cell region, you must add a range of cells to the object’s collection. This collection exposes an `Add` method that takes four integer parameters. The four parameters determine the index of the starting row and column (top-left most cell) and the index of the ending row and column (bottom-right most cell).
```ts
var workbook = new Workbook();
@@ -452,11 +452,11 @@ If a text is used in the cell, the cell displayed text will always be full value
The only time when this is not the case is when padding characters are used in format string. Then the value will be displayed as all hash marks when there is not enough room for the text.
-You can set the worksheet's ' property to have formulas be displayed in cells instead of their results, and format strings and cell widths are ignored. Text values display as if their format string were @ , non-integral numeric values display as if their format string were 0.0 and integral numeric values display as if their format string were 0 .
+You can set the worksheet's ' property to have formulas be displayed in cells instead of their results, and format strings and cell widths are ignored. Text values display as if their format string were @ , non-integral numeric values display as if their format string were 0.0 and integral numeric values display as if their format string were 0 .
Additionally, if the value cannot fit, it will not display as all hashes. Display text will still return its full text as the cell text, even though it may not be fully seen.
-The following code snippet demonstrates the usage of the method to get the text as it would be displayed in Excel:
+The following code snippet demonstrates the usage of the method to get the text as it would be displayed in Excel:
```ts
var workbook = new Workbook();
@@ -478,17 +478,17 @@ var cellText = worksheet.Rows[0].Cells[0].GetText();
## API References
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-tables.mdx b/docs/xplat/src/content/en/components/excel-library-using-tables.mdx
index 040a03f2f5..e8946370e9 100644
--- a/docs/xplat/src/content/en/components/excel-library-using-tables.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-using-tables.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Using Tables
-The Infragistics {Platform} Excel Engine's functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a .
+The Infragistics {Platform} Excel Engine's functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a .
{/*## {Platform} Using Tables Example
@@ -24,9 +24,9 @@ The Infragistics {Platform} Excel Engine's object and are added in the worksheet's collection. In order to add a table, you need to invoke the `Add` method on this collection. In this method, you can specify the region in which you would like to add a table, whether or not the table should contain headers, and optionally, specify the table's style as a object.
+Worksheet tables in the Infragistics {Platform} Excel Engine are represented by the object and are added in the worksheet's collection. In order to add a table, you need to invoke the `Add` method on this collection. In this method, you can specify the region in which you would like to add a table, whether or not the table should contain headers, and optionally, specify the table's style as a object.
-The following code demonstrates how you can add a table with headers to a spanning a region of A1 to G10, where A1 to G1 will be the column headers:
+The following code demonstrates how you can add a table with headers to a spanning a region of A1 to G10, where A1 to G1 will be the column headers:
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -46,7 +46,7 @@ worksheet.Tables.Add("A1:G10", true);
-Once you have added a table, you can modify it by adding or deleting rows and columns by calling the , , , or methods on the . You can also set a new table range by using the method of the table.
+Once you have added a table, you can modify it by adding or deleting rows and columns by calling the , , , or methods on the . You can also set a new table range by using the method of the table.
The following code snippet shows the usage of these methods:
@@ -97,23 +97,23 @@ table.Resize("A1:G15");
## Filtering Tables
-Filtering is done by applying a filter on a column in the . When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied.
+Filtering is done by applying a filter on a column in the . When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied.
-If the data in the table is subsequently changed or you change the `Hidden` property of the rows, the filter conditions will not automatically reevaluate. The filter conditions in a table are only reapplied when table column filters are added, removed, modified, or when the method is called on the table.
+If the data in the table is subsequently changed or you change the `Hidden` property of the rows, the filter conditions will not automatically reevaluate. The filter conditions in a table are only reapplied when table column filters are added, removed, modified, or when the method is called on the table.
-The following are the filter types available to the columns of your :
+The following are the filter types available to the columns of your :
-- - Cells can be filtered based on whether they are above or below the average value of all cells in the column.
-- - Cells can be filtered based on one or more custom conditions.
-- - Only cells with dates in a specific month or quarter of any year will be displayed.
-- - Only cells with a specific fill will be displayed.
-- - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed.
-- - Only cells with a specific font color will be displayed.
-- - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter.
-- - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values.
-- - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied.
+- - Cells can be filtered based on whether they are above or below the average value of all cells in the column.
+- - Cells can be filtered based on one or more custom conditions.
+- - Only cells with dates in a specific month or quarter of any year will be displayed.
+- - Only cells with a specific fill will be displayed.
+- - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed.
+- - Only cells with a specific font color will be displayed.
+- - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter.
+- - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values.
+- - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied.
-The following code snippet demonstrates how to apply an "above average" filter to a 's first column:
+The following code snippet demonstrates how to apply an "above average" filter to a 's first column:
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -138,20 +138,20 @@ table.Columns[0].ApplyAverageFilter(Documents.Excel.Filtering.AverageFilterType.
## Sorting Tables
Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sorting conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit.
-If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place.
+If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place.
-In addition to accessing sort conditions from the table columns, they are also exposed off the 's SortSettings property's collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting.
+In addition to accessing sort conditions from the table columns, they are also exposed off the 's SortSettings property's collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting.
The following sort condition types are available to set on columns:
-- - Sort cells in an ascending or descending order based on their value.
-- - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically.
-- - Sort cells based on whether their fill is a specific pattern or gradient.
-- - Sort cells based on whether their font is a specific color.
+- - Sort cells in an ascending or descending order based on their value.
+- - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically.
+- - Sort cells based on whether their fill is a specific pattern or gradient.
+- - Sort cells based on whether their font is a specific color.
-There is also a property on the SortSettings of the to determine whether strings should be sorted case sensitively or not.
+There is also a property on the SortSettings of the to determine whether strings should be sorted case sensitively or not.
-The following code snippet demonstrates how to apply an to a :
+The following code snippet demonstrates how to apply an to a :
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -181,5 +181,5 @@ table.SortSettings.SortConditions.Add(table.Columns[0], new Infragistics.Documen
## API References
-
-
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx b/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx
index e3bad2a120..7083ccd617 100644
--- a/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-using-workbooks.mdx
@@ -23,7 +23,7 @@ The Infragistics {Platform} Excel Engine enables you to save data to and load da
## Change Default Font
-First create a new instance of . Next, add the new font to the collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook.
+First create a new instance of . Next, add the new font to the collection of the . This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook.
```ts
var workbook = new Workbook();
@@ -46,25 +46,25 @@ font.Height = 16 * 20;
## Setting Workbook Properties
-Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics {Platform} Excel Library to set these properties using the object’s property. The available properties are:
+Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics {Platform} Excel Library to set these properties using the object’s property. The available properties are:
--
+-
--
+-
--
+-
--
+-
--
+-
--
+-
--
+-
--
+-
--
+-
The following code demonstrates how to create a workbook and set its `title` and `status` document properties.
@@ -92,11 +92,11 @@ The protection is not enforced via the Infragistics Excel Engine's object model.
Protection is applied to a workbook by invoking its `protect` method.
-When a is protected without a password, the end user may unprotect the in Excel without having to supply a password. To programmatically unprotect a , one may use the `unprotect` method.
+When a is protected without a password, the end user may unprotect the in Excel without having to supply a password. To programmatically unprotect a , one may use the `unprotect` method.
-When a is protected, the values of the properties of the instance from this 's `protection` property indicate the disabled operations.
+When a is protected, the values of the properties of the instance from this 's `protection` property indicate the disabled operations.
-If is already true, the `protect` method will be ignored.
+If is already true, the `protect` method will be ignored.
```ts
var workbook = new Workbook();
@@ -146,6 +146,6 @@ var protect = workbook.Protection;
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx b/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx
index bd393562db..dbeb8bedbd 100644
--- a/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-using-worksheets.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Using Worksheets
-The Infragistics {Platform} Excel Engine's is where your data is kept. You can input data by working with the Worksheet's rows and cells and setting their corresponding values. The allows you to filter, sort, and customize the formats of the cells, as shown below.
+The Infragistics {Platform} Excel Engine's is where your data is kept. You can input data by working with the Worksheet's rows and cells and setting their corresponding values. The allows you to filter, sort, and customize the formats of the cells, as shown below.
## {Platform} Using Worksheets Example
@@ -47,7 +47,7 @@ import { WorkbookColorInfo } from "{PackageExcel}";
## Configuring the Gridlines
The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color.
-You can show or hide the gridlines using the property of the of the worksheet. The following code demonstrates how you can hide the gridlines in your worksheet:
+You can show or hide the gridlines using the property of the of the worksheet. The following code demonstrates how you can hide the gridlines in your worksheet:
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -67,7 +67,7 @@ worksheet.DisplayOptions.ShowGridlines = false;
-You can configure the gridlines' color using the property of the of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red:
+You can configure the gridlines' color using the property of the of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red:
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -90,7 +90,7 @@ worksheet.DisplayOptions.GridlineColor = Core.Graphics.Colors.Red;
## Configuring the Headers
The column and row headers are used to visually identify columns and rows. They are also used to visually highlight the currently selected cell or cell region.
-You can show or hide the column and row headers using the property of the of the worksheet. The following code demonstrates how you can hide the row and column headers:
+You can show or hide the column and row headers using the property of the of the worksheet. The following code demonstrates how you can hide the row and column headers:
```ts
var workbook = new Workbook(WorkbookFormat.Excel2007);
@@ -111,7 +111,7 @@ worksheet.DisplayOptions.ShowRowAndColumnHeaders = false;
## Configuring Editing of the Worksheet
-By default, the objects that you save will be editable. You can disable editing of a worksheet by protecting it using the object's method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet.
+By default, the objects that you save will be editable. You can disable editing of a worksheet by protecting it using the object's method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet.
The following code demonstrates how to disable editing in your worksheet:
@@ -133,9 +133,9 @@ worksheet.Protect();
-You can also use the object's method to protect a worksheet against structural changes.
+You can also use the object's method to protect a worksheet against structural changes.
-When protection is set, you can set the object's property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet.
+When protection is set, you can set the object's property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the object's property to **false** on a specific object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet.
The following code demonstrates how you can do this:
@@ -160,24 +160,24 @@ worksheet.Columns[0].CellFormat.Locked = ExcelDefaultableBoolean.False;
## Filtering Worksheet Regions
-Filtering is done by setting a filter condition on a worksheet's which can be retrieved from the object's property. Filter conditions are only reapplied when they're added, removed, modified, or when the method is called on the worksheet. They are not constantly evaluated as data within the region changes.
+Filtering is done by setting a filter condition on a worksheet's which can be retrieved from the object's property. Filter conditions are only reapplied when they're added, removed, modified, or when the method is called on the worksheet. They are not constantly evaluated as data within the region changes.
-You can specify the region to apply the filter by using the method on the object.
+You can specify the region to apply the filter by using the method on the object.
Below is a list of methods and their descriptions that you can use to add a filter to a worksheet:
| Method | Description |
| --------------|-------------|
-| |Represents a filter which can filter data based on whether the data is below or above the average of the entire data range.|
-| |Represents a filter which can filter dates in a Month, or quarter of any year.|
-| |Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden.|
+| |Represents a filter which can filter data based on whether the data is below or above the average of the entire data range.|
+| |Represents a filter which can filter dates in a Month, or quarter of any year.|
+| |Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden.|
|`ApplyFixedValuesFilter`|Represents a filter which can filter cells based on specific, fixed values, which are allowed to display.|
-| |Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden.|
-| |Represents a filter which can filter cells based on their conditional formatting icon.|
-| |Represents a filter which can filter date cells based on dates relative to the when the filter was applied.|
-| |Represents a filter which can filter in cells in the upper or lower portion of the sorted values.|
-| |Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated.|
-| |Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation.|
+| |Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden.|
+| |Represents a filter which can filter cells based on their conditional formatting icon.|
+| |Represents a filter which can filter date cells based on dates relative to the when the filter was applied.|
+| |Represents a filter which can filter in cells in the upper or lower portion of the sorted values.|
+| |Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated.|
+| |Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation.|
You can use the following code snippet as an example to add a filter to a worksheet region:
@@ -204,7 +204,7 @@ worksheet.FilterSettings.ApplyAverageFilter(0, Documents.Excel.Filtering.Average
## Freezing and Splitting Panes
You can freeze rows at the top of your worksheet or columns at the left using the freezing panes features. Frozen rows and columns remain visible at all times while the user is scrolling. The frozen rows and columns are separated from the rest of the worksheet by a single, solid line, which cannot be removed.
-In order to enable pane freezing, you need to set the property of the object's to **true**. You can then specify the rows or columns to freeze by using the `FrozenRows` and `FrozenColumns` properties of the display options , respectively.
+In order to enable pane freezing, you need to set the property of the object's to **true**. You can then specify the rows or columns to freeze by using the `FrozenRows` and `FrozenColumns` properties of the display options , respectively.
You can also specify the first row in the bottom pane or first column in the right pane using the `FirstRowInBottomPane` and `FirstColumnInRightPane` properties, respectively.
@@ -241,7 +241,7 @@ worksheet.DisplayOptions.FrozenPaneSettings.FirstRowInBottomPane = 6;
## Setting the Worksheet Zoom Level
-You can change the zoom level for each worksheet independently using the property on the object's . This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply.
+You can change the zoom level for each worksheet independently using the property on the object's . This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply.
The following code demonstrates how you can do this:
@@ -267,9 +267,9 @@ worksheet.DisplayOptions.MagnificationInNormalView = 300;
Sorting is done by setting a sorting condition on a worksheet level object on either columns or rows. You can sort columns or rows in ascending or descending order.
-This is done by specifying a region and sort type to the object's that can be retrieved using the property of the sheet.
+This is done by specifying a region and sort type to the object's that can be retrieved using the property of the sheet.
-The sort conditions in a sheet are only reapplied when sort conditions are added, removed, modified, or when the method is called on the worksheet. Columns or rows will be sorted within the region. "Rows" is the default sort type.
+The sort conditions in a sheet are only reapplied when sort conditions are added, removed, modified, or when the method is called on the worksheet. Columns or rows will be sorted within the region. "Rows" is the default sort type.
The following code snippet demonstrates how to apply a sort to a region of cells in a worksheet:
@@ -292,7 +292,7 @@ worksheet.SortSettings.SortConditions.Add(new RelativeIndex(0), new Infragistics
## Worksheet Protection
-You can protect a worksheet by calling the method on the object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations:
+You can protect a worksheet by calling the method on the object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations:
- Editing of cells.
- Editing of objects such as shapes, comments, charts, or other controls.
@@ -305,7 +305,7 @@ You can protect a worksheet by calling the method on the object.
+You can remove worksheet protection by calling the method on the object.
The following code snippet shows how to enable protection of all of the above-listed user operations:
@@ -329,13 +329,13 @@ worksheet.Protect();
## Worksheet Conditional Formatting
-You can configure the conditional formatting of a object by using the many "Add" methods exposed on the collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to.
+You can configure the conditional formatting of a object by using the many "Add" methods exposed on the collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to.
-Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as and to determine the background and font settings of your cells under a particular conditional format, respectively.
+Many of the conditional formats that you can add to your worksheet have a property that determines the way that the elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this property such as and to determine the background and font settings of your cells under a particular conditional format, respectively.
-There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and .
+There are a few conditional formats that do not have a property, as their visualization on the worksheet cell behaves differently. These conditional formats are the , , and .
-When loading a pre-existing from Excel, the formats will be preserved when that is loaded. The same is true for when you save the out to an Excel file.
+When loading a pre-existing from Excel, the formats will be preserved when that is loaded. The same is true for when you save the out to an Excel file.
The following code example demonstrates usage of conditional formats on a worksheet:
@@ -364,13 +364,13 @@ format.CellFormat.Font.ColorInfo = new WorkbookColorInfo(Core.Graphics.Colors.Re
## API References
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx
index 4aa9bbbcae..9000efc3ba 100644
--- a/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-working-with-charts.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Working with Charts
-The Infragistics {Platform} Excel Engine's functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. For example, if you want to see your Excel data in a region of cells visualized as a column, line, or over 70 other chart types, this feature can help you to achieve that.
+The Infragistics {Platform} Excel Engine's functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. For example, if you want to see your Excel data in a region of cells visualized as a column, line, or over 70 other chart types, this feature can help you to achieve that.
## {Platform} Working with Charts Example
@@ -26,11 +26,11 @@ The XLSX format is required. Other formats are not supported at this time.
## Usage
-In order to add a chart to a worksheet, you must use the method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up.
+In order to add a chart to a worksheet, you must use the method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up.
-The method returns the worksheet chart element to be added to the worksheet. Once you have this, you can use the method on the chart to set a cell address of the region of worksheet cells that you wish to use as a data source, as well as whether or not you want to switch the mapping of columns and rows to the X and Y axis.
+The method returns the worksheet chart element to be added to the worksheet. Once you have this, you can use the method on the chart to set a cell address of the region of worksheet cells that you wish to use as a data source, as well as whether or not you want to switch the mapping of columns and rows to the X and Y axis.
-There are over 70 supported chart types, including `Line`, `Area`, `Column`, and `Pie`.
+There are over 70 supported chart types, including `Line`, `Area`, , and `Pie`.
The following code demonstrates how to use the Excel charting feature. The below snippet will add a column chart to between the first cell and the 13th cell in the first row of the worksheet. The source data is then set for the data in the region of A2:M6, switching the mapping of columns and rows for the X and Y axis of the column chart:
@@ -56,4 +56,4 @@ chart.SetSourceData("A2:M6", true);
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx
index 6cf38ee8bb..ed19251d75 100644
--- a/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-working-with-grids.mdx
@@ -29,4 +29,4 @@ TODO
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx
index 1f7c5d166c..f2c7632d3d 100644
--- a/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx
+++ b/docs/xplat/src/content/en/components/excel-library-working-with-sparklines.mdx
@@ -54,4 +54,4 @@ sheet1.SparklineGroups.Add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A1
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/excel-library.mdx b/docs/xplat/src/content/en/components/excel-library.mdx
index 69055054cb..b4c79c63bd 100644
--- a/docs/xplat/src/content/en/components/excel-library.mdx
+++ b/docs/xplat/src/content/en/components/excel-library.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Excel Library Overview
-The Infragistics {Platform} Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like , , , and many more. The Infragistics {Platform} Excel Library makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.
+The Infragistics {Platform} Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like , , , and many more. The Infragistics {Platform} Excel Library makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.
## {Platform} Excel Library Example
@@ -103,7 +103,7 @@ If you are using a Web Assembly (WASM) Blazor project, there are a couple of ext
```
-- Set the static `Workbook.InProcessRuntime` to the current runtime. This can be done by using the following code:
+- Set the static to the current runtime. This can be done by using the following code:
```razor
@using Microsoft.JSInterop
@@ -156,13 +156,13 @@ Now that the Excel Library module is imported, next step is to load a workbook.
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a .
+In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a .
-In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method.
+In order to load and save objects, you can utilize the save method of the actual object, as well as its static `Load` method.
```ts
import { Workbook } from "{PackageExcel}";
@@ -236,5 +236,5 @@ Modify `angular.json` by setting the `vendorSourceMap` option under architect =>
## API References
-
-
+
+
diff --git a/docs/xplat/src/content/en/components/excel-utility.mdx b/docs/xplat/src/content/en/components/excel-utility.mdx
index b0bf1c95f4..0aeaa34549 100644
--- a/docs/xplat/src/content/en/components/excel-utility.mdx
+++ b/docs/xplat/src/content/en/components/excel-utility.mdx
@@ -353,6 +353,6 @@ export class ExcelUtility {
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
index 27338eb14b..4bb071d317 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
@@ -33,14 +33,6 @@ All notable changes for each version of {ProductName} are documented on this pag
### Bug Fixes
-| Bug Number | Control | Description |
-|------------|---------|-------------|
-| 3385 | * | Web Components themes are missing in Blazor latest packages |
-
-## **{PackageVerChanges-25-2-MAR2}**
-
-### Bug Fixes
-
| Bug Number | Control | Description |
|------------|---------|-------------|
| 3229 | Grids | Latest version of Blazor Grids shows Trial watermark for Licensed version |
@@ -174,9 +166,9 @@ As of the 2025.2 release, we no longer support .NET 6. This corresponds with the
#### User Annotations
-In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
+In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-This is directly integrated with the available tools of the .
+This is directly integrated with the available tools of the .
@@ -184,8 +176,8 @@ This is directly integrated with the available tools of the
--
+-
+-
### {PackageMaps} (Geographic Map)
@@ -209,7 +201,7 @@ Ability for axis annotations to automatically detect collisions and truncate to
- The merging can be configured on the grid level to apply either:
- `OnSort` - only when the column is sorted.
- `Always` - always, regardless of data operations.
- The default is `OnSort`.
+ The default is `OnSort`.
```razor
@@ -220,7 +212,7 @@ Ability for axis annotations to automatically detect collisions and truncate to
- **Column Pinning**
- - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the property on the column:
+ - Added ability to pin individual columns to a specific side (start or end of the grid), so that you can now have pinning from both sides. This can be done either declaratively by setting the property on the column:
```razor
@@ -241,7 +233,7 @@ col.Pinned = true;
```
- - If property is not set on a column, the column will default to the position specified on the grid's pinning options for columns.
+ - If property is not set on a column, the column will default to the position specified on the grid's pinning options for columns.
- **Sorting and Grouping Improvements**
- Improved sorting algorithm efficiency using Schwartzian transformation. This is a technique, also known as decorate-sort-undecorate, which avoids recomputing the sort keys by temporarily associating them with the original data records.
@@ -250,23 +242,23 @@ col.Pinned = true;
- Optimized grouping operations.
- **Other Improvements**
- - A column's and constrain the user-specified width so that it cannot go outside their bounds.
- - The property can now be set as simple strings "local" and "remote" and does not require importing the `GridPagingMode` enum.
+ - A column's and constrain the user-specified width so that it cannot go outside their bounds.
+ - The property can now be set as simple strings "local" and "remote" and does not require importing the enum.
### General
#### Added
--
+-
#### Changed
- Updated the readonly styles of most form associated components across all themes to better signify when a component is in a readonly state.
--
- - Behavioral change: default placement is "bottom" now.
- - Behavioral change: will not render an arrow indicator by default unless with-arrow is set.
- - Breaking change: events will no longer return its anchor target in its detail property. You can still access it at event.target.anchor.
+-
+ - Behavioral change: default placement is "bottom" now.
+ - Behavioral change: will not render an arrow indicator by default unless with-arrow is set.
+ - Breaking change: events will no longer return its anchor target in its detail property. You can still access it at event.target.anchor.
#### Deprecated
-- - is deprecated. Use to render an arrow indicator.
+- - is deprecated. Use to render an arrow indicator.
### Bug Fixes
@@ -282,32 +274,27 @@ col.Pinned = true;
**Breaking Changes**
-- `AzureMapsMapImagery` was renamed to
-
-
-
-
-
-- `AzureMapsImageryStyle.Imagery` was renamed to `AzureMapsImageryStyle.Satellite`
-- The following enum values were renamed to include the Overlay suffix:
- - ,
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
- -
+- `AzureMapsMapImagery` was renamed to
+- `AzureMapsImageryStyle.Imagery` was renamed to
+- The following `AzureMapsImageryStyle.Imagery` enum values were renamed to include the Overlay suffix:
+ - ,
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
+ -
### {PackageCharts} (Charts)
#### New Axis Label Events
-The following events have been added to the `IgbDataChart` to allow you to detect different operations on the axis labels:
+The following events have been added to the to allow you to detect different operations on the axis labels:
- `LabelMouseDown`
- `LabelMouseUp`
@@ -318,34 +305,34 @@ The following events have been added to the `IgbDataChart` to allow you to detec
#### Companion Axis
-Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
+Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
#### RadialPieSeries Inset Outlines
-There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
+There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
**Breaking Changes**
-- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
+- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
### {PackageGrids} (Grids)
#### Cell Suffix Content
-Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
+Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
--
--
+-
+-
- `SuffixTextFont`
--
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
+-
Please note that the maximum size available for the icons is 24x24. You can provide an icon that is larger or smaller than this, but you will need to configure the viewbox settings in order to properly scale it to fit in the 24x24 space so it is fully visible.
@@ -353,29 +340,29 @@ Please note that the maximum size available for the icons is 24x24. You can prov
| Bug Number | Control | Description |
|------------|---------|------------------|
-|31624 | `IgbCategoryChart` | Resizing the containing window of the `IgbCategoryChart` causes the chart to fail to render the series|
+|31624 | | Resizing the containing window of the causes the chart to fail to render the series|
|37307 | `IgbCheckBox` | JS Heap, Nodes, and Listeners leakage on IgbCheckBox|
-|37930 | `IgbDataChart` | Data Annotation Overlay Text Color not working|
-|27304 | `IgbDataChart` | Zoom rectangle is not positioned the same as the background rectangle|
-|30600 | `IgbDoughnutChart` | No textStyle property for either the chart or series (pie chart has this)|
-|38231 | `IgbGrid` | Unpinned column does not return to the original position if hidden columns exist|
+|37930 | | Data Annotation Overlay Text Color not working|
+|27304 | | Zoom rectangle is not positioned the same as the background rectangle|
+|30600 | | No textStyle property for either the chart or series (pie chart has this)|
+|38231 | | Unpinned column does not return to the original position if hidden columns exist|
|33861 | Excel Library | Adding line chart corrupts excel File for German culture|
### Enhancements
#### IgbBulletGraph
-- Added new property
+- Added new property
#### Charts
- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness`
-- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
+- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
-- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
+- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
-- Added to and . This allows you to configure the opacity applied to highlighted series.
+- Added to and . This allows you to configure the opacity applied to highlighted series.
#### IgbDataGrid
@@ -383,7 +370,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
#### IgbLinearGauge
-- Added new property
+- Added new property
## **{PackageVerChanges-25-1-AUG}**
@@ -392,7 +379,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
#### Azure Map Imagery Support
-The `IgbGeographicMap` now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
+The now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps.
@@ -403,25 +390,25 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
| Bug Number | Control | Description |
|------------|---------|------------------|
-|26952 | `IgbTabs` | e.Detail is null in Change event in Razor/JS|
-|26953 | `IgbTabs` | Marking a tab selected won't apply on subsequent attempts|
-|31910 | `IgbXDatePicker` | An error will happen when I bind a value using the "@bind-Value" syntax and click the clear button|
-|31323 | `IgbDataChart`, `IgbGrid`, `IgbCombo` | A NullReferenceException happens when the data type has a collection-type property, and the 1st element of that collection is null|
-|38903 | `IgbTabs` | Dropdown list is not displaying in the correct location for components inside the tab|
-|[139](https://github.com/IgniteUI/igniteui-blazor/issues/139) | `IgbDatePicker`, `IgbDateTimeInput` | Date picker and data time input do not support nullable values|
+|26952 | | e.Detail is null in Change event in Razor/JS|
+|26953 | | Marking a tab selected won't apply on subsequent attempts|
+|31910 | | An error will happen when I bind a value using the "@bind-Value" syntax and click the clear button|
+|31323 | , , `IgbCombo` | A NullReferenceException happens when the data type has a collection-type property, and the 1st element of that collection is null|
+|38903 | | Dropdown list is not displaying in the correct location for components inside the tab|
+|[139](https://github.com/IgniteUI/igniteui-blazor/issues/139) | , | Date picker and data time input do not support nullable values|
### General
The following properties of these components are now nullable:
-- :
-- : ,
-- : , ,
-- : , ,
-- `DateTimePicker`: , ,
-- :
-- : , , , , ,
-- : ,
-- : ,
-- : , ,
+- :
+- : ,
+- : , ,
+- : , ,
+- `DateTimePicker`: , ,
+- :
+- : , , , , ,
+- : ,
+- : ,
+- : , ,
## **{PackageVerChanges-25-1-JULY}**
@@ -429,9 +416,9 @@ The following properties of these components are now nullable:
| Bug Number | Control | Description |
|------------|---------|------------------|
-|36448 | `IgbRadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles)|
-|37718 | `IgbTab` | Unexpected scrolling occurred when a new row was added to a grid that is in a tab panel|
-|37855 | `IgbGrid` | Crypto.randomUID not found error is thrown if a grid contains HeaderTemplate and the page is accessed using unsecured(http) protocol|
+|36448 | | Radial label format properties do not work. (eg. Title, SubTitles)|
+|37718 | | Unexpected scrolling occurred when a new row was added to a grid that is in a tab panel|
+|37855 | | Crypto.randomUID not found error is thrown if a grid contains HeaderTemplate and the page is accessed using unsecured(http) protocol|
### {PackageCharts} (Charts)
@@ -457,16 +444,16 @@ For more details please visit:
- Data Annotation Slice Layer
- Data Annotation Strip Layer
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
-- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
+- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
-- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
- [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
### General
-- component provides a way to display a tooltip for a specific element. To use, set content as desired and link via the property to the target element's id:
+- component provides a way to display a tooltip for a specific element. To use, set content as desired and link via the property to the target element's id:
@@ -479,25 +466,25 @@ For more details please visit:
- The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events.
+ The tooltip can be further customized with `Show/HideDelay`, around the target and customizable `Show/HideTriggers` events.
### Changes
- A number of enumerations have been renamed and/or merged with others. Renames (with affected components):
- - `BaseAlertLikePosition` ( and ) has been renamed to `AbsolutePosition`
- - `ButtonGroupAlignment` ( ), `CalendarOrientation` ( ), `CardActionsOrientation` ( ), `DatePickerOrientation` ( ), `RadioGroupAlignment` ( ) have been merged and renamed to `ContentOrientation`
- - `CalendarBaseSelection` ( ) has been renamed to `CalendarSelection`
- - `CarouselAnimationType` ( ) and `StepperHorizontalAnimation` ( ) have been merged and renamed to `HorizontalTransitionAnimation`
- - `CheckboxBaseLabelPosition` ( and ) and `RadioLabelPosition` ( ) have been merged and renamed to `ToggleLabelPosition`
- - `DatePickerMode` ( ) has been renamed to `PickerMode`
- - `DatePickerHeaderOrientation` ( ) has been renamed to/merged with `CalendarHeaderOrientation`
- - `DropdownPlacement` ( and ) has been renamed to `PopoverPlacement`
- - `DropdownScrollStrategy` ( ) and `SelectScrollStrategy` ( ) have been merged and renamed to `PopoverScrollStrategy`
- - `SliderBaseTickOrientation` ( and ) has been renamed to `SliderTickOrientation`
- - ( and ) has been renamed to `SliderTickLabelRotation`
--
-
- Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization.
+ - ( and ) has been renamed to
+ - ( ), ( ), ( ), ( ), ( ) have been merged and renamed to
+ - ( ) has been renamed to
+ - ( ) and ( ) have been merged and renamed to
+ - ( and ) and ( ) have been merged and renamed to
+ - ( ) has been renamed to
+ - ( ) has been renamed to/merged with
+ - ( and ) has been renamed to
+ - ( ) and ( ) have been merged and renamed to
+ - ( and ) has been renamed to
+ - ( and ) has been renamed to
+-
+
+ Simplified configuration by removing the need to define separate panel and linking the panel and tab header. The `Panel` property and the `IgbTabPanel` itself have been removed. Content can be now assigned directly to the and header text can be set conveniently via the new property or by projecting an element to `slot="label"` for more involved customization.
Before:
@@ -542,62 +529,37 @@ For more details please visit:
```
--
- - & are now `double` instead of `string`
--
- - `ActiveStepChangingArgsEventArgs` has been renamed to
-
-
-
-
-
- - `ActiveStepChangedArgsEventArgs` has been renamed to
-
-
-
-
-
- - `StepperTitlePosition` now defaults to `Auto` to correctly reflect the default behavior
--
- - `TreeSelectionChangeEventArgs` has been renamed to
-
-
-
-
-
--
- - & are now `string` properties instead of explicit enums
+-
+ - & are now `double` instead of `string`
+-
+ - has been renamed to
+ - has been renamed to
+ - now defaults to `Auto` to correctly reflect the default behavior
+-
+ - has been renamed to
+-
+ - & are now `string` properties instead of explicit enums
### {PackageGrids} (Grids)
--
+-
- Added events: `HiddenChange`, `ExpandedChange`, `WidthChange`, `PinnedChange`
--
+-
- Added events: `GroupingExpressionsChange`, `GroupingExpansionStateChange`
--
- - Added new parameter
-
-
-
-
- in
-
-
-
-
- args for `GridCreated` event
-- , ,
- - Added property - - represents a list of key-value pairs [row ID, expansion state].
+-
+ - Added new parameter in args for `GridCreated` event
+- , ,
+ - Added property - - represents a list of key-value pairs [row ID, expansion state].
- Added event: `ExpansionStatesChange`
- Type of `Rendered` event is changed from `VoidHandler` to `ComponentBoolValueChangedEventHandler`
- Type of DataChanging event is changed from `ForOfDataChangingEventHandler` to `ForOfDataChangeEventHandler`
- Type of DataChanged event is changed from `VoidHandler` to `ForOfDataChangeEventHandler`
--
+-
- Added events: `ColumnsExpandedChange`, `RowsExpandedChange`, `FiltersExpandedChange`, `ValuesExpandedChange`
### {PackageDashboards} (Dashboards)
-- The `IgbDashboardTile` now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the `IgbDashboardTile` to an instance of `IgbLocalDataSource`.
+- The now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the of the to an instance of .
### Enhancements
@@ -612,8 +574,8 @@ For more details please visit:
| Bug Number | Control | Description |
|------------|---------|------------------|
-|25997 | `IgbDataGrid` | Summaries are only showing for first grouped child row|
-|37023 | `IgbDataChart` | Tooltips are cut-off/offscreen if overflow hidden is set.|
+|25997 | | Summaries are only showing for first grouped child row|
+|37023 | | Tooltips are cut-off/offscreen if overflow hidden is set.|
|37244 | Excel Library | Custom Data Validation is not working|
## **{PackageVerChanges-24-2-MAY}**
@@ -622,8 +584,8 @@ For more details please visit:
| Bug Number | Control | Description |
|------------|---------|------------------|
-|37271 | `IgbHierarchicalGrid` | ParentRowData included to IGridCreatedEventArgs|
-|37681 | `IgbDataChart` | Category Chart - values labels are should appear above columns when there is adequate space|
+|37271 | | ParentRowData included to IGridCreatedEventArgs|
+|37681 | | Category Chart - values labels are should appear above columns when there is adequate space|
|37244 | Excel Library | Custom Data Validation is not working|
## **{PackageVerChanges-24-2-APR}**
@@ -635,29 +597,24 @@ For more details please visit:
### Enhancements
#### List
-- Added new property on called
+- Added new property on called
#### Accordion
-- Added new events and `Close`
+- Added new events and `Close`
### {PackageGrids}
- **All Grids**
- - Allow applying initial filtering through
-
-
-
-
- property
+ - Allow applying initial filtering through property
### Bug Fixes
| Bug Number | Control | Description |
|------------|---------|------------------|
-|25602 | `IgbDataGrid` | Loading a layout with one of the date-specific filter operators results in a TypeError console error|
+|25602 | | Loading a layout with one of the date-specific filter operators results in a TypeError console error|
|28480 | `IgbCombo` | Undefined reference error is thrown when a datasource is replaced|
-|32598 | `IgbDataGrid` | Multi-selection is not working correctly
-|36374 | `IgbInput` | A previous value was bound when a form was submitted on any touch device|
+|32598 | | Multi-selection is not working correctly
+|36374 | | A previous value was bound when a form was submitted on any touch device|
|37214|General|Intermittent error in Blazor's WebCallback.Register()
## **{PackageVerChanges-24-2-MAR}**
@@ -665,14 +622,14 @@ For more details please visit:
### {PackageGrids}
- **All Grids**
- - Added new for the columns of the grid, allowing the developers to skip some of the summaries
+ - Added new for the columns of the grid, allowing the developers to skip some of the summaries
- Encapsulate internal grid action button
### Bug Fixes
| Bug Number | Control | Description |
|------------|---------|------------------|
-|35497 | `IgbDialog` | When ShowAsync and HideAsync Are Called, the Subsequent Code Is Not Executed|
+|35497 | | When ShowAsync and HideAsync Are Called, the Subsequent Code Is Not Executed|
## **{PackageVerChanges-24-2-FEB}**
@@ -680,9 +637,9 @@ For more details please visit:
#### Toolbar
-- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions.
-- Added new property on called which controls the horizontal alignment of the title text.
-- Added new property on called which controls the spacing between items inside the panel.
+- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions.
+- Added new property on called which controls the horizontal alignment of the title text.
+- Added new property on called which controls the spacing between items inside the panel.
### Bug Fixes
@@ -691,18 +648,18 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
| Bug Number | Control | Description |
|------------|---------|------------------|
|29998 | `IgbCombo` | The Change event callback was fired multiple times in .NET 8|
-|30286 | `IgbDataChart` | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
-|34776 | `IgbDataChart` | Repeatedly showing and hiding the IgbDataChart causes memory leakage in JS Heap|
-|32906 | `IgbDataChart` | IgbDataChart is showing two xAxis on the top|
-|33605 | `IgbDataChart` | ScatterLineSeries is not showing the color of the line correctly in the legend|
-|35498 | `IgbDataChart` | Tooltips for the series specified in IncludedSeries are not displayed|
-|31344 | `IgbGrid` | Two way binding for the SelectedRows doesn't work|
-|34149 | `IgbGrid` | Repeatedly showing and hiding the IgbGrid causes memory leakage in JS Heap|
-|34224 | `IgbGrid` | 'There are multiple .NET runtimes present' error is thrown when the app changes from Server mode to WebAssembly mode if 'InteractiveAuto' is used for the render mode|
-|34654 | `IgbGrid` | NullReferenceException is thrown if a data contains an empty list|
-|35439 | `IgbGrid` | CPU usage and Memory consumption are abnormally high when the app is opened in multiple tabs|
-|36024 | `IgbGrid` | The JS heap size never reduced when moving back and forth between two pages with IgbGrid component|
-|34053 | `IgbRadialGauge` | The position of the scale label is shifted|
+|30286 | | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
+|34776 | | Repeatedly showing and hiding the IgbDataChart causes memory leakage in JS Heap|
+|32906 | | IgbDataChart is showing two xAxis on the top|
+|33605 | | ScatterLineSeries is not showing the color of the line correctly in the legend|
+|35498 | | Tooltips for the series specified in IncludedSeries are not displayed|
+|31344 | | Two way binding for the SelectedRows doesn't work|
+|34149 | | Repeatedly showing and hiding the IgbGrid causes memory leakage in JS Heap|
+|34224 | | 'There are multiple .NET runtimes present' error is thrown when the app changes from Server mode to WebAssembly mode if 'InteractiveAuto' is used for the render mode|
+|34654 | | NullReferenceException is thrown if a data contains an empty list|
+|35439 | | CPU usage and Memory consumption are abnormally high when the app is opened in multiple tabs|
+|36024 | | The JS heap size never reduced when moving back and forth between two pages with IgbGrid component|
+|34053 | | The position of the scale label is shifted|
|36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function|
|36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load|
|26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file|
@@ -736,18 +693,18 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
### General
- New [Carousel](layouts/carousel.md) component.
--
- - Changed `change` event argument type from to
+-
+ - Changed `change` event argument type from to
## **{PackageVerChanges-24-1-SEP}**
### {PackageCharts} (Charts)
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
--
+-
- New ToolActionCheckboxList
A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed.
@@ -764,219 +721,124 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- New [Banner](notifications/banner.md) component.
- New [DatePicker](scheduling/date-picker.md) component.
-- New component.
--
- - Added method. This allows to register and replace icons by SVG files.
+- New component.
+-
+ - Added method. This allows to register and replace icons by SVG files.
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
-- , , , , , , , , **IgbSelectComponent**
- - Toggle methods , , methods return **true** now on success. Otherwise **false**.
--
- - Added and properties. also supports two-way binding.
+- , , , , , , , , **IgbSelectComponent**
+ - Toggle methods , , methods return **true** now on success. Otherwise **false**.
+-
+ - Added and properties. also supports two-way binding.
**Breaking Changes**
- Renamed old **IgbDatePicker** to **IgbXDatePicker**.
-- Removed component. Use native form instead.
+- Removed component. Use native form instead.
- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components:
- - , , , , , , , , , , , ,
-- , , ,
- - Renamed property type to `StyleVariant`.
--
- - Renamed property type to `WeekDays`.
-- ,
- - Changed `Change` event argument type from to
-
-
-
-
- .
--
- - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type.
- - Removed
-
-
-
-
- , , properties.
+ - , , , , , , , , , , , ,
+- , , ,
+ - Renamed property type to .
+-
+ - Renamed property type to .
+- ,
+ - Changed `Change` event argument type from to .
+-
+ - The `IgbCombo` is now of generic type and the type is now of type `T[]`. This means that either you need to specify `T` or it will be inferred by the assigned type.
+ - Removed , , properties.
- **IgbSelectComponent**
- - Removed
-
-
-
-
- , , properties.
--
- - Removed `MaxValue` and `MinValue` properties. Use and instead.
--
- - Removed
-
-
-
-
- property.
--
- - Removed old named `Maxlength` and `Minlength` properties. Use and .
- - Removed old named `Readonly` and `Inputmode` properties. Use and .
- - Changed type also to `string`.
--
- - Changed `Change` event argument type from to
-
-
-
-
- .
--
- - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead.
--
- - Renamed `Readonly` property to .
+ - Removed , , properties.
+-
+ - Removed `MaxValue` and `MinValue` properties. Use and instead.
+-
+ - Removed property.
+-
+ - Removed old named `Maxlength` and `Minlength` properties. Use and .
+ - Removed old named `Readonly` and `Inputmode` properties. Use and .
+ - Changed type also to `string`.
+-
+ - Changed `Change` event argument type from to .
+-
+ - Removed `AriaThumbLower` and `AriaThumbUpper` properties. Use and instead.
+-
+ - Renamed `Readonly` property to .
### {PackageGrids}
- **All Grids**
- Added `GetColumns` / `GetColumnsAsync` methods, which return the grid columns collection.
- Added new `RowClick` event.
--
- - Added property for a
-
-
-
-
- .
- - Added horizontal layout. Can be enabled inside the new property as `RowLayout` `Horizontal`.
- - Added row dimension summaries for horizontal layout only. Can be enabled for each
-
-
-
-
- by setting
-
-
-
-
- to **true**.
- - Added `HorizontalSummariesPosition` property to the , configuring horizontal summaries position.
- - Added row headers for the row dimensions. Can be enabled inside the new property as `ShowHeaders` **true**.
+-
+ - Added property for a .
+ - Added horizontal layout. Can be enabled inside the new property as `RowLayout` `Horizontal`.
+ - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting to **true**.
+ - Added `HorizontalSummariesPosition` property to the , configuring horizontal summaries position.
+ - Added row headers for the row dimensions. Can be enabled inside the new property as `ShowHeaders` **true**.
- Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
- Added keyboard interactions for row dimension collapse using ALT + ↑ ↓ ← → arrows and row headers sorting using CTRL + ↑ ↓ arrows.
**Breaking Changes**
- **All Grids**
- -
+ -
- Removed `DisplayDensity` deprecated property.
- - Renamed , , `ContentColumns` properties to , and `ContentColumnList`. Recommended to use the new `GetColumns` method instead.
- - Renamed `RowDelete` and `RowAdd` event argument type to
-
-
-
-
-
-
-
- .
- - Renamed `ContextMenu` event argument type to
-
-
-
-
-
-
-
- .
- - Removed
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
- events `RowID` and properties. Use `RowKey` instead.
--
- - removed `ShowPivotConfigurationUI` property. Use and set inside it the new `ShowConfiguration` option.
--
- - Removed `Movable` property. Use Grid's property now.
- - Removed `ColumnChildren` property. Use instead.
--
- - Removed property. Use instead.
--
- - Removed `IsFirstPageDisabled` and `IsLastPageDisabled` properties. Use and instead.
+ - Renamed , , `ContentColumns` properties to , and `ContentColumnList`. Recommended to use the new `GetColumns` method instead.
+ - Renamed `RowDelete` and `RowAdd` event argument type to .
+ - Renamed `ContextMenu` event argument type to .
+ - Removed , , events `RowID` and properties. Use `RowKey` instead.
+-
+ - removed `ShowPivotConfigurationUI` property. Use and set inside it the new `ShowConfiguration` option.
+-
+ - Removed `Movable` property. Use Grid's property now.
+ - Removed `ColumnChildren` property. Use instead.
+-
+ - Removed property. Use instead.
+-
+ - Removed `IsFirstPageDisabled` and `IsLastPageDisabled` properties. Use and instead.
## **{PackageVerChanges-24-1-JUN}**
### General
-- , - exposed to enable validation rules being enforced without restricting user input.
-- -
-
-
-
-
- property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
-- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
+- , - exposed to enable validation rules being enforced without restricting user input.
+- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
+- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
### {PackageGrids}
- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more.
-- - The type of Columns, Rows, Filters from
-
-
-
-
- option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously.
+- - The type of Columns, Rows, Filters from option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously.
-The type of Values from
-
-
-
-
- option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously.
+The type of Values from option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously.
### {PackageCharts} (Charts)
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
+- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via .
+- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via .
-- - New option for ToolAction for outlining a border around specific tools of choice.
+- - New option for ToolAction for outlining a border around specific tools of choice.
### {PackageGauges} (Gauges)
--
- - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
+-
+ - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
## **{PackageVerChanges-23-2-APR2}**
### {PackageCharts} (Charts)
-Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
+Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
--
- - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
--
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
--
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
+-
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
## **{PackageVerChanges-23-2-APR}**
@@ -992,31 +854,31 @@ Data Filtering via the
- - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges.
- - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`.
- - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`.
--
+-
+ - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges.
+ - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`.
+ - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`.
+-
- Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`.
--
+-
- `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application.
-- ,
+- ,
- exposed `selectedItem`, `items` and `groups` getters
--
- - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
- - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
+ - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
- `RadialChart`
- New Label Mode
- The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
+ The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
### General
-- , , ,
- - `Readonly` has been renamed to
--
- - `Maxlength` has been renamed to
- - `Minlength` has been renamed to
+- , , ,
+ - `Readonly` has been renamed to
+-
+ - `Maxlength` has been renamed to
+ - `Minlength` has been renamed to
### Deprecations
@@ -1028,18 +890,18 @@ Data Filtering via the
- - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead.
--
- - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead.
+-
+ - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead.
+-
+ - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead.
### Removed
- Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change.
-- - `ariaLabel` shadowed property. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabel` shadowed property. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
## **{PackageVerChanges-23-2-JAN}**
@@ -1049,14 +911,14 @@ Data Filtering via the and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
## **{PackageVerChanges-23-2}**
### {PackageGrids} - Toolbar -
- Save tool action has been added to save the chart to an image via the clipboard.
-- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
+- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
### {PackageGrids} (Grid)
@@ -1067,13 +929,13 @@ Data Filtering via the [Toolbar](menus/toolbar.md) - component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tools when linked to our or components, but it also gives you the ability to create custom tools for your project.
+- [Toolbar](menus/toolbar.md) - component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tools when linked to our or components, but it also gives you the ability to create custom tools for your project.
### {PackageCharts} (Charts)
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
+- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
-- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
## **{PackageVerChanges-22-2.65}**
### New Components
@@ -1087,12 +949,7 @@ Data Filtering via the has been introduced to `IgbRowDataEventArgs` from
-
-
-
-
- , and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null.
+- A new argument has been introduced to from , and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to null.
- `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted.
- When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object.
- When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted.
@@ -1101,15 +958,15 @@ Data Filtering via the properties `InBaseDimension` and `InOption` have been deprecated and renamed to `BaseDimension` and `Options` respectively.
### {PackageInputs} (Inputs)
-- `IgbDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart
-- `IgbRadio` and `IgbRadioGroup`, added component validation along with styles for invalid state
+- , the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart
+- and , added component validation along with styles for invalid state
- `IgbMask`, added the capability to escape mask pattern literals.
-- `IgbBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded.
-- `IgbAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is .
+- added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded.
+- , the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is .
### {PackageDockManager} (DockManager)
@@ -1137,7 +994,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
- Responsive layouts for horizontal label rotation based on browser / screen size.
- Enhanced rendering for rounded labels on all platforms.
- Added marker properties to StackedFragmentSeries.
-- Added property.
+- Added property.
- New Category Axis Properties:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
@@ -1158,33 +1015,33 @@ Added significant improvements to default behaviors, and refined the Category Ch
- GroupSortDescriptions
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
### {PackageGrids} (Data Grid)
-- Changed **{IgPrefix}Column** to
-- Changed **GridCellEventArgs** to
-- Changed **GridSelectionMode** to
-- Changed **SummaryOperand** to `DataSourceSummaryOperand`
+- Changed **{IgPrefix}Column** to
+- Changed **GridCellEventArgs** to
+- Changed **GridSelectionMode** to
+- Changed **SummaryOperand** to
## **{PackageVerChanges-22-1}**
### {PackageCharts} (Charts)
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
-- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
-- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
-- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
+- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
+- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
+- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
- - for CalloutLayer
- - for FinalValueLayer
- - and for CrosshairLayer
-- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
-- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
-- New determines whether to include the spline shape in the axis range requested of the axis.
-- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
-- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
+ - for CalloutLayer
+ - for FinalValueLayer
+ - and for CrosshairLayer
+- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
+- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
+- New determines whether to include the spline shape in the axis range requested of the axis.
+- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
+- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
### {PackageGrids} (Data Grid)
@@ -1212,11 +1069,11 @@ The following breaking changes were introduced
### {PackageGrids} (Data Grid)
-- Changed property from type string[] to string.
+- Changed property from type string[] to string.
### {PackageInputs} (Inputs)
-- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value.
+- A new `ValueChanged` event supports 2-way binding and should only be handled if you have not bound the property. In order to read the Value field from the control without data binding the `ValueChanged` event should be handled, otherwise if your data is not bound you should use GetCurrentValueAsync to read the controls Value.
#### Date Picker
- Changed `ValueChanged` event to `SelectedValueChanged`.
@@ -1253,29 +1110,29 @@ For example, ``` ``` instead of ``` ```
This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
-- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
-- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
-- Added property to
-- Added support for representing geographic series of in a legend
-- Added crosshair lines by default in and
-- Added crosshair annotations by default in and
-- Added final value annotation by default in
+- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
+- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
+- Added property to
+- Added support for representing geographic series of in a legend
+- Added crosshair lines by default in and
+- Added crosshair annotations by default in and
+- Added final value annotation by default in
- Added new properties in Category Chart and Financial Chart:
- - and other properties for customizing crosshairs lines
- - and other properties for customizing crosshairs annotations
- - and other properties for customizing final value annotations
- - that allow changing opacity of series fill (e.g. Area chart)
- - that allows changing thickness of markers
+ - and other properties for customizing crosshairs lines
+ - and other properties for customizing crosshairs annotations
+ - and other properties for customizing final value annotations
+ - that allow changing opacity of series fill (e.g. Area chart)
+ - that allows changing thickness of markers
- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
- - that allows which marker type is assigned to multiple series in the same chart
- - for setting badge shape of all series represented in a legend
- - for setting badge complexity on all series in a legend
+ - that allows which marker type is assigned to multiple series in the same chart
+ - for setting badge shape of all series represented in a legend
+ - for setting badge complexity on all series in a legend
- Added new properties in Series in Data Chart and Geographic Map:
- - for setting badge shape on specific series represented in a legend
- - for setting badge complexity on specific series in a legend
+ - for setting badge shape on specific series represented in a legend
+ - for setting badge complexity on specific series in a legend
- Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series
-- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
-- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
+- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
+- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
- Changed color palette of series and markers displayed in all charts to improve accessibility
| Old brushes/outlines | New outline/brushes |
@@ -1293,38 +1150,38 @@ This release introduces a few improvements and simplifications to visual design
- Added `SelectionChanged` event. Used to detect changes on selection interactions
e.g. Multiple row selection.
- Breaking Changes:
- - Changed grid's SummaryScope property's type to SummaryScope from `DataSourceSummaryScope`
- - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from `DataSourceSectionHeaderDisplayMode`
+ - Changed grid's SummaryScope property's type to SummaryScope from
+ - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from
## **{PackageVerChanges-21-1}**
### New Visual Designs
#### Charts & Maps
-This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
+This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
- Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000
- Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879
- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879
- Changed marker's thickness to 2px from 1px
-- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
-- Compressed labelling for the and
+- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
+- Compressed labelling for the and
- New Marker Properties:
- - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
- - series. - Can be set to a value 0 to 1
- - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
+ - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
+ - series. - Can be set to a value 0 to 1
+ - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
- New Series Property:
- - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
-- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
- - chart.
- - chart.
- - chart.
- - chart.
- - chart.
+ - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
+- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
+ - chart.
+ - chart.
+ - chart.
+ - chart.
+ - chart.
- New Highlighting Properties
- - chart. - Sets whether hovered or non-hovered series to fade, brighten
- - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
+ - chart. - Sets whether hovered or non-hovered series to fade, brighten
+ - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
- Note, in previous releases the highlighting was limited to fade on hover.
- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
@@ -1347,8 +1204,8 @@ for example:
#### Chart Legend
-- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
-- Added property - Enables series highlighting when hovering over legend items
+- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
+- Added property - Enables series highlighting when hovering over legend items
#### Geographic Map
@@ -1363,29 +1220,29 @@ These features are CTP
### {PackageGrids} (Data Grid)
-- Added aka Excel-style Editing, instantly begin editing when typing.
-- Added property - By default double-clicking is required to enter edit mode. This can be set to to allow for edit mode to occur when selecting a new cell.
-- Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
-- Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
-- Added - method.
-- Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included:
+- Added aka Excel-style Editing, instantly begin editing when typing.
+- Added property - By default double-clicking is required to enter edit mode. This can be set to to allow for edit mode to occur when selecting a new cell.
+- Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
+- Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
+- Added - method.
+- Added Row Range Selection - With property set to MultipleRow the following new functionality is now included:
- Click and drag to select rows
- SHIFT and click to select multiple rows.
- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows.
-- Pressing space bar toggles selection of active row via `GridSelectionMode` property set to MultipleRow or SingleRow
+- Pressing space bar toggles selection of active row via property set to MultipleRow or SingleRow
- Added Column Summaries to Column Options Dialog.
### {PackageInputs} (Inputs)
#### Date Picker
-- - Toggles Today button visibility
-- - Adds a label above the date value
-- property - adds custom text when no value is selected
-- - Customize input date string e.g. (`yyyy-MM-dd`)
-- - Specifies whether to display selected dates as LongDate or ShortDate
-- - Specifies first day of week
-- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
-- - Toggles Week number visibility
-- & - Date limits, specifying a range of available selectable dates.
+- - Toggles Today button visibility
+- - Adds a label above the date value
+- property - adds custom text when no value is selected
+- - Customize input date string e.g. (`yyyy-MM-dd`)
+- - Specifies whether to display selected dates as LongDate or ShortDate
+- - Specifies first day of week
+- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
+- - Toggles Week number visibility
+- & - Date limits, specifying a range of available selectable dates.
- Added Accessibility
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
index b81fa9b257..2f6f56dd89 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
@@ -30,8 +30,8 @@ All notable changes for each version of {ProductName} are documented on this pag
#### Changed
-- : Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210).
-- Updated to use the latest `igniteui-webcomponents@7.1.0` including new and `Highlight` container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19).
+- : Updated to use the latest `igniteui-dockmanager@2.1.0` with new `minResizeWidth` and `minResizeHeight` properties, `paneFlyoutToggle` event; additional `layoutChange` event detail and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-dockmanager/blob/master/CHANGELOG.md#210).
+- Updated to use the latest `igniteui-webcomponents@7.1.0` including new and container components and fixes. See the [full changelog](https://github.com/IgniteUI/igniteui-webcomponents/blob/master/CHANGELOG.md#710---2026-03-19).
#### New Features
@@ -94,18 +94,18 @@ All notable changes for each version of {ProductName} are documented on this pag
### {PackageGrids} (Grids)
-- , , ,
+- , , ,
- Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid.
**Breaking Changes**
-- , , ,
+- , , ,
- Original `data` array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array reference change for the change to be detected.
**Localization(i18n)**
-- , , , , , , , , , , ,
- - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and .
+- , , , , , , , , , , ,
+ - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and .
- New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages.
- New public localization API and package named `igniteui-i18n-resources` containing the new resources that are used in conjunction.
@@ -161,9 +161,9 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti
#### User Annotations
-In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
+In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-This is directly integrated with the available tools of the .
+This is directly integrated with the available tools of the .
@@ -171,8 +171,8 @@ This is directly integrated with the available tools of the
--
+-
+-
### {PackageMaps} (Geographic Map)
@@ -191,10 +191,10 @@ Ability for axis annotations to automatically detect collisions and truncate to
### New Components
-- Added `Chat` component
+- Added component
### {PackageGrids} (Grids)
-- , ,
+- , ,
- Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
It can be enabled on the individual columns:
@@ -277,7 +277,7 @@ Ability for axis annotations to automatically detect collisions and truncate to
#### Azure Map Imagery Support
-The `IgbGeographicMap` now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
+The now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps.
@@ -287,7 +287,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
#### New Axis Label Events
-The following events have been added to the `IgbDataChart` to allow you to detect different operations on the axis labels:
+The following events have been added to the to allow you to detect different operations on the axis labels:
- `LabelMouseDown`
- `LabelMouseUp`
@@ -298,34 +298,34 @@ The following events have been added to the `IgbDataChart` to allow you to detec
#### Companion Axis
-Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
+Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
#### RadialPieSeries Inset Outlines
-There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
+There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
**Breaking Changes**
-- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
+- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
### {PackageGrids} (Grids)
#### Cell Suffix Content
-Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
+Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
--
--
+-
+-
- `SuffixTextFont`
--
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
+-
Please note that the maximum size available for the icons is 24x24. You can provide an icon that is larger or smaller than this, but you will need to configure the viewbox settings in order to properly scale it to fit in the 24x24 space so it is fully visible.
@@ -333,28 +333,28 @@ Please note that the maximum size available for the icons is 24x24. You can prov
| Bug Number | Control | Description |
|------------|---------|-------------|
-|31624 | | Resizing the containing window of the causes the chart to fail to render the series|
-|27304 | | Zoom rectangle is not positioned the same as the background rectangle|
-|37930 | | Data Annotation Overlay Text Color not working|
-|30600 | | No textStyle property for either the chart or series (pie chart has this)|
-|38231 | | Unpinned column does not return to the original position if hidden columns exist|
+|31624 | | Resizing the containing window of the causes the chart to fail to render the series|
+|27304 | | Zoom rectangle is not positioned the same as the background rectangle|
+|37930 | | Data Annotation Overlay Text Color not working|
+|30600 | | No textStyle property for either the chart or series (pie chart has this)|
+|38231 | | Unpinned column does not return to the original position if hidden columns exist|
|33861 | Excel Library | Adding line chart corrupts excel File for German culture|
### Enhancements
#### IgrBulletGraph
-- Added new property
+- Added new property
#### Charts
- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness`
-- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
+- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
-- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
+- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
-- Added to and . This allows you to configure the opacity applied to highlighted series.
+- Added to and . This allows you to configure the opacity applied to highlighted series.
- Expose `CalloutLabelUpdating` event for domain charts.
@@ -364,7 +364,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
#### IgrLinearGauge
-- Added new property
+- Added new property
## **{PackageVerChanges-25-1-SEP}**
@@ -457,7 +457,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
| Bug Number | Control | Description |
|------------|---------|------------------|
-|36448 | | Radial label format properties do not work. (eg. Title, SubTitles)|
+|36448 | | Radial label format properties do not work. (eg. Title, SubTitles)|
### {PackageCharts} (Charts)
@@ -483,23 +483,23 @@ For more details please visit:
- Data Annotation Slice Layer
- Data Annotation Strip Layer
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
-- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
+- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
-- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
- [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
### {PackageDashboards} (Dashboards)
-- The now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the to an instance of .
+- The now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the of the to an instance of .
### {PackageGrids}
**Breaking Changes**
-- The `DataGrid` & are now part of the igniteui-react-data-grids package.
+- The & are now part of the igniteui-react-data-grids package.
### Enhancements
@@ -514,9 +514,9 @@ For more details please visit:
| Bug Number | Control | Description |
|------------|---------|------------------|
-|25997 | `DataGrid` | Summaries are only showing for first grouped child row|
-|37023 | | Tooltips are cut-off/offscreen if overflow hidden is set.|
-|37685 | `Spreadsheet` | Poor rendering of numbers formatted with Arial font.|
+|25997 | | Summaries are only showing for first grouped child row|
+|37023 | | Tooltips are cut-off/offscreen if overflow hidden is set.|
+|37685 | | Poor rendering of numbers formatted with Arial font.|
|37244 | Excel Library | Custom Data Validation is not working.|
## **{PackageVerChanges-24-2-APR2}**
@@ -527,11 +527,11 @@ With 19.0.0 the React product introduces many breaking changes done to improve a
[Update Guide](update-guide.md)
### Removed
-- removed, use instead.
-- removed, use instead.
-- removed, use instead.
-- `ActiveStepChangingArgs` removed, use instead.
-- `ActiveStepChangedArgs` removed, use instead.
+- removed, use instead.
+- removed, use instead.
+- removed, use instead.
+- `ActiveStepChangingArgs` removed, use instead.
+- `ActiveStepChangedArgs` removed, use instead.
### Enhancements
@@ -553,29 +553,29 @@ igr-tab-panel component is removed. The igr-tab now encompasses both the tab hea
### Enhancements
#### List
-- Added new property on called
+- Added new property on called
#### Accordion
-- Added new events and `Close`
+- Added new events and `Close`
### {PackageGrids}
- **All Grids**
- - Allow applying initial filtering through property
+ - Allow applying initial filtering through property
### Deprecations
-- The `clicked` event of the is deprecated. Use the native `onClick` handler.
+- The `clicked` event of the is deprecated. Use the native `onClick` handler.
### Bug Fixes
| Bug Number | Control | Description |
|------------|---------|------------------|
-|25602 | `DataGrid` | Loading a layout with one of the date-specific filter operators results in a TypeError console error|
-|28480 | | Undefined reference error is thrown when a datasource is replaced|
-|30319 | `DataGrid` | Records are sorted despite no value changed|
-|32598 | `DataGrid` | Multi-selection is not working correctly
-|36374 | | A previous value was bound when a form was submitted on any touch device|
+|25602 | | Loading a layout with one of the date-specific filter operators results in a TypeError console error|
+|28480 | | Undefined reference error is thrown when a datasource is replaced|
+|30319 | | Records are sorted despite no value changed|
+|32598 | | Multi-selection is not working correctly
+|36374 | | A previous value was bound when a form was submitted on any touch device|
## **{PackageVerChanges-24-2-MAR}**
@@ -596,15 +596,15 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
### {PackageCommon}
- Added new `allowSplitterDock` property for `Dockmanager` that allows docking directly in a split.
-- Added new `useFixedSize` property for the of `Dockmanager` that allows new resize behavior.
+- Added new `useFixedSize` property for the of `Dockmanager` that allows new resize behavior.
### Enhancements
#### Toolbar
-- Added new `groupHeaderTextStyle` property to and . If set, it will apply to all actions.
-- Added new property on called which controls the horizontal alignment of the title text.
-- Added new property on called `itemSpacing` which controls the spacing between items inside the panel.
+- Added new `groupHeaderTextStyle` property to and . If set, it will apply to all actions.
+- Added new property on called which controls the horizontal alignment of the title text.
+- Added new property on called `itemSpacing` which controls the spacing between items inside the panel.
### Bug Fixes
@@ -612,16 +612,16 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
| Bug Number | Control | Description |
|------------|---------|------------------|
-|30286 | | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
-|32906 | | is showing two xAxis on the top|
-|33605 | | ScatterLineSeries is not showing the color of the line correctly in the legend|
-|34776 | | Repeatedly showing and hiding the causes memory leakage in JS Heap|
-|35498 | | Tooltips for the series specified in IncludedSeries are not displayed|
-|34324 | | Column hiding through condition in the grid template is not working|
-|34678 | | Enum values coerced to strings, breaking expected numeric behavior in some grid properties|
-|32093 | | PivotDateDimensionOptions are not applied to the PivotDateDimension|
-|34053 | | The position of the scale label is shifted|
-|35496 | `Spreadsheet` | Error when setting styles in Excel with images|
+|30286 | | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
+|32906 | | is showing two xAxis on the top|
+|33605 | | ScatterLineSeries is not showing the color of the line correctly in the legend|
+|34776 | | Repeatedly showing and hiding the causes memory leakage in JS Heap|
+|35498 | | Tooltips for the series specified in IncludedSeries are not displayed|
+|34324 | | Column hiding through condition in the grid template is not working|
+|34678 | | Enum values coerced to strings, breaking expected numeric behavior in some grid properties|
+|32093 | | PivotDateDimensionOptions are not applied to the PivotDateDimension|
+|34053 | | The position of the scale label is shifted|
+|35496 | | Error when setting styles in Excel with images|
|36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function|
|36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load|
|26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file|
@@ -653,18 +653,18 @@ DashboardTile
### General
- New [Carousel](layouts/carousel.md) component.
--
- - Changed `change` event argument type from to
+-
+ - Changed `change` event argument type from to
## **{PackageVerChanges-24-1-SEP}**
### {PackageCharts} (Charts)
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
--
+-
- New ToolActionCheckboxList
A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed.
@@ -681,55 +681,55 @@ DashboardTile
- New [Banner](notifications/banner.md) component.
- New [DatePicker](scheduling/date-picker.md) component.
-- New component.
+- New component.
- Added support for native events to all components.
--
- - Added `setIconRef` method. This allows to register and replace icons by SVG files.
+-
+ - Added method. This allows to register and replace icons by SVG files.
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
-- , , , , , , , , **IgrSelectComponent**
+- , , , , , , , , **IgrSelectComponent**
- Toggle methods `show`, `hide`, `toggle` methods return **true** now on success, otherwise **false**.
-- **IgrButtonComponent**, , , , , , , , , **IgrSelectComponent**,
+- **IgrButtonComponent**, , , , , , , , , **IgrSelectComponent**,
- Deprecated custom `focus` and `blur` events. Use the native `onFocus` and `onBlur` events instead
--
- - Added and properties.
+-
+ - Added and properties.
**Breaking Changes**
- Renamed old **IgrDatePicker** to **IgrXDatePicker**.
-- Removed component. Use native form instead.
+- Removed component. Use native form instead.
- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components:
- - , **IgrButtonComponent**, , , , , , , , , , ,
-- , , ,
- - Renamed property type to `StyleVariant`.
--
- - Renamed property type to `WeekDays`.
-- ,
- - Changed `change` event argument type from to .
-- , **IgrSelectComponent**
+ - , **IgrButtonComponent**, , , , , , , , , , ,
+- , , ,
+ - Renamed property type to .
+-
+ - Renamed property type to .
+- ,
+ - Changed `change` event argument type from to .
+- , **IgrSelectComponent**
- Removed `positionStrategy`, `flip`, `sameWidth` properties.
--
+-
- Removed `maxValue` and `minValue` properties. Use `max` and `min` instead.
--
+-
- Removed `positionStrategy` property.
--
+-
- Removed old named `maxlength` and `minlength` properties. Use `maxLength` and `minLength`.
- Removed old named `readonly` and `inputmode` properties. Use `readOnly` and `inputMode`.
- Changed `inputMode` type also to `string`.
--
- - Changed `change` event argument type from to .
--
+-
+ - Changed `change` event argument type from to .
+-
- Removed `ariaThumbLower` and `ariaThumbUpper` properties. Use `thumbLabelLower` and `thumbLabelUpper` instead.
--
+-
- Renamed `readonly` property to `readOnly`.
### {PackageGrids}
- **All Grids**
- Added new `RowClick` event.
--
- - Added `sortable` property for a .
+-
+ - Added `sortable` property for a .
- Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`.
- - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**.
+ - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**.
- Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position.
- Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**.
- Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
@@ -738,127 +738,127 @@ DashboardTile
**Breaking Changes**
- **All Grids**
- -
+ -
- Removed `displayDensity` deprecated property.
- Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `columns` or `columnList` property to get all columns now.
- - Renamed `rowDelete` and `rowAdd` event argument type to .
- - Renamed `contextMenu` event argument type to .
- - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead.
--
+ - Renamed `rowDelete` and `rowAdd` event argument type to .
+ - Renamed `contextMenu` event argument type to .
+ - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead.
+-
- removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option.
--
+-
- Removed `movable` property. Use Grid's `moving` property now.
- Removed `columnChildren` property. Use `childColumns` instead.
--
+-
- Removed `children` property. Use `childColumns` instead.
--
+-
- Removed `isFirstPageDisabled` and `isLastPageDisabled` properties. Use `isFirstPage` and `isLastPage` instead.
## **{PackageVerChanges-24-1-JUN}**
### {PackageCommon}
-- , - exposed to enable validation rules being enforced without restricting user input.
-- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
-- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
+- , - exposed to enable validation rules being enforced without restricting user input.
+- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
+- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
### {PackageGrids}
- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more.
-- - Configuration of the component can now be applied correctly.
+- - Configuration of the component can now be applied correctly.
### {PackageCharts} (Charts)
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
+- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`.
-- - New option for ToolAction for outlining a border around specific tools of choice.
+- - New option for ToolAction for outlining a border around specific tools of choice.
### {PackageGauges} (Gauges)
--
- - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
+-
+ - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
## **{PackageVerChanges-23-2-MAR}**
### {PackageCharts}
-- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
+- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
- `RadialChart`
- New Label Mode
- The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
+ The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
### {PackageGrids}
-- New [ ](grids/hierarchical-grid/overview.md) component
+- New [ ](grids/hierarchical-grid/overview.md) component
### {PackageGauges}
--
- - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
- - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
--
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
--
- - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
+-
+ - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
+ - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
### {PackageCommon}
-- New component
-- New component
--
- - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges.
- - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`.
- - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`.
-- , , ,
- - `Readonly` has been renamed to
--
- - `Maxlength` has been renamed to
- - `Minlength` has been renamed to
--
+- New component
+- New component
+-
+ - New property. If enabled, docking indicators are not visible and the end user can dock the dragged pane by dragging it close to the target pane edges.
+ - New property. Determines whether the floating panes are kept inside the Dock Manager boundaries. Defaults to `false`.
+ - New property. Determines whether pane headers are only shown on hover or always visible. Defaults to `always`.
+- , , ,
+ - `Readonly` has been renamed to
+-
+ - `Maxlength` has been renamed to
+ - `Minlength` has been renamed to
+-
- Added `toggleNodeOnClick` property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`.
--
+-
- `allowReset` added. When enabled selecting the same value will reset the component. **Behavioral change** - In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application.
-- ,
+- ,
- exposed `selectedItem`, `items` and `groups` getters
#### Deprecations
-- The component has been deprecated. Please, use the native form element instead.
+- The component has been deprecated. Please, use the native form element instead.
- The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the avatar component to small:
```css
.avatar {
--ig-size: var(--ig-size-small);
}
```
--
- - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead.
--
- - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead.
+-
+ - `MinValue` and `MaxValue` properties have been deprecated. Please, use and instead.
+-
+ - `AriaLabelLower` and `AriaLabelUpper` properties have been deprecated. Please, use and instead.
#### Removed
- Removed our own `dir` attribute which shadowed the default one. This is a non-breaking change.
-- - `ariaLabel` shadowed property. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
-- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabel` shadowed property. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
+- - `ariaLabelledBy` shadowed attribute. This is a non-breaking change.
## **{PackageVerChanges-23-2-JAN}**
### {PackageCharts} (Charts)
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
## **{PackageVerChanges-23-2-DEC}**
@@ -871,7 +871,7 @@ DashboardTile
### {PackageGrids} - Toolbar -
- Save tool action has been added to save the chart to an image via the clipboard.
-- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
+- Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
- [Grid](grids/data-grid.md) - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns.
@@ -884,13 +884,13 @@ DashboardTile
### New Components
-- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
### {PackageCharts} (Charts)
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
+- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
-- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
## **{PackageVerChanges-22-2}**
@@ -899,7 +899,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
- Responsive layouts for horizontal label rotation based on browser / screen size.
- Enhanced rendering for rounded labels on all platforms.
- Added marker properties to StackedFragmentSeries.
-- Added property.
+- Added property.
- New Category Axis Properties:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
@@ -920,32 +920,32 @@ Added significant improvements to default behaviors, and refined the Category Ch
- GroupSortDescriptions
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
### {PackageGrids} (Data Grid)
-- Changed **{IgPrefix}Column** to
-- Changed **GridCellEventArgs** to
-- Changed **GridSelectionMode** to
-- Changed **SummaryOperand** to
+- Changed **{IgPrefix}Column** to
+- Changed **GridCellEventArgs** to
+- Changed **GridSelectionMode** to
+- Changed **SummaryOperand** to
## **{PackageVerChanges-22-1}**
### {PackageCharts} (Charts)
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
-- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
-- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
-- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
+- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
+- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
+- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
- - for CalloutLayer
- - for FinalValueLayer
- - and for CrosshairLayer
-- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
-- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
-- New determines whether to include the spline shape in the axis range requested of the axis.
-- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
-- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
+ - for CalloutLayer
+ - for FinalValueLayer
+ - and for CrosshairLayer
+- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
+- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
+- New determines whether to include the spline shape in the axis range requested of the axis.
+- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
+- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
### {PackageGrids} (Data Grid)
@@ -956,13 +956,13 @@ Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to
### {PackageGrids} (Data Grid)
#### Data Grid
-- Added , of type string[], in the to be used when your items in the drop down contain a key that consists of multiple fields.
+- Added , of type string[], in the to be used when your items in the drop down contain a key that consists of multiple fields.
The following breaking changes were introduced
-- Changed property from type string[] to string.
+- Changed property from type string[] to string.
### {PackageInputs} (Inputs)
@@ -984,29 +984,29 @@ Please ensure package "lit-html": "^2.0.0" or newer is added to your project for
This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
-- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
-- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
-- Added property to
-- Added support for representing geographic series of in a legend
-- Added crosshair lines by default in and
-- Added crosshair annotations by default in and
-- Added final value annotation by default in
+- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
+- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
+- Added property to
+- Added support for representing geographic series of in a legend
+- Added crosshair lines by default in and
+- Added crosshair annotations by default in and
+- Added final value annotation by default in
- Added new properties in Category Chart and Financial Chart:
- - and other properties for customizing crosshairs lines
- - and other properties for customizing crosshairs annotations
- - and other properties for customizing final value annotations
- - that allow changing opacity of series fill (e.g. Area chart)
- - that allows changing thickness of markers
+ - and other properties for customizing crosshairs lines
+ - and other properties for customizing crosshairs annotations
+ - and other properties for customizing final value annotations
+ - that allow changing opacity of series fill (e.g. Area chart)
+ - that allows changing thickness of markers
- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
- - that allows which marker type is assigned to multiple series in the same chart
- - for setting badge shape of all series represented in a legend
- - for setting badge complexity on all series in a legend
+ - that allows which marker type is assigned to multiple series in the same chart
+ - for setting badge shape of all series represented in a legend
+ - for setting badge complexity on all series in a legend
- Added new properties in Series in Data Chart and Geographic Map:
- - for setting badge shape on specific series represented in a legend
- - for setting badge complexity on specific series in a legend
+ - for setting badge shape on specific series represented in a legend
+ - for setting badge complexity on specific series in a legend
- Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series
-- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
-- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
+- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
+- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
- Changed color palette of series and markers displayed in all charts to improve accessibility
| Old brushes/outlines | New outline/brushes |
@@ -1025,37 +1025,37 @@ This release introduces a few improvements and simplifications to visual design
- Added `SelectionChanged` event. Used to detect changes on selection interactions
e.g. Multiple row selection.
- Breaking Changes:
- - Changed grid's SummaryScope property's type to SummaryScope from
- - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from
+ - Changed grid's SummaryScope property's type to SummaryScope from
+ - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from
## **{PackageVerChanges-21-1}**
### {PackageCharts} (Charts)
-This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
+This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
- Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000
- Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879
- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879
- Changed marker's thickness to 2px from 1px
-- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
-- Compressed labelling for the and
+- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
+- Compressed labelling for the and
- New Marker Properties:
- - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
- - series. - Can be set to a value 0 to 1
- - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
+ - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
+ - series. - Can be set to a value 0 to 1
+ - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
- New Series Property:
- - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
-- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
- - chart.
- - chart.
- - chart.
- - chart.
- - chart.
+ - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
+- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
+ - chart.
+ - chart.
+ - chart.
+ - chart.
+ - chart.
- New Highlighting Properties
- - chart. - Sets whether hovered or non-hovered series to fade, brighten
- - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
+ - chart. - Sets whether hovered or non-hovered series to fade, brighten
+ - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
- Note, in previous releases the highlighting was limited to fade on hover.
- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
@@ -1078,8 +1078,8 @@ for example:
#### Chart Legend
-- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
-- Added property - Enables series highlighting when hovering over legend items
+- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
+- Added property - Enables series highlighting when hovering over legend items
### {PackageMaps} (GeoMap)
@@ -1095,31 +1095,31 @@ These features are CTP
### {PackageGrids} (Data Grid)
-- Added aka Excel-style Editing, instantly begin editing when typing.
-- Added property - By default double-clicking is required to enter edit mode. This can be set to `SingleClick` to allow for edit mode to occur when selecting a new cell.
-- Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
-- Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
-- Added - method.
-- Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included:
+- Added aka Excel-style Editing, instantly begin editing when typing.
+- Added property - By default double-clicking is required to enter edit mode. This can be set to `SingleClick` to allow for edit mode to occur when selecting a new cell.
+- Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
+- Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
+- Added - method.
+- Added Row Range Selection - With property set to MultipleRow the following new functionality is now included:
- Click and drag to select rows
- SHIFT and click to select multiple rows.
- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows.
-- Pressing space bar toggles selection of active row via `GridSelectionMode` property set to MultipleRow or SingleRow
+- Pressing space bar toggles selection of active row via property set to MultipleRow or SingleRow
- Added Column Summaries to Column Options Dialog.
### {PackageInputs} (Inputs)
#### Date Picker
-- - Toggles Today button visibility
-- - Adds a label above the date value
-- property - adds custom text when no value is selected
-- - Customize input date string e.g. (`yyyy-MM-dd`)
-- - Specifies whether to display selected dates as LongDate or ShortDate
-- - Specifies first day of week
-- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
-- - Toggles Week number visibility
-- & - Date limits, specifying a range of available selectable dates.
+- - Toggles Today button visibility
+- - Adds a label above the date value
+- property - adds custom text when no value is selected
+- - Customize input date string e.g. (`yyyy-MM-dd`)
+- - Specifies whether to display selected dates as LongDate or ShortDate
+- - Specifies first day of week
+- - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
+- - Toggles Week number visibility
+- & - Date limits, specifying a range of available selectable dates.
- Added Accessibility
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
index 6cf6333ee7..7bf101055e 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
@@ -78,18 +78,18 @@ All notable changes for each version of {ProductName} are documented on this pag
### {PackageGrids} (Grids)
-- `IgcGrid`, `IgcTreeGrid`, `IgcHierarchicalGrid`, `IgcPivotGrid`
+- , , ,
- Improved performance by dynamically adjusting the scroll throttle based on the data displayed in grid.
**Breaking Changes**
-- `IgcGrid`, `IgcTreeGrid`, `IgcHierarchicalGrid`, `IgcPivotGrid`
+- , , ,
- Original `data` array mutations (like adding/removing/moving records in the original array) are no longer detected automatically. Components need an array reference change for the change to be detected.
**Localization(i18n)**
-- `IgcGrid`, `IgcTreeGrid`, `IgcHierarchicalGrid`, `IgcPivotGrid`, `IgcCombo`, `IgcDatePicker`, `IgcDateRangePicker`, `IgcCalendar`, `IgcCarousel`, `IgcChip`, `IgcInput`, `IgcTree`
- - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for `IgcCalendar`, `IgcDatePicker`, and `IgcDateRangePicker` that previously used it in `igniteui-webcomponents`.
+- , , , , , , , , , , ,
+ - New `Intl` implementation for the grid components that format and render data like dates and numbers. Updated `Intl` implementation for , , and that previously used it in `igniteui-webcomponents`.
- New localization implementation for the currently supported languages for all components that have resource strings in the currently supported languages.
- New public localization API and package named `igniteui-i18n-resources` containing the new resources that are used in conjunction.
**PDF export**
@@ -128,9 +128,9 @@ Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and Proporti
#### User Annotations
-In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
+In {ProductName}, you can now annotate the with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-This is directly integrated with the available tools of the .
+This is directly integrated with the available tools of the .
@@ -138,8 +138,8 @@ This is directly integrated with the available tools of the
--
+-
+-
### {PackageMaps} (Geographic Map)
@@ -161,10 +161,10 @@ Ability for axis annotations to automatically detect collisions and truncate to
### New Components
-- Added `Chat` component
+- Added component
### {PackageGrids} (Grids)
-- `IgcGrid`, `IgcTreeGrid`, `IgcHierarchicalGrid`
+- , ,
- Introduced a new cell merging feature that allows you to configure and merge cells in a column based on same data or other custom condition, into a single cell.
It can be enabled on the individual columns:
@@ -250,7 +250,7 @@ Ability for axis annotations to automatically detect collisions and truncate to
#### Azure Map Imagery Support
-The `IgcGeographicMap` now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
+The now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps.
@@ -260,7 +260,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
#### New Axis Label Events
-The following events have been added to the `IgcDataChart` to allow you to detect different operations on the axis labels:
+The following events have been added to the to allow you to detect different operations on the axis labels:
- `LabelMouseDown`
- `LabelMouseUp`
@@ -271,34 +271,34 @@ The following events have been added to the `IgcDataChart` to allow you to detec
#### Companion Axis
-Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
+Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
#### RadialPieSeries Inset Outlines
-There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
+There is a new property called to control how outlines on the are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
**Breaking Changes**
-- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
+- A fix was made due to an issue where the and properties on class were reversed. This will change the values that and return.
### {PackageGrids}
#### Cell Suffix Content
-Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
+Added support for suffix content within the cells that allows you to add additional text or icons to the end of the cell value and style it. The full list of added properties for the cell suffix content is listed below and is available on the and class:
--
--
+-
+-
- `SuffixTextFont`
--
--
--
--
--
--
--
--
--
+-
+-
+-
+-
+-
+-
+-
+-
+-
Please note that the maximum size available for the icons is 24x24. You can provide an icon that is larger or smaller than this, but you will need to configure the viewbox settings in order to properly scale it to fit in the 24x24 space so it is fully visible.
@@ -307,28 +307,28 @@ Please note that the maximum size available for the icons is 24x24. You can prov
| Bug Number | Control | Description |
|------------|---------|-------------|
-|27304| `IgcDataChart` | Zoom rectangle is not positioned the same as the background rectangle|
-|37930| `IgcDataChart` | Data Annotation Overlay Text Color not working|
-|30600| `IgcDoughnutChart` | No textStyle property for either the chart or series (pie chart has this)|
-|31624| `IgcCategoryChart` | Resizing the containing window of the Category Chart causes the chart to fail to render the series|
-|38231| `IgcGrid` | Unpinned column does not return to the original position if hidden columns exist|
+|27304| | Zoom rectangle is not positioned the same as the background rectangle|
+|37930| | Data Annotation Overlay Text Color not working|
+|30600| | No textStyle property for either the chart or series (pie chart has this)|
+|31624| | Resizing the containing window of the Category Chart causes the chart to fail to render the series|
+|38231| | Unpinned column does not return to the original position if hidden columns exist|
|33861| Excel Library | Adding line chart corrupts excel File for German culture|
### Enhancements
#### BulletGraph
-- Added new property
+- Added new property
#### Charts
- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness`
-- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
+- New properties added to the DataLegend to aid in styling: , , and . The and default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
-- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
+- Added a new property to called that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
-- Added to and . This allows you to configure the opacity applied to highlighted series.
+- Added to and . This allows you to configure the opacity applied to highlighted series.
- Expose `CalloutLabelUpdating` event for domain charts.
@@ -338,7 +338,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
#### IgcLinearGauge
-- Added new property
+- Added new property
## **{PackageVerChanges-25-1-AUG}**
@@ -412,7 +412,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
| Bug Number | Control | Description |
|------------|---------|------------------|
-|36448 | `IgcRadialGauge` | Radial label format properties do not work. (eg. Title, SubTitles)|
+|36448 | | Radial label format properties do not work. (eg. Title, SubTitles)|
### {PackageCharts}
@@ -440,17 +440,17 @@ For more details please visit:
- Data Annotation Strip Layer
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
-- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
+- The property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
-- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
- [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
### {PackageDashboards}
-- The `IgcDashboardTile` now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the `DataSource` of the `IgcDashboardTile` to an instance of `IgcLocalDataSource`.
+- The now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the of the to an instance of `IgcLocalDataSource`.
### {PackageGrids}
@@ -472,8 +472,8 @@ For more details please visit:
| Bug Number | Control | Description |
|------------|---------|------------------|
|25997 | `IgcDataGrid` | Summaries are only showing for first grouped child row|
-|37023 | `IgcDataChart` | Tooltips are cut-off/offscreen if overflow hidden is set.|
-|37685 | `IgcSpreadsheet` | Poor rendering of numbers formatted with Arial font.|
+|37023 | | Tooltips are cut-off/offscreen if overflow hidden is set.|
+|37685 | | Poor rendering of numbers formatted with Arial font.|
|37244 | Excel Library | Custom Data Validation is not working.|
## **{PackageVerChanges-24-2-APR}**
@@ -481,22 +481,17 @@ For more details please visit:
### {PackageGrids}
- **All Grids**
- - Allow applying initial filtering through
-
-
-
-
- property
+ - Allow applying initial filtering through property
### Bug Fixes
| Bug Number | Control | Description |
|------------|---------|------------------|
-| 28480 | `IgcCombo` | Undefined reference error is thrown when a datasource is replaced|
+| 28480 | | Undefined reference error is thrown when a datasource is replaced|
| 25602 | `IgcDataGrid` | Loading a layout with one of the date-specific filter operators results in a TypeError console error|
| 30319 | `IgcDataGrid` | Records are sorted despite no value changed|
| 32598 | `IgcDataGrid` | Multi-selection is not working correctly
-| 36374 | `IgcInput` | A previous value was bound when a form was submitted on any touch device|
+| 36374 | | A previous value was bound when a form was submitted on any touch device|
## **{PackageVerChanges-24-2-FEB}**
@@ -504,9 +499,9 @@ For more details please visit:
#### Toolbar
-- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions.
-- Added new property on called which controls the horizontal alignment of the title text.
-- Added new property on called which controls the spacing between items inside the panel.
+- Added new `GroupHeaderTextStyle` property to and . If set, it will apply to all actions.
+- Added new property on called which controls the horizontal alignment of the title text.
+- Added new property on called which controls the spacing between items inside the panel.
### Bug Fixes
@@ -514,13 +509,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
| Bug Number | Control | Description |
|------------|---------|------------------|
-| 30286 | `IgcDataChart` | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
-| 32906 | `IgcDataChart` | `IgcDataChart` is showing two xAxis on the top|
-| 33605 | `IgcDataChart` | ScatterLineSeries is not showing the color of the line correctly in the legend|
-| 34776 | `IgcDataChart` | Repeatedly showing and hiding the `IgcDataChart` causes memory leakage in JS Heap|
-| 35498 | `IgcDataChart` | Tooltips for the series specified in IncludedSeries are not displayed|
-| 34053 | `IgcRadialGauge` | The position of the scale label is shifted|
-| 35496 | `IgcSpreadsheet` | Error when setting styles in Excel with images|
+| 30286 | | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
+| 32906 | | is showing two xAxis on the top|
+| 33605 | | ScatterLineSeries is not showing the color of the line correctly in the legend|
+| 34776 | | Repeatedly showing and hiding the causes memory leakage in JS Heap|
+| 35498 | | Tooltips for the series specified in IncludedSeries are not displayed|
+| 34053 | | The position of the scale label is shifted|
+| 35496 | | Error when setting styles in Excel with images|
| 26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file|
| 34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file|
| 35495 | Excel Library | Pictures in cells are lost when a template file is loaded|
@@ -550,11 +545,11 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
### {PackageCharts}
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](charts/types/data-pie-chart.md) - The is a new component that renders a pie chart. This component works similarly to the , in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
--
+-
- New ToolActionCheckboxList
A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed.
@@ -571,20 +566,10 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- **All Grids**
- Added new `RowClick` event.
--
- - Added `sortable` property for a
-
-
-
-
- .
+-
+ - Added `sortable` property for a .
- Added horizontal layout. Can be enabled inside the new `pivotUI` property as `rowLayout` `horizontal`.
- - Added row dimension summaries for horizontal layout only. Can be enabled for each
-
-
-
-
- by setting `horizontalSummary` to **true**.
+ - Added row dimension summaries for horizontal layout only. Can be enabled for each by setting `horizontalSummary` to **true**.
- Added `horizontalSummariesPosition` property to the `pivotUI`, configuring horizontal summaries position.
- Added row headers for the row dimensions. Can be enabled inside the new `pivotUI` property as `showHeaders` **true**.
- Keyboard navigation now can move in to row headers back and forth from any row dimension headers or column headers.
@@ -592,129 +577,84 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
**Breaking Changes**
- **All Grids**
- -
+ -
- Removed `displayDensity` deprecated property.
- Renamed `actualColumns`, `contentColumns` properties to `actualColumnList` and `contentColumnList`. Use `column` or `columnList` property to get all columns now.
- - Renamed `rowDelete` and `rowAdd` event argument type to
-
-
-
-
-
-
-
- .
- - Renamed `contextMenu` event argument type to
-
-
-
-
-
-
-
- .
- - Removed
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
- ,
-
-
-
-
-
-
-
- events `rowID` and `primaryKey` properties. Use `rowKey` instead.
--
+ - Renamed `rowDelete` and `rowAdd` event argument type to .
+ - Renamed `contextMenu` event argument type to .
+ - Removed , , events `rowID` and `primaryKey` properties. Use `rowKey` instead.
+-
- removed `showPivotConfigurationUI` property. Use `pivotUI` and set inside it the new `showConfiguration` option.
--
+-
- Removed `movable` property. Use Grid's `moving` property now.
- Removed `columnChildren` property. Use `childColumns` instead.
--
+-
- Removed `children` property. Use `childColumns` instead.
--
+-
- Removed `isFirstPageDisabled` and `isLastPageDisabled` properties. Use `isFirstPage` and `isLastPage` instead.
## **{PackageVerChanges-24-1-JUN}**
### {PackageCommon}
-- , - exposed to enable validation rules being enforced without restricting user input.
-- -
-
-
-
-
- property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
-- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
+- , - exposed to enable validation rules being enforced without restricting user input.
+- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
+- - is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the property of and/or instead.
### {PackageGrids}
- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more regarding the Grid.
### {PackageCharts}
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property toggles grouping with each series opting in can assign group text via the property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for and . Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also `SelectedSeriesItemsChanged` event and are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the , to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
+- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the property.
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new . Can be toggled via and styled via `FillBrushes`.
-- - New option for ToolAction for outlining a border around specific tools of choice.
+- - New option for ToolAction for outlining a border around specific tools of choice.
### {PackageGauges}
--
- - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
+-
+ - New label for the highlight needle. and and many other styling related properties for the HighlightLabel were added.
## **{PackageVerChanges-23-2-MAR}**
### {PackageGrids}
-- New [ ](grids/hierarchical-grid/overview.md) component.
+- New [ ](grids/hierarchical-grid/overview.md) component.
### {PackageCharts}
-- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
+- New Data Filtering via the property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
- `RadialChart`
- New Label Mode
- The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
+ The for the now exposes a property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
### {PackageGauges}
--
- - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
- - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
--
- - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
--
- - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
+-
+ - New title/subtitle properties. , will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and . Finally, the new will allow the value to correspond with the needle's position.
+ - New and properties for the . This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - New highlight needle was added. and when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
+-
+ - The Performance bar will now reflect a difference between the value and new when the is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
## **{PackageVerChanges-23-2-JAN}**
### {PackageCharts}
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The and now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
## **{PackageVerChanges-23-2-DEC}**
@@ -729,7 +669,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- [Toolbar](menus/toolbar.md)
- Save tool action has been added to save the chart to an image via the clipboard.
- - Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
+ - Vertical orientation has been added via the toolbar's property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
@@ -737,13 +677,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
### {PackageLayouts}
-- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our or components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
### {PackageCharts}
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
+- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the and by adding to the new collection.
-- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the . You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
## **{PackageVerChanges-22-2.2}**
@@ -751,23 +691,23 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
### {PackageGrids}
-- A new argument has been introduced to `IgcRowDataEventArgs`, and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined.
+- A new argument has been introduced to , and part of the event arguments that are emitted by the `RowAdded` and `RowDeleted` events. When the grid has a primary key attribute added, then the emitted primaryKey event argument represents the row ID, otherwise it defaults to undefined.
- `RowSelectionChanging` event arguments are changed. Now, the `OldSelection`, `NewSelection`, `Added` and `Removed` collections no longer consist of the row keys of the selected elements when the grid has set a primaryKey, but now in any case the row data is emitted.
- When the grid is working with remote data and a primary key has been set, the selected rows that are not currently part of the grid view will be emitted for a partial row data object.
- When selected row is deleted from the grid component `RowSelectionChanging` event will no longer be emitted.
- The `OnGroupingDone` event has been renamed to `GroupingDone` to not violate the no on-prefixed outputs convention.
- The `OnDensityChanged` event has been renamed to `DensityChanged` to not violate the no on-prefixed outputs convention. All components exposing this event are affected.
-- : The `IgcPivotDateDimension` properties `InBaseDimension` and `InOption` have been deprecated and renamed to `BaseDimension` and `Options` respectively.
+- : The properties `InBaseDimension` and `InOption` have been deprecated and renamed to `BaseDimension` and `Options` respectively.
### {PackageInputs}
-- `IgcDateTimeInput`, the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart
-- `IgcRadio` and `IgcRadioGroup`, added component validation along with styles for invalid state
+- , the StepDownAsync(DateTimeInputDatePart.Date, SpinDelta.Date) is now trimmed down to DatePart instead of DateTimeInputDatePart
+- and , added component validation along with styles for invalid state
- `IgcMask`, added the capability to escape mask pattern literals.
-- `IgcBadge` added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded.
-- `IgcAvatar`, the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is .
+- added a property that controls the shape of the badge and can be either or `Rounded`. The default shape of the badge is rounded.
+- , the `RoundShape` property has been deprecated and will be removed in a future version. Users can control the shape of the avatar by the newly added attribute that can be , `Rounded` or . The default shape of the avatar is .
## **{PackageVerChanges-22-2.1}**
@@ -782,11 +722,11 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- New [Grid](grids/data-grid.md) component.
- New [Tree Grid](grids/tree-grid/overview.md) component.
-- `DataGrid`:
- - Changed **{IgPrefix}Column** to
- - Changed **GridCellEventArgs** to
- - Changed **GridSelectionMode** to
- - Changed **SummaryOperand** to `DataSourceSummaryOperand`
+- :
+ - Changed **{IgPrefix}Column** to
+ - Changed **GridCellEventArgs** to
+ - Changed **GridSelectionMode** to
+ - Changed **SummaryOperand** to
### {PackageCharts}
@@ -795,7 +735,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- Responsive layouts for horizontal label rotation based on browser / screen size.
- Enhanced rendering for rounded labels on all platforms.
- Added marker properties to StackedFragmentSeries.
-- Added property.
+- Added property.
- New Category Axis Properties:
- ZoomMaximumCategoryRange
- ZoomMaximumItemSpan
@@ -815,42 +755,42 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
- GroupSorts
- GroupSortDescriptions
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using | . These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render. The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
## **{PackageVerChanges-22-1}**
### {PackageGrids}
-- `DataGrid`:
+- :
- Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
### {PackageCharts}
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the , but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
-- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
-- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
-- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
+- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the property to true. From there, you can set the property to determine how long your animation should take to complete and the to determine the type of animation that takes place.
+- Added `AssigningCategoryStyle` event, is now available to all series in . This event is handled when you want to conditionally configure aspects of the series items such as background-color and highlighting.
+- New enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
- - for CalloutLayer
- - for FinalValueLayer
- - and for CrosshairLayer
-- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
-- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
-- New determines whether to include the spline shape in the axis range requested of the axis.
-- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
-- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
+ - for CalloutLayer
+ - for FinalValueLayer
+ - and for CrosshairLayer
+- New and enumeration to enable scrollbars in various ways. When paired with or , you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
+- New , determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. , , `PercentChangeAxis`).
+- New determines whether to include the spline shape in the axis range requested of the axis.
+- New , determines the maximum allowed value for the plotted series when using . The gap determines the amount of space between columns or bars of plotted series.
+- New , determines the minimum allowed pixel-based value for the plotted series when using to ensure there is always some spacing between each category.
## **{PackageVerChanges-21-2.1}**
### {PackageGrids}
-- `DataGrid`:
- - Added , of type string[], in the to be used when your items in the drop down contain a key that consists of multiple fields.
+- :
+ - Added , of type string[], in the to be used when your items in the drop down contain a key that consists of multiple fields.
-The following breaking changes were introduced: Changed `ValueField` property from type string[] to string.
+The following breaking changes were introduced: Changed property from type string[] to string.
### {PackageInputs}
@@ -865,7 +805,7 @@ The following breaking changes were introduced: Changed `ValueField` property fr
### {PackageGrids}
-- `DataGrid`:
+- :
- New Features Added:
- [Filter Row](grids/data-grid/column-filtering.md)
- [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md)
@@ -874,8 +814,8 @@ The following breaking changes were introduced: Changed `ValueField` property fr
- New API:
- Added `SelectionChanged` event. Used to detect changes on selection interactions, e.g. Multiple row selection.
- Breaking Changes:
- - Changed grid's SummaryScope property's type to SummaryScope from `DataSourceSummaryScope`
- - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from `DataSourceSectionHeaderDisplayMode`
+ - Changed grid's SummaryScope property's type to SummaryScope from
+ - Changed GroupHeaderDisplayMode property's type to GroupHeaderDisplayMode from
@@ -886,29 +826,29 @@ Please ensure package "lit-html": "^2.0.0" or newer is added to your project for
This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
-- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
-- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
-- Added property to
-- Added support for representing geographic series of in a legend
-- Added crosshair lines by default in and
-- Added crosshair annotations by default in and
-- Added final value annotation by default in
+- Changed property's type to **YAxisLabelLocation** from **AxisLabelLocation** in and
+- Changed property's type to **XAxisLabelLocation** from **AxisLabelLocation** in
+- Added property to
+- Added support for representing geographic series of in a legend
+- Added crosshair lines by default in and
+- Added crosshair annotations by default in and
+- Added final value annotation by default in
- Added new properties in Category Chart and Financial Chart:
- - and other properties for customizing crosshairs lines
- - and other properties for customizing crosshairs annotations
- - and other properties for customizing final value annotations
- - that allow changing opacity of series fill (e.g. Area chart)
- - that allows changing thickness of markers
+ - and other properties for customizing crosshairs lines
+ - and other properties for customizing crosshairs annotations
+ - and other properties for customizing final value annotations
+ - that allow changing opacity of series fill (e.g. Area chart)
+ - that allows changing thickness of markers
- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
- - that allows which marker type is assigned to multiple series in the same chart
- - for setting badge shape of all series represented in a legend
- - for setting badge complexity on all series in a legend
+ - that allows which marker type is assigned to multiple series in the same chart
+ - for setting badge shape of all series represented in a legend
+ - for setting badge complexity on all series in a legend
- Added new properties in Series in Data Chart and Geographic Map:
- - for setting badge shape on specific series represented in a legend
- - for setting badge complexity on specific series in a legend
+ - for setting badge shape on specific series represented in a legend
+ - for setting badge complexity on specific series in a legend
- Changed default vertical crosshair line stroke from #000000 to #BBBBBB in category chart and series
-- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
-- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
+- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's property to `SmartIndexed` enum value
+- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's property to `MatchSeries` enum value
- Changed color palette of series and markers displayed in all charts to improve accessibility
| Old brushes/outlines | New outline/brushes |
@@ -920,31 +860,31 @@ This release introduces a few improvements and simplifications to visual design
### {PackageGrids}
-- `DataGrid`:
+- :
- Added `EditOnKeyPress` aka Excel-style Editing, instantly begin editing when typing.
- - Added property - By default double-clicking is required to enter edit mode. This can be set to to allow for edit mode to occur when selecting a new cell.
- - Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
- - Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
- - Added - method.
- - Added Row Range Selection - With `GridSelectionMode` property set to MultipleRow the following new functionality is now included:
+ - Added property - By default double-clicking is required to enter edit mode. This can be set to to allow for edit mode to occur when selecting a new cell.
+ - Added property - aka Excel-style Navigation (Enter Behavior) – controls the behavior of the enter key, e.g. Options are (none, edit, move up, down, left, right)
+ - Added property - While in edit-mode, this property controls when enter is pressed, e.g. Options are (moves to the cell below, above, right, left)
+ - Added - method.
+ - Added Row Range Selection - With property set to MultipleRow the following new functionality is now included:
- Click and drag to select rows
- SHIFT and click to select multiple rows.
- SHIFT and press the ↑ + ↓ arrow keys to select multiple rows.
- - Pressing space bar toggles selection of active row via `GridSelectionMode` property set to MultipleRow or SingleRow
+ - Pressing space bar toggles selection of active row via property set to MultipleRow or SingleRow
- Added Column Summaries to Column Options Dialog.
### {PackageCharts}
- Date Picker:
- - - Toggles Today button visibility
- - - Adds a label above the date value
- - property - adds custom text when no value is selected
- - - Customize input date string e.g. (`yyyy-MM-dd`)
- - - Specifies whether to display selected dates as LongDate or ShortDate
- - - Specifies first day of week
- - - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
- - - Toggles Week number visibility
- - & - Date limits, specifying a range of available selectable dates.
+ - - Toggles Today button visibility
+ - - Adds a label above the date value
+ - property - adds custom text when no value is selected
+ - - Customize input date string e.g. (`yyyy-MM-dd`)
+ - - Specifies whether to display selected dates as LongDate or ShortDate
+ - - Specifies first day of week
+ - - Specifies when to display first week of the year, e.g. (First Full Week, First Four day Week)
+ - - Toggles Week number visibility
+ - & - Date limits, specifying a range of available selectable dates.
- Added Accessibility
@@ -962,30 +902,30 @@ These features are CTP
### {PackageCharts}
-This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
+This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. , , and .
- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
- Changed Scatter High Density series’ colors for heat min property from #8a5bb1 to #000000
- Changed Scatter High Density series’ colors for heat max property from #ee5879 to #ee5879
- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from #C62828 to #ee5879
- Changed marker's thickness to 2px from 1px
-- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
-- Compressed labelling for the and
+- Changed marker's fill to match the marker's outline for , , , . You can use set property to Normal to undo this change
+- Compressed labelling for the and
- New Marker Properties:
- - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
- - series. - Can be set to a value 0 to 1
- - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
+ - series. - Can be set to `MatchMarkerOutline` so the marker depends on the outline
+ - series. - Can be set to a value 0 to 1
+ - series. - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
- New Series Property:
- - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
-- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
- - chart.
- - chart.
- - chart.
- - chart.
- - chart.
+ - series. - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
+- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the , listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
+ - chart.
+ - chart.
+ - chart.
+ - chart.
+ - chart.
- New Highlighting Properties
- - chart. - Sets whether hovered or non-hovered series to fade, brighten
- - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
+ - chart. - Sets whether hovered or non-hovered series to fade, brighten
+ - chart. - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
- Note, in previous releases the highlighting was limited to fade on hover.
- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
@@ -1008,14 +948,14 @@ for example:
#### Chart Legend
-- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
-- Added property - Enables series highlighting when hovering over legend items
+- Added horizontal property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
+- Added property - Enables series highlighting when hovering over legend items
## **{PackageVerChangedFields}**
### {PackageGrids}
-- `DataGrid`:
+- :
These breaking changes were introduce in the grid package.
@@ -1051,7 +991,7 @@ income.field = "Income";
### {PackageGrids}
-- `DataGrid`:
+- :
- Changed Name of Live Grid - the data grid component and it's corresponding module's names have changed from "LiveGrid" to "DataGrid".
@@ -1070,7 +1010,7 @@ import { IgcDataGridModule } from 'igniteui-webcomponents-data-grids';
-- Required Peer Dependency for `DataGrid`
+- Required Peer Dependency for
The data grid component requires the "inputs" package.
@@ -1175,44 +1115,44 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
### **{PackageCommonVerChanges-5.0.0}**
--
- - Added `setIconRef` method. This allows to register and replace icons by SVG files.
+-
+ - Added method. This allows to register and replace icons by SVG files.
- All components now use icons by reference internally so that it's easy to replace them without explicitly providing custom templates.
--
+-
- Added `name` and `value` properties.
**Breaking Changes**
-- Removed component. Use native form instead.
+- Removed component. Use native form instead.
- Removed `size` property in favor of the `--ig-size` CSS custom property for the following components:
- - , , , , , , , , , , , ,
+ - , , , , , , , , , , , ,
- Removed custom `igcFocus` and `igcBlur` events. Use the native `focus` and `blur` events instead for the following components:
- - , , , , , , , , , **IgcSelectComponent**,
-- , ,
+ - , , , , , , , , , **IgcSelectComponent**,
+- , ,
- Changed `igcChange` event arguments from `CustomEvent` to `CustomEvent<{ checked: boolean; value: string | undefined }>`
-- , **IgcSelectComponent**
+- , **IgcSelectComponent**
- Removed `positionStrategy`, `flip`, `sameWidth` properties.
--
+-
- Renamed The `closeOnEscape` property to `keepOpenOnEscape`.
--
+-
- Removed `positionStrategy` property.
--
+-
- Removed `maxlength` and `minlength` properties. Use the native `maxLength` and `minLength` properties or `max` and `min` instead.
- Renamed `readonly` and `inputmode` properties to `readOnly` and `inputMode`.
--
+-
- Renamed `ariaThumbLower`/`ariaThumbUpper` properties to `thumbLabelLower`/`thumbLabelUpper`.
--
+-
- Renamed `readonly` property to `readOnly`.
### **{PackageCommonVerChanges-4.11.1}**
#### Changed
-- - Design changes in vertical mode.
+- - Design changes in vertical mode.
### **{PackageCommonVerChanges-4.11.0}**
#### Changed
-- , , - Styling changes in Indigo Theme.
+- , , - Styling changes in Indigo Theme.
### **{PackageCommonVerChanges-4.10.0}**
@@ -1220,122 +1160,117 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
- New [Banner](notifications/banner.md) component
- New [Divider](layouts/divider.md) component
- New [DatePicker](scheduling/date-picker.md) component
-- - Bind underlying radio components name and checked state through the radio group.
+- - Bind underlying radio components name and checked state through the radio group.
#### Deprecated
-- `Inputmode` property. Aligned with the native `inputMode` DOM property instead.
+- `Inputmode` property. Aligned with the native `inputMode` DOM property instead.
#### Fixed
-- , - passing `undefined` to value sets the underlying input value to undefined.
-- - after a form `reset` call correctly update underlying input value and placeholder state.
-- - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon.
-- - double emit of `igcChange` in certain scenarios.
-- - mini variant is not initially rendered when not in an open state.
-- :
+- , - passing `undefined` to value sets the underlying input value to undefined.
+- - after a form `reset` call correctly update underlying input value and placeholder state.
+- - setting `--ig-size` on the item `indicator` CSS Part will now change the size of the icon.
+- - double emit of `igcChange` in certain scenarios.
+- - mini variant is not initially rendered when not in an open state.
+- :
- Selecting an entry using the ENTER key now correctly works in single selection mode.
- - Turning on the option now clears any previously entered search term.
+ - Turning on the option now clears any previously entered search term.
- Entering a search term in single selection mode that already matches the selected item now works correctly.
### **{PackageCommonVerChanges-4.9.0}**
#### Added
-- - now allows resetting the selection state via the property.
-- , - exposed to enable validation rules being enforced without restricting user input.
+- - now allows resetting the selection state via the property.
+- , - exposed to enable validation rules being enforced without restricting user input.
#### Changed
-- , and - now use the native `Popover` API.
+- , and - now use the native `Popover` API.
#### Deprecated
-- -
-
-
-
-
- property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
+- - property is deprecated. The dropdown now uses the `Popover` API to render its container in the top layer of the browser viewport, making the property obsolete.
#### Fixed
-- - Label in Material theme is broken when component is in read-only mode.
+- - Label in Material theme is broken when component is in read-only mode.
### **{PackageCommonVerChanges-4.8.2}**
#### Fixed
-- - resize handle position for non-suffixed textarea.
-- - error when dynamically creating and adding a tab group and tabs in a single call stack.
-- / - participate in form submission when initially checked.
-- - `igcClosed` fired before the component was actually closed/hidden.
+- - resize handle position for non-suffixed textarea.
+- - error when dynamically creating and adding a tab group and tabs in a single call stack.
+- / - participate in form submission when initially checked.
+- - `igcClosed` fired before the component was actually closed/hidden.
### **{PackageCommonVerChanges-4.8.1}**
#### Fixed
-- - is not applied to an already set value.
-- , , - apply form validation synchronously.
-- , - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot.
-- - active state is correctly applied to the correct tree node on click.
+- - is not applied to an already set value.
+- , , - apply form validation synchronously.
+- , - Unable to select item when clicking on a wrapping element inside the dropdown/select item slot.
+- - active state is correctly applied to the correct tree node on click.
### **{PackageCommonVerChanges-4.8.0}**
#### Added
-- can now set to none which shows the groups in the order of the provided data.
-- / - updated visual looks across themes, new states.
+- can now set to none which shows the groups in the order of the provided data.
+- / - updated visual looks across themes, new states.
- `NavBar` - added border in Bootstrap theme.
#### Changed
-- Grouping in no longer sorts the data. property now affects the sorting direction only of the groups. **Behavioral change**: In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the .
+- Grouping in no longer sorts the data. property now affects the sorting direction only of the groups. **Behavioral change**: In previous release the sorting directions of the groups sorted the items as well. If you want to achieve this behavior you can pass already sorted data to the .
#### Deprecated
-- - `aria-label-upper` and `aria-label-lower` are deprecated and will be removed in the next major release. Use `thumb-label-upper` and `thumb-label-lower` instead.
+- - `aria-label-upper` and `aria-label-lower` are deprecated and will be removed in the next major release. Use `thumb-label-upper` and `thumb-label-lower` instead.
#### Fixed
-- - Slotted icon size.
--
+- - Slotted icon size.
+-
- Updated Fluent theme look.
- Disabled state in Safari.
-- / - Style issues.
--
+- / - Style issues.
+-
- Clicks on the slider track now use the track element width as a basis for the calculation.
- Input events are no longer emitted while continuously dragging the slider thumb and exceeding upper/lower bounds.
- When setting `upper-bound`/`lower-bound` before `min`/`max`, the slider will no longer overwrite the bound properties with the previous values of `min`/`max`.
- The `aria-label` bound to the slider thumb is no longer reset on consequent renders.
--
+-
- Default validators are run synchronously.
- Style issues.
-- - `setRangeText()` updates underlying value.
+- - `setRangeText()` updates underlying value.
### **{PackageCommonVerChanges-4.7.0}**
#### Added
-- - Added property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`.
+- - Added property that determines whether clicking over a node will change its expanded state or not. Defaults to `false`.
-- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application.
+- - added. When enabled selecting the same value will reset the component. **Behavioral change**: In previous releases this was the default behavior of the rating component. Make sure to set `allowReset` if you need to keep this behavior in your application.
#### Changed
-- Improved WAI-ARIA compliance for , and .
+- Improved WAI-ARIA compliance for , and .
#### Fixed
-- Active item visual styles for , and .
-- - mini variant broken visual style.
+- Active item visual styles for , and .
+- - mini variant broken visual style.
### **{PackageCommonVerChanges-4.6.0}**
#### Added
-- `action` slot added to .
-- `indicator-expanded` slot added to .
-- `toggle-icon-expanded` slot added to .
-- , - exposed `selectedItem`, `items` and `groups` getters.
+- `action` slot added to .
+- `indicator-expanded` slot added to .
+- `toggle-icon-expanded` slot added to .
+- , - exposed `selectedItem`, `items` and `groups` getters.
#### Changed
- Updated the package to Lit v3.
- Components dark variants are now bound to their shadow root.
- Components implement default sizes based on current theme.
-- - changed events to non-cancellable.
+- - changed events to non-cancellable.
- Optimized components CSS and reduced bundle size.
-- WAI-ARIA improvements for , , and .
+- WAI-ARIA improvements for , , and .
#### Fixed
-- missing styling parts.
-- disabled styles.
-- removed unnecessary styles.
-- hover state visual design.
-- not keeping focus state when switching views.
+- missing styling parts.
+- disabled styles.
+- removed unnecessary styles.
+- hover state visual design.
+- not keeping focus state when switching views.
### **{PackageCommonVerChanges-4.5.0}**
@@ -1343,13 +1278,13 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
- New [Text Area](inputs/text-area.md) component.
- New [Button Group](inputs/button-group.md) component.
-- New .
-- now supports CSS transitions.
-- Position attribute for and .
+- New .
+- now supports CSS transitions.
+- Position attribute for and .
#### Deprecated
-The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the component to small:
+The `size` property and attribute have been deprecated for all components. Use the `--ig-size` CSS custom property instead. The following example sets the size of the component to small:
```css
igc-avatar {
@@ -1369,83 +1304,83 @@ igc-avatar {
#### Added
- The following components are now Form Associated Custom Elements. They are automatically associated with a parent `
-The demo above shows the series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.
+The demo above shows the series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.
## Configuration Summary
-Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. The and will settings configures the radius for the bubbles.
+Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns. The and will settings configures the radius for the bubbles.
The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.
| Property|Type|Description |
| ---|---|--- |
-| |any|Gets or sets the items source |
-| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
-| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
-| |string|Sets the path to use to get the radius values for the series. |
-| | |Gets or sets the radius scale property for the current bubble series. |
-| |any|Configure the minimum value for calculating value sub ranges. |
-| |any|Configure the maximum value for calculating value sub ranges. |
+| |any|Gets or sets the items source |
+| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
+| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
+| |string|Sets the path to use to get the radius values for the series. |
+| | |Gets or sets the radius scale property for the current bubble series. |
+| |any|Configure the minimum value for calculating value sub ranges. |
+| |any|Configure the maximum value for calculating value sub ranges. |
## Code Snippet
@@ -340,5 +340,5 @@ addSeriesWith(locations: any[])
## API References
-
-
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
index 063b5cc413..7d62e19094 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Geographic Contour Map
-In {Platform} map component, you can use the to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc.
+In {Platform} map component, you can use the to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc.
## {Platform} Geographic Contour Map Example
@@ -23,40 +23,40 @@ In {Platform} map component, you can use the
-The
works a lot like the
except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale.
+The
works a lot like the
except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale.
## Data Requirements
-Similar to other types of geographic series in the map component, the
has the
property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by
,
, and
properties of the geographic series.
-The
automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the
property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present.
+Similar to other types of geographic series in the map component, the
has the
property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by
,
, and
properties of the geographic series.
+The
automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the
property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present.
## Data Binding
-The following table summarizes properties of
used for data binding.
+The following table summarizes properties of
used for data binding.
| Property Name | Property Type | Description |
|--------------|---------------| ---------------|
-|
|any|The source of data items to perform triangulation on if the
property provides no triangulation data.|
-|
|string|The name of the property containing the Longitude for all items bound to the
.|
-|
|string|The name of the property containing the Latitude for all items bound to to the
.|
-|
|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the
property is set.|
-|
|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.|
-|
|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|
|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|
|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
+|
|any|The source of data items to perform triangulation on if the
property provides no triangulation data.|
+|
|string|The name of the property containing the Longitude for all items bound to the
.|
+|
|string|The name of the property containing the Latitude for all items bound to to the
.|
+|
|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the
property is set.|
+|
|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.|
+|
|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
+|
|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
+|
|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
## Contour Fill Scale
-Use the
property of the
to resolve fill brushes of the contour lines of the geographic series.
+Use the
property of the
to resolve fill brushes of the contour lines of the geographic series.
The provided `ValueBrushScale class should satisfy most of your coloring needs, but the application for custom coloring logic can inherit the ValueBrushScale class.
The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries.
| Property Name | Property Type | Description |
|--------------|---------------| ---------------|
-|
|BrushCollection|Gets or sets the collection of brushes for filling contours of the
|
-|
|double|The highest value to assign a brush in a fill scale.|
-|
|double|The lowest value to assign a brush in a fill scale.|
+|
|BrushCollection|Gets or sets the collection of brushes for filling contours of the
|
+|
|double|The highest value to assign a brush in a fill scale.|
+|
|double|The lowest value to assign a brush in a fill scale.|
## Code Snippet
-The following code shows how to bind the
to triangulation data representing surface temperatures in the world.
+The following code shows how to bind the
to triangulation data representing surface temperatures in the world.
@@ -376,7 +376,7 @@ createContourSeries(data: any[])
## API References
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-density-series.mdx
index 82c9fae46e..03837ba035 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-scatter-density-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-density-series.mdx
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Geographic High Density Map
-In {Platform} map component, you can use the to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time.
+In {Platform} map component, you can use the to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time.
## {Platform} Geographic High Density Map Example
@@ -21,35 +21,35 @@ In {Platform} map component, you can use the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels.
+The demo above shows the series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels.
Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points.
## Data Requirements
-Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns.
+Similar to other types of scatter series in the map control, the series has the property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the and properties to map these data columns.
### Data Binding
The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.
| Property|Type|Description |
| ---|---|--- |
-| |any|Gets or sets the items source |
-| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
-| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
+| |any|Gets or sets the items source |
+| |string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
+| |string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
## Heat Color Scale
The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale.
| Property |Type|Description |
| ---|---|--- |
-| |Double|Defines the double value representing the minimum end of the color scale |
-| |Double|Defines the double value representing the maximum end of the color scale |
-| |Color|Defines the point density color used at the bottom end of the color scale |
-| |Color|Defines the point density color used at the top end of the color scale |
+| |Double|Defines the double value representing the minimum end of the color scale |
+| |Double|Defines the double value representing the maximum end of the color scale |
+| |Color|Defines the point density color used at the bottom end of the color scale |
+| |Color|Defines the point density color used at the top end of the color scale |
## Code Example
-The following code demonstrates how set the and properties of the
+The following code demonstrates how set the and properties of the
@@ -325,4 +325,4 @@ onDataLoaded(csvData: string) {
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
index 6e52b8a629..88e1b04597 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
@@ -1,4 +1,4 @@
----
+---
title: "{Platform} Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics"
description: Use Infragistics {Platform} map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about {ProductName} map's series!
keywords: "{Platform} map, scatter symbol series, {ProductName}, Infragistics"
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Geographic Symbol Map
-In {Platform} map component, you can use the to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests.
+In {Platform} map component, you can use the to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests.
## {Platform} Geographic Symbol Map Example
@@ -22,10 +22,10 @@ In {Platform} map component, you can use the has the property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the and properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component.
+Similarly to other types of geographic series in the map component, the has the property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the and properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component.
## Code Snippet
-The following code shows how to bind the to locations of cities loaded from a shape file using the .
+The following code shows how to bind the to locations of cities loaded from a shape file using the .
@@ -246,5 +246,5 @@ addSeriesWith(locations: any[], brush: string)
## API References
-
-
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-series.mdx
index 2d4b629ce3..606aab1dc6 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-series.mdx
@@ -30,4 +30,4 @@ The {Platform} Geographic Map component supports the following types of geograph
## API References
-
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx
index 09bd0f07d3..309d950ed2 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-shape-polygon-series.mdx
@@ -1,4 +1,4 @@
----
+---
title: "{Platform} Map | Data Visualization Tools | Shape Polygon Series | Infragistics"
description: Use Infragistics {Platform} map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about {ProductName} map's series!
keywords: "{Platform} map, shape polygon series, {ProductName}, Infragistics"
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Geographic Polygon Map
-In {Platform} map component, you can use the to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations.
+In {Platform} map component, you can use the to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations.
## {Platform} Geographic Polygon Map Example
@@ -21,13 +21,13 @@ In {Platform} map component, you can use the works a lot like the except that geo-spatial data is rendered with polygons instead of polylines.
+The works a lot like the except that geo-spatial data is rendered with polygons instead of polylines.
## Data Requirements
-Similar to other types of geographic series in the map control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control.
+Similar to other types of geographic series in the map control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control.
## Code Snippet
-The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the .
+The following code demonstrates how to bind the to shapes of countries in the world loaded from a shape file using the .
@@ -349,6 +349,6 @@ createSeries(shapeData: any[], shapeBrush: string, shapeTitle: string)
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx
index 6427e14ca4..0df268ee8e 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-shape-polyline-series.mdx
@@ -1,4 +1,4 @@
----
+---
title: "{Platform} Map | Data Visualization Tools | Shape Polyline Series | Infragistics"
description: Use Infragistics {Platform} map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about {ProductName} map's series!
keywords: "{Platform} map, {ProductName}, shape polyline series, Infragistics"
@@ -11,7 +11,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} Geographic Polyline Map
-In {Platform} map component, you can use the to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports.
+In {Platform} map component, you can use the to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports.
## {Platform} Geographic Polyline Map Example
@@ -21,13 +21,13 @@ In {Platform} map component, you can use the works a lot like the except that geo-spatial data is rendered with polylines instead of polygons.
+The works a lot like the except that geo-spatial data is rendered with polylines instead of polygons.
## Data Requirements
-Similarly to other types of geographic series in the control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control.
+Similarly to other types of geographic series in the control, the has the property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control.
## Code Snippet
-The following code shows how to bind the to locations of cities loaded from a shape file using the .
+The following code shows how to bind the to locations of cities loaded from a shape file using the .
@@ -338,6 +338,6 @@ public addSeriesWith(shapeData: any[], shapeBrush: string) {
## API References
-
-
-
+
+
+
diff --git a/docs/xplat/src/content/en/components/geo-map.mdx b/docs/xplat/src/content/en/components/geo-map.mdx
index d0607a3988..c30681360e 100644
--- a/docs/xplat/src/content/en/components/geo-map.mdx
+++ b/docs/xplat/src/content/en/components/geo-map.mdx
@@ -15,7 +15,7 @@ The {ProductName} map component allows you to display data that contains geograp
## {Platform} Map Example
-The following sample demonstrates how display data in using also known as Bubble Series.
+The following sample demonstrates how display data in using also known as Bubble Series.
@@ -24,7 +24,7 @@ The following sample demonstrates how display data in can be added for plotting geographic locations such as cities and the for plotting connections (e.g. roads) between these geographic locations.
+The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, can be added for plotting geographic locations such as cities and the for plotting connections (e.g. roads) between these geographic locations.
The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind.
@@ -53,7 +53,7 @@ npm install --save {PackageMaps}
## Component Modules
-The requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content.
+The requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content.
@@ -221,11 +221,11 @@ You can find more information about related {Platform} map features in these top
## API References
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index 47a07ac23d..74ced3fc20 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -199,8 +199,9 @@ the column collection is reset, and a new data source is bound to the grid.
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index 23f36a8545..2637a63e91 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -248,8 +248,9 @@ export interface GridLiteCellContext<
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index f3f4d11f3a..342b3f1e28 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -64,7 +64,7 @@ return (
-Columns are defined declaratively using `` child elements within the grid. The property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows.
+Columns are defined declaratively using `` child elements within the grid. The property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows.
```razor
@@ -78,7 +78,7 @@ Columns are defined declaratively using `` child elements wit
## Configuration Based on the Data Source
-The grid supports inferring the column configuration based on the provided data source when `AutoGenerate` is set to true. It tries to infer the appropriate and properties based on records in the data.
+The grid supports inferring the column configuration based on the provided data source when `AutoGenerate` is set to true. It tries to infer the appropriate and properties based on records in the data.
```razor
@@ -240,7 +240,7 @@ return (
-To change the width of column, use the parameter of the `IgbGridLiteColumn` component.
+To change the width of column, use the parameter of the component.
```razor
@@ -290,7 +290,7 @@ return (
-Columns can be hidden/shown by setting the parameter on the `IgbGridLiteColumn` component.
+Columns can be hidden/shown by setting the parameter on the component.
```razor
@@ -338,7 +338,7 @@ return (
-Each column of the {GridLiteTitle} can be configured to be resizable by setting the parameter on the `IgbGridLiteColumn` component.
+Each column of the {GridLiteTitle} can be configured to be resizable by setting the parameter on the component.
```razor
@@ -358,8 +358,9 @@ In the sample below you can try out the different column properties and how they
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index 332b51ab72..f4ef8b2fe4 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -26,7 +26,7 @@ The {GridLiteTitle} supports filtering operations on its data source. Data filte
-The {GridLiteTitle} supports filtering operations on its data source. Data filtering is controlled on per-column level, allowing you to have filterable and non-filterable columns. By default, filtering on a column is disabled unless explicitly configured with the property of the column.
+The {GridLiteTitle} supports filtering operations on its data source. Data filtering is controlled on per-column level, allowing you to have filterable and non-filterable columns. By default, filtering on a column is disabled unless explicitly configured with the property of the column.
@@ -147,7 +147,7 @@ The building blocks for filter operations in the grid is the `FilterExpression
-The building blocks for filter operations in the grid is the `IgbGridLiteFilterExpression` which has the following structure:
+The building blocks for filter operations in the grid is the which has the following structure:
@@ -237,7 +237,7 @@ public class IgbGridLiteFilterExpression
-The {GridLiteTitle} exposes two main approaches for applying filter operations from its API. Either through the `GridLite.filter()`/`GridLite.clearFilter()` methods or through the `GridLite.filterExpressions` property.
+The {GridLiteTitle} exposes two main approaches for applying filter operations from its API. Either through the `GridLite.filter()`/`GridLite.clearFilter()` methods or through the property.
The `filter()` method accepts either a single expression or an array of filter expression and then filters the grid data
based on those expressions.
@@ -248,7 +248,7 @@ based on those expressions.
-The {GridLiteTitle} exposes two main approaches for applying filter operations from its API. Either through the `GridLite.Filter()`/`GridLite.ClearFilter()` methods or through the `GridLite.FilterExpressions` property.
+The {GridLiteTitle} exposes two main approaches for applying filter operations from its API. Either through the `GridLite.Filter()`/`GridLite.ClearFilter()` methods or through the property.
The `Filter()` method accepts either a single expression or an array of filter expression and then filters the grid data
based on those expressions.
@@ -548,7 +548,7 @@ gridRef.current.addEventListener('filtered', (event: CustomEvent
-Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a `DataPipelineParams` object.
+Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a object.
```typescript
export type DataPipelineParams = {
@@ -580,7 +580,7 @@ gridRef.current.dataPipelineConfiguration = { filter: (params: DataPipelineParam
-Using the `DataPipelineConfiguration` property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a `DataPipelineParams` object.
+Using the property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a object.
```razor
public class DataPipelineParams
@@ -619,10 +619,13 @@ The following example mocks remote filter operation, reflecting the REST endpoin
+
+
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index e91127d657..227a99e291 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -43,7 +43,7 @@ return (
-By default the column uses the property for label text. To customize the label, set the property to a more human readable format.
+By default the column uses the property for label text. To customize the label, set the property to a more human readable format.
```razor
@@ -103,8 +103,9 @@ return (
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index 4b0a6714a7..fedfe11b80 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -25,7 +25,7 @@ The {GridLiteTitle} supports sorting operations on its data source. Data sorting
-The {GridLiteTitle} supports sorting operations on its data source. Data sorting is controlled on per-column level, allowing you to have sortable and non-sortable columns, while the grid itself controls certain sort behaviors. By default, sorting on a column is disabled unless explicitly configured with the property of the column.
+The {GridLiteTitle} supports sorting operations on its data source. Data sorting is controlled on per-column level, allowing you to have sortable and non-sortable columns, while the grid itself controls certain sort behaviors. By default, sorting on a column is disabled unless explicitly configured with the property of the column.
@@ -193,7 +193,7 @@ The {GridLiteTitle} supports both single and multi-column sorting. Multi-column
-The {GridLiteTitle} supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the property of the grid. The property accepts `GridLiteSortingMode.Single` or `GridLiteSortingMode.Multiple` as values.
+The {GridLiteTitle} supports both single and multi-column sorting. Multi-column is enabled by default and can be configured through the property of the grid. The property accepts or as values.
@@ -284,7 +284,7 @@ The following sample shows the grid `sortingOptions` property and how it control
-The following sample shows the grid property and how it controls the grid sorting behavior.
+The following sample shows the grid property and how it controls the grid sorting behavior.
@@ -306,7 +306,7 @@ The building block for sort operations in the {GridLiteTitle} is the `SortingExp
-The building block for sort operations in the {GridLiteTitle} is the `IgbGridLiteSortingExpression` which has the following properties:
+The building block for sort operations in the {GridLiteTitle} is the which has the following properties:
@@ -690,7 +690,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column
In cases where sorting must be done remotely or you want to save the current state/data to a server somewhere, the {GridLiteTitle} exposes a hook where you can implement and customize this behavior.
-Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a `DataPipelineParams` object.
+Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a object.
```typescript
export type DataPipelineParams = {
@@ -722,7 +722,7 @@ gridRef.current.dataPipelineConfiguration = { sort: (params: DataPipelineParams<
-Using the `DataPipelineConfiguration` property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a `DataPipelineParams` object.
+Using the property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a object.
```razor
public class DataPipelineParams
@@ -760,10 +760,13 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
+
+
-{/*TODO
- */}
+
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index e72fc1748e..9c88285dca 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -70,8 +70,8 @@ Here is an example showcasing the custom theming from above.
-{/*TODO
- */}
+{/*TODO
+ */}
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
index 17ab1e0a54..fc81d25fcf 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Advanced Filtering
-The {ProductName} Advanced Filtering in {Platform} {ComponentTitle} allows you to manipulate data by providing you with a dialog where you can create different groups with filtering conditions across all columns in the .
+The {ProductName} Advanced Filtering in {Platform} {ComponentTitle} allows you to manipulate data by providing you with a dialog where you can create different groups with filtering conditions across all columns in the .
## {Platform} {ComponentTitle} Advanced Filtering Example
@@ -25,7 +25,7 @@ The {ProductName} Advanced Filtering in {Platform} {ComponentTitle} allows you t
In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with **AND** or **OR**. After that, you can add filtering conditions or sub-groups.
-In order to add a filtering condition, you have to select any of the columns, an operand based on the column and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it.
+In order to add a filtering condition, you have to select any of the columns, an operand based on the column and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it.
If you select more than one filtering condition chip, a context menu appears with options to create a group or delete the filters. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed.
@@ -35,7 +35,7 @@ In order to filter the data once you are ready with creating the filtering condi
## Usage
-To enable the advanced filtering, the input property should be set to **true**.
+To enable the advanced filtering, the input property should be set to **true**.
```html
@@ -165,7 +165,7 @@ constructor() {
-The advanced filtering generates a which is stored in the input property. You could use the property to set an initial state of the advanced filtering.
+The advanced filtering generates a which is stored in the input property. You could use the property to set an initial state of the advanced filtering.
```typescript
@@ -265,16 +265,16 @@ const filteringTree: IgrFilteringExpressionsTree = {
-In case you don't want to show the toolbar, you could use the and methods to open and close the advanced filtering dialog programmatically.
+In case you don't want to show the toolbar, you could use the and methods to open and close the advanced filtering dialog programmatically.
-You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters.
+You can enable both the **QuickFilter**/**ExcelStyleFilter** and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters.
## External Advanced Filtering
-As you see in the demo above, the advanced filtering dialog is hosted in an overlay on top of the . When the setup in the dialog is ready, the apply or close actions will hide that dialog. There is a way to make that dialog remain visible, and that is to use it as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the .
+As you see in the demo above, the advanced filtering dialog is hosted in an overlay on top of the . When the setup in the dialog is ready, the apply or close actions will hide that dialog. There is a way to make that dialog remain visible, and that is to use it as a standalone component. In the demo below, the advanced filtering dialog is declared separately of the .
### Demo
@@ -283,7 +283,7 @@ As you see in the demo above, the advanced filtering dialog is hosted in an over
### Usage
-It's super easy to configure the advanced filtering to work outside of the . All you need to do is to create the dialog and set its **grid** property:
+It's super easy to configure the advanced filtering to work outside of the . All you need to do is to create the dialog and set its **grid** property:
```html
@@ -354,7 +354,7 @@ $custom-drop-down: drop-down-theme(
);
```
-In this example we only changed some of the parameters for the listed components, but the , , , , themes provide way more parameters to control their respective styling.
+In this example we only changed some of the parameters for the listed components, but the , , , , themes provide way more parameters to control their respective styling.
The last step is to **include** the component mixins, each with its respective theme. We will also add some styles for other elements inside the advanced filtering dialog.
@@ -446,7 +446,7 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation)
### Defining a Color Palette
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
`igx-palette` generates a color palette based on the primary and secondary colors that are passed:
@@ -456,7 +456,7 @@ $black-color: #292826;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
```
-And then with we can easily retrieve color from the palette.
+And then with we can easily retrieve color from the palette.
```scss
$custom-grid: grid-theme(
@@ -497,7 +497,7 @@ The `igx-color` and `igx-palette` are powerful functions for generating and retr
Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component, in this case - , , , , and schemas:
+Extend one of the two predefined schemas, that are provided for every component, in this case - , , , , and schemas:
```scss
$grid-dark-palette: palette($primary: #11bd7b, $secondary: #e32057, $info: $black-color);
@@ -556,7 +556,7 @@ $custom-drop-down-schema: extend($_light-drop-down,
);
```
-In order to apply our custom schemas we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
+In order to apply our custom schemas we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
```scss
$custom-light-schema: extend($light-schema,(
@@ -657,8 +657,8 @@ Then set the related CSS properties to this class:
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
index d9cafada53..8d29305730 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
@@ -16,25 +16,25 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Batch Editing and Transactions
-The Batch Editing feature of the is based on the `TransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `TransactionService` and details how it is implemented.
+The Batch Editing feature of the is based on the . Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the and details how it is implemented.
-The Batch Editing feature of the is based on the `HierarchicalTransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `HierarchicalTransactionService` and details how it is implemented.
+The Batch Editing feature of the is based on the `HierarchicalTransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `HierarchicalTransactionService` and details how it is implemented.
-In order to use the `HierarchicalTransactionService` with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as `HierarchicalTransactionServiceFactory`.
+In order to use the `HierarchicalTransactionService` with , but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as `HierarchicalTransactionServiceFactory`.
-Below is a detailed example of how is Batch Editing enabled for the component.
+Below is a detailed example of how is Batch Editing enabled for the component.
## {Platform} {ComponentTitle} Batch Editing and Transactions Example
-The following sample demonstrates a scenario, where the has enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.
+The following sample demonstrates a scenario, where the has enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.
@@ -46,7 +46,7 @@ Transaction state consists of all the updated, added and deleted rows, and their
## Usage
-You need to enable from your {ComponentTitle}:
+You need to enable from your {ComponentTitle}:
```html
@@ -62,14 +62,14 @@ You need to enable . The proper `TransactionService` is provided through a `TransactionFactory`.
+This will ensure a proper instance of `Transaction` service is provided for the . The proper is provided through a `TransactionFactory`.
You can learn more about this internal implementation in the [transactions topic](../transaction-classes.md#transaction-factory).
-After batch editing is enabled, define a with bound data source and set to true and bind:
+After batch editing is enabled, define a with bound data source and set to true and bind:
@@ -291,7 +291,7 @@ private OnRedoClick() {
-The following code demonstrates the usage of the `TransactionService` API - undo, redo, commit.
+The following code demonstrates the usage of the API - undo, redo, commit.
@@ -404,7 +404,7 @@ export class GridBatchEditingSampleComponent {
-The following code demonstrates the usage of the `TransactionService` API - undo, redo, commit.
+The following code demonstrates the usage of the API - undo, redo, commit.
```typescript
export class HierarchicalGridBatchEditingSampleComponent {
@@ -437,11 +437,11 @@ The transactions API won't handle end of edit and you'd need to do it by yoursel
-Deleting a parent node in has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the `CascadeOnDelete` property of . This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to **true**).
+Deleting a parent node in has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the `CascadeOnDelete` property of . This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to **true**).
-Disabling property will modify `{ComponentName}` to create transactions on cell change and will not expose row editing overlay in the UI.
+Disabling property will modify `{ComponentName}` to create transactions on cell change and will not expose row editing overlay in the UI.
@@ -458,7 +458,7 @@ Disabling
## API References
-
+
`Transactions`
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
index e9efd44789..80f519ed4b 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cascading-combos.mdx
@@ -17,7 +17,7 @@ The {ComponentTitle}'s Editing functionality provides with the opportunity to us
## {Platform} {ComponentTitle} with Cascading Combos Sample Overview
-The sample below demonstrates how works with nested Cascading components.
+The sample below demonstrates how works with nested Cascading components.
@@ -28,7 +28,7 @@ The sample below demonstrates how property is set to `true`.
+In order enable column editing, make sure property is set to `true`.
Once the column editing is enabled, you can start by adding your . Please note that here in order to have only one single selection available, you will need to use set the property.
@@ -269,7 +269,7 @@ public countryChanging(event: IComboSelectionChangeEventArgs) {
}
```
-And lastly, adding the , which is required while loading the list of data.
+And lastly, adding the , which is required while loading the list of data.
The `id` is necessary to set the value of `id` attribute.
```html
@@ -283,7 +283,7 @@ The `id` is necessary to set the value of `id` attribute.
-And lastly, adding the , which is required while loading the list of data.
+And lastly, adding the , which is required while loading the list of data.
The `id` is necessary to set the value of `id` attribute.
```ts
@@ -301,7 +301,7 @@ The `id` is necessary to set the value of `id` attribute.
-And lastly, adding the , which is required while loading the list of data.
+And lastly, adding the , which is required while loading the list of data.
@@ -323,7 +323,7 @@ And lastly, adding the , which is required whil
## API References
-
-
-
-
+
+
+
+
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
index beeb89f06b..99280eb4ab 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
@@ -27,7 +27,7 @@ In addition, you can define your own custom templates for update-data actions an
-By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row.
+By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row.
@@ -50,17 +50,17 @@ You can exit edit mode and **commit** the changes in one of the following ways:
- on key press ENTER ;
- on key press F2 ;
- on key press TAB ;
-- on single click to another cell - when you click on another cell in the , your changes will be submitted.
+- on single click to another cell - when you click on another cell in the , your changes will be submitted.
- operations like paging, resize, pin or move will exit edit mode and changes will be submitted.
-The cell remains in edit mode when you scroll vertically or horizontally or click outside the . This is valid for both cell editing and row editing.
+The cell remains in edit mode when you scroll vertically or horizontally or click outside the . This is valid for both cell editing and row editing.
### Editing through API
-You can also modify the cell value through the API but only if primary key is defined:
+You can also modify the cell value through the API but only if primary key is defined:
@@ -122,7 +122,7 @@ public updateCell() {
-Another way to update cell is directly through method of `Cell`:
+Another way to update cell is directly through method of `Cell`:
@@ -211,7 +211,7 @@ public updateCell() {
You can see and learn more for default cell editing templates in the [general editing topic](editing.md#editing-templates).
-If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the `CellTemplateDirective`. To do this, you need to pass an **ng-template** marked with the directive and properly bind your custom control to the cell :
+If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the `CellTemplateDirective`. To do this, you need to pass an **ng-template** marked with the directive and properly bind your custom control to the cell :
```html
@@ -255,16 +255,16 @@ This code is used in the sample below which implements an [SelectComponent](../s
-Any changes made to the cell's in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the transaction state if transactions are enabled.
+Any changes made to the cell's in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the transaction state if transactions are enabled.
The cell template `Cell` controls how a column's cells are shown when outside of edit mode.
-The cell editing template directive , handles how a column's cells in edit mode are displayed and controls the edited cell's edit value.
+The cell editing template directive , handles how a column's cells in edit mode are displayed and controls the edited cell's edit value.
-By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row.
+By using with any type of editor component, the keyboard navigation flow will be disrupted. The same applies to direct editing of the custom cell that enters edit mode. This is because the **focus** will remain on the **cell element**, not on the editor component that we've added. This is why we should take leverage of the `Focus` directive, which will move the focus directly in the in-cell component and will preserve **a fluent editing flow** of the cell/row.
@@ -550,7 +550,7 @@ For more information on how to configure columns and their templates, you can se
Using Excel Style Editing allows the user to navigate trough the cells just as he would using the Excel, and ever so quickly edit them.
-Implementing this custom functionality can be done by utilizing the events of the . First we hook up to the grid's keydown events, and from there we can implement two functionalities:
+Implementing this custom functionality can be done by utilizing the events of the . First we hook up to the grid's keydown events, and from there we can implement two functionalities:
```tsx
@@ -700,11 +700,11 @@ Main benefits of the above approach include:
Please keep in mind that when you perform some **CRUD operation** all of the applied pipes like **filtering**, **sorting** and **grouping** will be re-applied and your view will be automatically updated.
-The provides a straightforward API for basic CRUD operations.
+The provides a straightforward API for basic CRUD operations.
### Adding a new record
-The component exposes the method which will add the provided data to the data source itself.
+The component exposes the method which will add the provided data to the data source itself.
@@ -782,7 +782,7 @@ public addRow() {
### Updating data in the {ComponentTitle}
-Updating data in the {ComponentTitle} is achieved through and methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods.
+Updating data in the {ComponentTitle} is achieved through and methods but **only if the PrimaryKey for the grid is defined**. You can also directly update a cell and/or a row value through their respective **update** methods.
@@ -926,7 +926,7 @@ row.update(newData);
### Deleting data from the {ComponentTitle}
-Please keep in mind that method will remove the specified row only if a is defined.
+Please keep in mind that method will remove the specified row only if a is defined.
@@ -1022,7 +1022,7 @@ row.delete();
-These can be wired to user interactions, not necessarily related to the for example, a button click:
+These can be wired to user interactions, not necessarily related to the for example, a button click:
```html
@@ -1032,9 +1032,9 @@ These can be wired to user interactions, not necessarily related to the 's editing events, we can alter how the user interacts with the .
+Using the 's editing events, we can alter how the user interacts with the .
-In this example, we'll validate a cell based on the data entered in it by binding to the event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event.
+In this example, we'll validate a cell based on the data entered in it by binding to the event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event.
We'll also display a custom error message using [Toast](../../notifications/toast.md).
@@ -1102,7 +1102,7 @@ constructor() {
-The emits whenever **any** cell's value is about to be committed. In our **CellEdit** definition, we need to make sure that we check for our specific column before taking any action:
+The emits whenever **any** cell's value is about to be committed. In our **CellEdit** definition, we need to make sure that we check for our specific column before taking any action:
@@ -1316,7 +1316,7 @@ public handleCellEdit(event: IgrGridEditEventArgs): void {
-The result of the above validation being applied to our can be seen in the below demo:
+The result of the above validation being applied to our can be seen in the below demo:
@@ -1426,7 +1426,7 @@ Then set the related CSS properties for that class:
-The allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.md). The grid's exposes a wide range of properties, which allow users to style many different aspects of the grid.
+The allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.md). The grid's exposes a wide range of properties, which allow users to style many different aspects of the grid.
In the below steps, we are going to go over how you can style the grid's cell in edit mode and how you can scope those styles.
@@ -1457,7 +1457,7 @@ $color-palette: palette($primary: $white, $secondary: $blue);
### Defining Themes
-We can now define the theme using our palette. The cells are styled by the , so we can use that to generate a theme for our :
+We can now define the theme using our palette. The cells are styled by the , so we can use that to generate a theme for our :
```scss
$custom-grid-theme: grid-theme(
@@ -1514,9 +1514,9 @@ The sample will not be affected by the selected global theme from **Change Theme
## API References
-
-
-
+
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
index 288a562f1d..3101791b44 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
@@ -42,7 +42,7 @@ Cell merging in the grid is controlled at two levels:
### Grid Merge Mode
-The grid exposes a property that accepts values from the enum:
+The grid exposes a property that accepts values from the enum:
- `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)**.
@@ -82,7 +82,7 @@ const cellMergeMode: GridCellMergeMode = 'always';
### Column Merge Toggle
-At the column level, merging can be enabled or disabled with the property.
+At the column level, merging can be enabled or disabled with the property.
```tsx
@@ -157,10 +157,10 @@ Here, the grid is set to merge only when columns are sorted, and both Category a
## Custom Merge Conditions
-In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the property. This strategy controls both how cells are compared and how merged ranges are calculated.
+In addition to the built-in `always` and `onSort` modes, the grid allows you to define a custom condition for merging cells through the property. This strategy controls both how cells are compared and how merged ranges are calculated.
### Merge Strategy Class
-A custom merge strategy must implement the class:
+A custom merge strategy must implement the class:
```ts
@@ -204,7 +204,7 @@ export declare class IgcGridMergeStrategy {
### Extending the Default Strategy
-If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods.
+If you only want to customize part of the behavior (for example, the comparer logic), you can extend the built-in and override the relevant methods.
```ts
@@ -237,11 +237,11 @@ export class MyCustomStrategy extends IgcDefaultMergeStrategy {
-The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: and . merges all cells with the same value, regardless of their hierarchical level. In contrast, only merges cells if they have the same value and are located at the same level, making level a required condition for merging.
+The `IgxTreeGrid` provides two built-in strategies that implement the `IGridMergeStrategy` interface: and . merges all cells with the same value, regardless of their hierarchical level. In contrast, only merges cells if they have the same value and are located at the same level, making level a required condition for merging.
### Extending the Default Strategy
-If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either or , and override the relevant methods.
+If you only want to customize part of the behavior (for example, the comparer logic), you can extend one of the built-in strategies, either or , and override the relevant methods.
```ts
@@ -275,7 +275,7 @@ export class MyCustomStrategy extends IgcDefaultTreeGridMergeStrategy {
### Applying a Custom Strategy
-Once defined, assign the strategy to the grid through the property:
+Once defined, assign the strategy to the grid through the property:
```tsx
@@ -341,7 +341,7 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom
## API References
-
+
## Additional Resources
- [Filtering](filtering.md)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
index 7382bdcdfa..0ed4b77448 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
@@ -16,21 +16,21 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Cell Selection
-The {ProductName} Cell Selection in {Platform} {ComponentTitle} enables rich data select capabilities and offers powerful API in the component. The {Platform} {ComponentTitle} supports three selection modes:
+The {ProductName} Cell Selection in {Platform} {ComponentTitle} enables rich data select capabilities and offers powerful API in the component. The {Platform} {ComponentTitle} supports three selection modes:
- {ComponentTitle} Multiple Cell Selection
- {ComponentTitle} Single Selection
- {ComponentTitle} None Selection
-In the you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled.
+In the you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled.
Let's dive deeper into each of these options.
## {Platform} {ComponentTitle} Cell Selection Example
-The sample below demonstrates the three types of 's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
+The sample below demonstrates the three types of 's **cell selection** behavior. Use the buttons below to enable each of the available selection modes. A brief description will be provided on each button interaction through a snackbar message box.
@@ -65,13 +65,13 @@ How to select cells:
### {ComponentTitle} Single Selection
-When you set the to **single**, this allows you to have only one selected cell in the grid at a time. Also the mode **mouse drag** will not work and instead of selecting a cell, this will make default text selection.
+When you set the to **single**, this allows you to have only one selected cell in the grid at a time. Also the mode **mouse drag** will not work and instead of selecting a cell, this will make default text selection.
-> When single cell is selected event is emitted, no matter if the **selection mode** is **single** or **multiple**. In multi-cell selection mode when you select a range of cells event is emitted.
+> When single cell is selected event is emitted, no matter if the **selection mode** is **single** or **multiple**. In multi-cell selection mode when you select a range of cells event is emitted.
### {ComponentTitle} None Selection
-If you want to disable cell selection you can just set to **none**. In this mode when you click over the cell or try to navigate with keyboard, the cell is **not selected**, only the **activation style** is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.
+If you want to disable cell selection you can just set to **none**. In this mode when you click over the cell or try to navigate with keyboard, the cell is **not selected**, only the **activation style** is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.
## Keyboard Navigation Interactions
@@ -103,7 +103,7 @@ Below are the methods that you can use in order to select ranges, clear selectio
### Select range
- - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.
+ - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.
```ts
@@ -149,7 +149,7 @@ gridRef.current.selectRange(range)
### Clear cell selection
- will clear the current cell selection.
+ will clear the current cell selection.
```ts
@@ -180,7 +180,7 @@ gridRef.current.clearCellSelection();
### Get Selected Data
- will return array of the selected data in Dictionary format. Examples below:
+ will return array of the selected data in Dictionary format. Examples below:
```razor
<{ComponentSelector} @ref=grid CellSelection="GridSelectionMode.Multiple" AutoGenerate=true><{ComponentSelector}>
@@ -198,7 +198,7 @@ gridRef.current.clearCellSelection();
- will return array of the selected data in format depending on the selection. Examples below:
+ will return array of the selected data in format depending on the selection. Examples below:
- If three different single cells are selected:
@@ -272,13 +272,13 @@ expectedData = [
The multi-cell selection is index based (DOM elements selection).
-- - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
-- - On paging selected cells will be cleared. Selection wont be persisted across pages.
-- - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
-- - On column resizing selected cells will not be cleared.
-- - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
-- - Selected cell will not be cleared. Same as hiding
-- - On column grouping selected cells will not be cleared.
+- - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
+- - On paging selected cells will be cleared. Selection wont be persisted across pages.
+- - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
+- - On column resizing selected cells will not be cleared.
+- - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
+- - Selected cell will not be cleared. Same as hiding
+- - On column grouping selected cells will not be cleared.
@@ -408,7 +408,7 @@ To get started with styling the selection, we need to import the `index` file, w
### Define Colors
-Once done, we can make use of the and functions. With them, we define the colors we would like to use for our selection range:
+Once done, we can make use of the and functions. With them, we define the colors we would like to use for our selection range:
```scss
$text-color:contrast-color($default-palette, 'primary', 900);
@@ -418,7 +418,7 @@ Once done, we can make use of the passing our `text-color`, `background-color` and `border-yellow` variables as `$cell-selected-text-color`, `$cell-selected-background` and `$cell-active-border-color`, respectively:
+Next we create a new theme that extends the passing our `text-color`, `background-color` and `border-yellow` variables as `$cell-selected-text-color`, `$cell-selected-background` and `$cell-active-border-color`, respectively:
```scss
$custom-grid-theme: grid-theme(
@@ -464,7 +464,7 @@ The sample will not be affected by the selected global theme from **Change Theme
## API References
-
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
index 0451d61010..3f9974d0d7 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Clipboard Overview
-Copy to clipboard operations are now available in the . This functionality provides a fast, easy and customizable way to copy data of the {Platform} through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the into Excel or other external programs.
+Copy to clipboard operations are now available in the . This functionality provides a fast, easy and customizable way to copy data of the {Platform} through the current multi cell data select. System Clipboard behavior gives the user ability to copy data from the into Excel or other external programs.
## {Platform} {ComponentTitle} Clipboard Example
@@ -42,7 +42,7 @@ Copy behavior is working with the default interaction defined by the browser and
- Both the **cut** and **copy** events are not natively supported in Internet Explorer. The exception is the
-**paste** event (IE 11) which is emitted but does not expose the property in the event.
+**paste** event (IE 11) which is emitted but does not expose the property in the event.
In order to **copy** cells in IE 11, you can use the keyboard selection. Hold the SHIFT key in order to make a multi-cell selection, press CTRL + C in order to copy.
@@ -59,22 +59,22 @@ You can use a custom paste handler in order to configure **paste** behavior, hav
## API Usage
-We expose property, which handles the following options:
-- Enables/disables copying of selected cells.
-- Include the associated headers when copying.
-- Apply any existing column formatters to the copied data.
-- The string separator to use the for formatting the data in the clipboard. Default is `/t`
+We expose property, which handles the following options:
+- Enables/disables copying of selected cells.
+- Include the associated headers when copying.
+- Apply any existing column formatters to the copied data.
+- The string separator to use the for formatting the data in the clipboard. Default is `/t`
Excel can automatically detect text that is separated by tabs (tab-delimited `/t`) and properly paste the data into separate columns. When the paste format doesn't work, and everything you paste appears in a single column, then Excel's delimiter is set to another character, or your text is using spaces instead of tabs.
-- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the .
+- Emitted when a copy operation is executed. Fired only if copy behavior is enabled through the .
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
index b2d02a9712..e63dfb25e9 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
@@ -18,7 +18,7 @@ import collapsedIndicator from '@xplat-images/general/collapsed_indicator.png';
# {Platform} {ComponentTitle} Collapsible Column Groups Overview
-The {ProductName} Collapsible Column Groups feature in {Platform} {ComponentTitle} allows you to organize and manage multiple levels of nested columns and column groups in the by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.
+The {ProductName} Collapsible Column Groups feature in {Platform} {ComponentTitle} allows you to organize and manage multiple levels of nested columns and column groups in the by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.
## {Platform} {ComponentTitle} Collapsible Column Groups Example
@@ -26,7 +26,7 @@ The {ProductName} Collapsible Column Groups feature in {Platform} {ComponentTitl
## Setup
-To get started with the and the **Collapsible multi-column headers** feature, first you need to install {ProductName} by typing the following command:
+To get started with the and the **Collapsible multi-column headers** feature, first you need to install {ProductName} by typing the following command:
```cmd
@@ -61,9 +61,9 @@ Also, we strongly suggest that you take a brief look at [multi-column headers](m
**Collapsible Column Groups** is a part of the multi-column headers feature which provides a way to collapse/expand a column group to a smaller set of data. When a column group is collapsed, a subset of the columns will be shown to the end-user and the other child columns of the group will hide. Each collapsed/expanded column can be bound to the grid data source, or it may be unbound, thus calculated.
-In order to define a column group as collapsible, you need to set the property on the to **true**.
+In order to define a column group as collapsible, you need to set the property on the to **true**.
-You need to define the property to at least two child columns. At least one column must be visible when the group is collapsed ( set to **true**) and at least one column must be hidden when the group is expanded ( set to `false`), otherwise the **collapsible functionality will be disabled**. If is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed.
+You need to define the property to at least two child columns. At least one column must be visible when the group is collapsed ( set to **true**) and at least one column must be hidden when the group is expanded ( set to `false`), otherwise the **collapsible functionality will be disabled**. If is not specified for some of the child columns, then this column will be always visible regardless of whether the parent state is expanded or collapsed.
Let's see the markup below:
@@ -158,16 +158,16 @@ To summarize, every child column has three states:
- Can be visible, when its parent is collapsed.
- Can be hidden, when its parent is collapsed.
-The initial state of the column group which is specified as collapsible is set to **true**, but you can easily change this behavior by setting it to **false**.
+The initial state of the column group which is specified as collapsible is set to **true**, but you can easily change this behavior by setting it to **false**.
## Expand/Collapse Indicator Template
-Default expand indicator for the is the following:
+Default expand indicator for the is the following:
-Default collapse indicator for the is the following:
+Default collapse indicator for the is the following:
@@ -261,7 +261,7 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
### Using Property
-You can define custom expand/collapse template and provide it to each of the collapsible column groups using property. Check the markup below:
+You can define custom expand/collapse template and provide it to each of the collapsible column groups using property. Check the markup below:
```html
@@ -303,9 +303,9 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc
## API References
-
-
-
+
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
index 4445a96d0e..bfef12531c 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Column Hiding
-{ProductName} provides an with an `ColumnHidingDirective` which allows users to perform column hiding directly through the user interface or by using the {Platform} component.
+{ProductName} provides an with an `ColumnHidingDirective` which allows users to perform column hiding directly through the user interface or by using the {Platform} component.
The {ProductName} has a built-in column hiding UI, which can be used through the {Platform} {ComponentTitle} toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The {Platform} {ComponentTitle} Column Hiding feature is especially useful when one wants to decrease the size of the grid and to eliminate the need for tabbing through redundant fields.
@@ -29,7 +29,7 @@ The {ProductName} has a built-in column hiding UI, which can be used through the
## {ComponentTitle} Setup
-Let's start by creating our and binding it to our data. We will also enable both filtering and sorting for the columns.
+Let's start by creating our and binding it to our data. We will also enable both filtering and sorting for the columns.
@@ -229,9 +229,9 @@ Let's start by creating our in the 's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.
+The built-in Column Hiding UI is placed inside an in the 's toolbar. We can show/hide the Column Hiding UI by using this exact dropdown.
-For this purpose all we have to do is set both the and the inside of the .
+For this purpose all we have to do is set both the and the inside of the .
@@ -401,15 +401,15 @@ For this purpose all we have to do is set both the
-The provides us with some useful properties when it comes to using the toolbar's column hiding UI.
+The provides us with some useful properties when it comes to using the toolbar's column hiding UI.
-By using the property, we will set the title that is displayed inside the dropdown button in the toolbar.
+By using the property, we will set the title that is displayed inside the dropdown button in the toolbar.
-The provides us with some useful properties when it comes to using the toolbar's column hiding UI.
+The provides us with some useful properties when it comes to using the toolbar's column hiding UI.
-By using the and properties, we will set the title and filter prompt that are displayed inside the dropdown in the toolbar.
+By using the and properties, we will set the title and filter prompt that are displayed inside the dropdown in the toolbar.
@@ -579,7 +579,7 @@ By using the
-By using the `ColumnsAreaMaxHeight` property of the , we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.
+By using the `ColumnsAreaMaxHeight` property of the , we can set the maximum height of the area that contains the column actions. This way if we have a lot of actions and not all of them can fit in the container, a scrollbar will appear, which will allow us to scroll to any action we want.
```typescript
public ngAfterViewInit() {
@@ -618,7 +618,7 @@ You can see the result of the code from above at the beginning of this article i
## Custom Column Hiding UI
-Let's say we want to manually define our , add the `ColumnHidingDirective`so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the `IgxColumnActionsModule`.
+Let's say we want to manually define our , add the `ColumnHidingDirective`so that it knows what its purpose would be and put it anywhere on the page. First, however, we need to import the `IgxColumnActionsModule`.
```typescript
// app.module.ts
@@ -635,7 +635,7 @@ import {
export class AppModule {}
```
-Now let's create our . In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the `Columns` property of the component to the columns of our and include some custom styles to make our application look even better!
+Now let's create our . In our application, we will place it next to the grid (which is not the case with the toolbar's column hiding UI, where the component is inside a dropdown by design). We will also set the `Columns` property of the component to the columns of our and include some custom styles to make our application look even better!
```html
@@ -686,7 +686,7 @@ Now let's create our
. In o
### Add title and filter prompt
-A couple more things we can do in order to enrich the user experience of our column hiding component is to set the
and the `FilterColumnsPrompt` properties. The
is displayed on the top and the `FilterColumnsPrompt` is the prompt text that is displayed in the filter input of our column hiding UI.
+A couple more things we can do in order to enrich the user experience of our column hiding component is to set the
and the `FilterColumnsPrompt` properties. The
is displayed on the top and the `FilterColumnsPrompt` is the prompt text that is displayed in the filter input of our column hiding UI.
```html
@@ -737,7 +737,7 @@ Now all we have to do is bind the `Checked` property of both radio buttons respe
### Disable hiding of a column
-We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their
property to true.
+We can easily prevent the user from being able to hide columns through the column hiding UI by simply setting their
property to true.
@@ -1199,12 +1199,12 @@ Then set the related CSS variables for the related components. We will apply the
## API References
-
-
-
-
-
-
+
+
+
+
+
+
## Additional Resources
- [Virtualization and Performance](virtualization.md)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
index b342ef6fb1..57777e0b12 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
@@ -32,7 +32,7 @@ This allows to attach handlers for any event emitted by the element, otherwise t
-If the pinned area exceeds its maximum allowed width (80% of the total width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.
+If the pinned area exceeds its maximum allowed width (80% of the total width), a visual clue notifies the end user that the drop operation is forbidden and pinning is not possible. This means you won't be allowed to drop a column in the pinned area.
@@ -82,7 +82,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => {
## Overview
-**Column moving** feature is enabled on a per-grid level, meaning that the could have either movable or immovable columns. This is done via the input of the .
+**Column moving** feature is enabled on a per-grid level, meaning that the could have either movable or immovable columns. This is done via the input of the .
@@ -154,7 +154,7 @@ const headerTemplate = (ctx: IgrCellTemplateContext) => {
In addition to the drag and drop functionality, the Column Moving feature also provides API methods to allow moving a column/reordering columns programmatically:
- - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column.
+ - Moves a column before or after another column (a target). The first parameter is the column to be moved, and the second parameter is the target column. Also accepts an optional third parameter `Position` (representing a value), which determines whether to place the column before or after the target column.
@@ -181,7 +181,7 @@ grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);
- - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.
+ - Moves a column to a specified visible index. If the passed index parameter is invalid (is negative, or exceeds the number of columns), or if the column is not allowed to move to this index (if inside another group), no operation is performed.
```typescript
@@ -201,13 +201,13 @@ idColumn.move(3);
```
-Note that when using the column moving feature, the event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the property to true.
+Note that when using the column moving feature, the event will be emitted if the operation was successful. Also note that in comparison to the drag and drop functionality, using the column moving feature does not require setting the property to true.
## Events
-There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are , `ColumnMoving` and .
+There are several events related to the column moving to provide a means for tapping into the columns' drag and drop operations. These are , `ColumnMoving` and .
-You can subscribe to the event of the to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the **Category** column after the **Change On Year(%)** column in the following code snippet.
+You can subscribe to the event of the to implement some custom logic when a column is dropped to a new position. For example, you can cancel dropping the **Category** column after the **Change On Year(%)** column in the following code snippet.
```html
@@ -289,7 +289,7 @@ igRegisterScript("onColumnMovingEnd", (event) => {
## Styling
-To get started with styling the column moving headers, we need to import the `index` file, where all the theme functions and component mixins live:
+To get started with styling the column moving headers, we need to import the `index` file, where all the theme functions and component mixins live:
```scss
@use "igniteui-{Platform}/theming" as *;
@@ -298,7 +298,7 @@ To get started with styling the and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters.
+Following the simplest approach, we create a new theme that extends the and accepts the `$ghost-header-background`, `$ghost-header-text-color` and the `$ghost-header-icon-color` parameters.
```scss
// Define dark theme for the column moving
@@ -329,7 +329,7 @@ Depending on the component [**View Encapsulation**](/components/themes/sass/comp
### Defining a Color Palette
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
**igx-palette** generates a color palette based on the primary and secondary colors that are passed:
@@ -341,7 +341,7 @@ $black-color: #575757;
$dark-palette: palette($primary: $yellow-color, $secondary: $black-color);
```
-And then with we can easily retrieve color from the palette.
+And then with we can easily retrieve color from the palette.
```scss
$dark-grid-column-moving-theme: grid-theme(
@@ -361,7 +361,7 @@ The color and palette are powerful functions for generating and retrieving color
Going further with the theming engine, you can build a robust and flexible structure that benefits from [schemas](/components/themes/sass/schemas.html). A **schema** is a recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component, in this case - .
+Extend one of the two predefined schemas, that are provided for every component, in this case - .
```scss
// Extending the dark grid schema
@@ -380,7 +380,7 @@ $dark-grid-column-moving-schema: extend($_light-grid,
);
```
-In order to apply our custom schema we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:
+In order to apply our custom schema we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:
```scss
// Extending the global dark-schema
@@ -452,8 +452,8 @@ Then set the related CSS properties to this class:
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
index b469b5d588..33162f715f 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
@@ -20,7 +20,7 @@ The {ProductName} Column Pinning feature in {Platform} {ComponentTitle} enables
## {Platform} {ComponentTitle} Column Pinning Example
-This example demonstrates how you can pin a column or multiple columns to the left or right side of the .
+This example demonstrates how you can pin a column or multiple columns to the left or right side of the .
@@ -28,7 +28,7 @@ This example demonstrates how you can pin a column or multiple columns to the le
## Column Pinning API
-Column pinning is controlled through the property of the . Pinned columns are rendered on the left side of the by default and stay fixed through horizontal scrolling of the unpinned columns in the body.
+Column pinning is controlled through the property of the . Pinned columns are rendered on the left side of the by default and stay fixed through horizontal scrolling of the unpinned columns in the body.
@@ -149,7 +149,7 @@ constructor() {
-You may also use the or methods of the to pin or unpin columns by their field name:
+You may also use the or methods of the to pin or unpin columns by their field name:
@@ -211,17 +211,17 @@ gridRef.current.unpinColumn('Debut');
Both methods return a boolean value indicating whether their respective operation is successful or not. Usually the reason they fail is that the column is already in the desired state.
-A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index.
+A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index.
-A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index.
+A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the event and changing the property of the event arguments to the desired position index.
-A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the `ColumnPinScript` event and providing a JavaScript function for changing the property of the event arguments to the desired position index.
+A column is pinned to the right of the rightmost pinned column. Changing the order of the pinned columns can be done by subscribing to the `ColumnPinScript` event and providing a JavaScript function for changing the property of the event arguments to the desired position index.
@@ -285,7 +285,7 @@ igRegisterScript("onColumnPin", onColumnPin, false);
## Pinning Position
-You can change the column pinning position via the configuration option. It allows you to set the columns position to either Start or End.
+You can change the column pinning position via the configuration option. It allows you to set the columns position to either Start or End.
When set to End the columns are rendered at the end of the grid, after the unpinned columns. Unpinned columns can be scrolled horizontally, while the pinned columns remain fixed on the right.
@@ -808,13 +808,13 @@ public toggleColumn(col: IgcColumnComponent) {
## Pinning Limitations
-- Setting column widths in percentage (%) explicitly makes the body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the .
+- Setting column widths in percentage (%) explicitly makes the body and header content to be misaligned when there are pinned columns. For column pinning to function correctly the column widths should be in pixels (px) or auto-assigned by the .
## Styling
-The allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's exposes a wide variety of properties, which allow the customization of all the features of the grid.
In the below steps, we are going through the steps of customizing the grid's Pinning styling.
@@ -829,7 +829,7 @@ To begin the customization of the Pinning feature, you need to import the `index
```
### Defining Custom Theme
-Next, create a new theme, that extends the and accepts the parameters, required to customize the Pinning feature as desired.
+Next, create a new theme, that extends the and accepts the parameters, required to customize the Pinning feature as desired.
```scss
$custom-theme: grid-theme(
@@ -843,7 +843,7 @@ $custom-theme: grid-theme(
```
### Defining a Custom Color Palette
-In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the and functions.
+In the approach, that was described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the and functions.
`igx-palette` generates a color palette, based on provided primary and secondary colors.
```scss
@@ -977,8 +977,8 @@ Then set the related CSS properties to this class:
## API References
-
-
+
+
## Additional Resources
- [Virtualization and Performance](virtualization.md)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
index a6b2308583..5b58839ed8 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Column Resizing Overview
-The {ProductName} Column Resizing feature in {Platform} {ComponentTitle} allows users to easily adjust the width of the columns of the . By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.
+The {ProductName} Column Resizing feature in {Platform} {ComponentTitle} allows users to easily adjust the width of the columns of the . By default, they will see a temporary resize indicator while the drag resizing operation is in effect. There are several resizing options available - Resizing Columns in Pixels/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.
## {Platform} {ComponentTitle} Column Resizing Example
@@ -24,7 +24,7 @@ The {ProductName} Column Resizing feature in {Platform} {ComponentTitle} allows
-**Column resizing** is also enabled per-column level, meaning that the can have a mix of resizable and non-resizable columns. This is done via the input of the .
+**Column resizing** is also enabled per-column level, meaning that the can have a mix of resizable and non-resizable columns. This is done via the input of the .
@@ -80,7 +80,7 @@ The {ProductName} Column Resizing feature in {Platform} {ComponentTitle} allows
-You can subscribe to the event of the to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the object, are exposed through the event arguments.
+You can subscribe to the event of the to implement some custom logic when a column is resized. Both, previous and new column widths, as well as the object, are exposed through the event arguments.
@@ -442,7 +442,7 @@ When resizing columns with width in percentages, the horizontal amount of the mo
## Restrict Column Resizing
-You can also configure the minimum and maximum allowable column widths. This is done via the and inputs of the . In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by and .
+You can also configure the minimum and maximum allowable column widths. This is done via the and inputs of the . In this case the resize indicator drag operation is restricted to notify the user that the column cannot be resized outside the boundaries defined by and .
@@ -629,9 +629,9 @@ or
## Auto-Size Columns on Double Click
-Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case is set on that column and the new width exceeds that value. In this case the column will be sized according to preset value.
+Each column can be **auto sized** by double clicking the right side of the header - the column will be sized to the longest currently visible cell value, including the header itself. This behavior is enabled by default, no additional configuration is needed. However, the column will not be auto-sized in case is set on that column and the new width exceeds that value. In this case the column will be sized according to preset value.
-You can also auto-size a column dynamically using the exposed method on .
+You can also auto-size a column dynamically using the exposed method on .
@@ -723,7 +723,7 @@ column.autosize();
## Auto-Size Columns on Initialization
-Each column can be set to auto-size on initialization by setting to 'auto':
+Each column can be set to auto-size on initialization by setting to 'auto':
```html
@@ -759,7 +759,7 @@ This approach is more performance optimized than auto-sizing post initialization
## Styling
-To get started with the styling of the column resize line, we need to import the index file, where all the theme functions and component mixins live:
+To get started with the styling of the column resize line, we need to import the index file, where all the theme functions and component mixins live:
```scss
@use "igniteui-angular/theming" as *;
@@ -768,7 +768,7 @@ To get started with the styling of the and accepts many parameters as well as the `$resize-line-color` parameter.
+The simplest approach to achieve this is to create a new theme that extends the and accepts many parameters as well as the `$resize-line-color` parameter.
```scss
$custom-grid-theme: grid-theme(
@@ -789,7 +789,7 @@ $custom-grid-theme: grid-theme(
```
### Defining a Color Palette
-Instead of hard-coding the color values, we can achieve greater flexibility in terms of colors by using the and functions.
+Instead of hard-coding the color values, we can achieve greater flexibility in terms of colors by using the and functions.
`igx-palette` generates a color palette based on the specified primary and secondary color:
@@ -800,7 +800,7 @@ $secondary-color: #BDBDBD;
$custom-theme-palette: palette($primary: $primary-color, $secondary: $secondary-color);
```
-And then, with , we can easily retrieve the color from the palette.
+And then, with , we can easily retrieve the color from the palette.
```scss
$custom-grid-theme: grid-theme(
@@ -816,7 +816,7 @@ The `igx-color` and `igx-palette` are powerful functions for generating and retr
### Using Schemas
Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
-Extend the predefined schema provided for every component, in this case - schema:
+Extend the predefined schema provided for every component, in this case - schema:
```scss
// Extending the light grid schema
@@ -835,7 +835,7 @@ $light-grid-schema: extend($_light-grid,
);
```
-In order to apply our custom schema, we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:
+In order to apply our custom schema, we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component theme:
```scss
// Extending the global light-schema
@@ -903,8 +903,8 @@ Then set the related CSS property for that class:
## API References
-
-
+
+
## Additional Resources
- [Virtualization and Performance](virtualization.md)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
index 5d5bc4672c..95dc1cc821 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Column Selection Overview
-The {Platform} {ComponentTitle} Column Selection feature in {ProductName} offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.
+The {Platform} {ComponentTitle} Column Selection feature in {ProductName} offers a simplified and Excel-like way to select and highlight an entire column with a single click. It can be enabled through the input. Thanks to the rich API, the feature allows for easy manipulation of the selection state, data extraction from the selected fractions, data analysis operations, and visualizations.
## {Platform} {ComponentTitle} Column Selection Example
@@ -43,14 +43,14 @@ The sample below demonstrates the three types of `{ComponentName}`'s **column se
## Basic Usage
-The column selection feature can be enabled through the input, which takes values.
+The column selection feature can be enabled through the input, which takes values.
## Interactions
-The default selection mode is `None`. If set to `Single` or `Multiple`, all of the presented columns will be . With that being said, in order to select a column, we just need to click on one, which will mark it as . If the column is not selectable, no selection style will be applied on the header, while hovering.
+The default selection mode is `None`. If set to `Single` or `Multiple`, all of the presented columns will be . With that being said, in order to select a column, we just need to click on one, which will mark it as . If the column is not selectable, no selection style will be applied on the header, while hovering.
-The [Multi Column Headers](multi-column-headers.md) feature does not reflect on the input. The `ColumnGroupComponent` is , if at least one of its children has the selection behavior enabled. In addition, the component is marked as if all of its descendants are .
+The [Multi Column Headers](multi-column-headers.md) feature does not reflect on the input. The is , if at least one of its children has the selection behavior enabled. In addition, the component is marked as if all of its descendants are .
@@ -73,7 +73,7 @@ The [Multi Column Headers](multi-column-headers.md) feature does not reflect on
## Keyboard Combinations
-The keyboard combinations are available only when the grid input is set to `multiple`.
+The keyboard combinations are available only when the grid input is set to `multiple`.
There are two scenarios for keyboard navigation of the **Column Selection** feature:
@@ -82,10 +82,10 @@ There are two scenarios for keyboard navigation of the **Column Selection** feat
## API Manipulations
-The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as by setting the corresponding **setter**.
+The **API** provides some additional capabilities when it comes to the **non-visible** columns such that, every **hidden** column could be marked as by setting the corresponding **setter**.
-The above statement also applies to the `ColumnGroupComponent`, except that when the property is changed it changes the state of its descendants.
+The above statement also applies to the , except that when the property is changed it changes the state of its descendants.
More information regarding the API manipulations could be found in the [API References](#api-references) section.
@@ -185,7 +185,7 @@ $custom-grid-theme: grid-theme(
- accepts several parameters but those are the five responsible for changing the appearance of all selected columns:
+ accepts several parameters but those are the five responsible for changing the appearance of all selected columns:
- **$row-selected-background** - sets the background of the selected fraction.
- **$row-selected-text-color** - sets the text color of the selected fraction
- **$row-selected-hover-background** - sets the color of the hovered cell or bunch of cells.
@@ -227,8 +227,8 @@ The sample will not be affected by the selected global theme from **Change Theme
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
index 262948f634..bf39e46c50 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
@@ -28,17 +28,17 @@ The {Platform} {ComponentTitle} provides a default handling of **number**, **str
## {Platform} {ComponentTitle} Default Template
-If you want to enable a data type-specific template, you should set the column input, otherwise the column will be treated as a string column since that is the default value for column .
+If you want to enable a data type-specific template, you should set the column input, otherwise the column will be treated as a string column since that is the default value for column .
-The following sections describe the default templates for each .
+The following sections describe the default templates for each .
### String
-This column is not changing the appearance or format of the cell value.
+This column is not changing the appearance or format of the cell value.
### Number
-If the is set to **number**, the cell value will be formatted based on application or grid's settings, as well as when property is specified. Then the number format will be changed based on them, for example it might change the:
+If the is set to **number**, the cell value will be formatted based on application or grid's settings, as well as when property is specified. Then the number format will be changed based on them, for example it might change the:
- Number of digits after the decimal point
- Decimal separator with `,` or `.`
@@ -108,7 +108,7 @@ const formatOptions : IgrColumnPipeArgs = {
### DateTime, Date and Time
-The appearance of the date portions will be set (e.g. day, month, year) based on format or input. The pipe arguments can be used to specify a custom date format or timezone:
+The appearance of the date portions will be set (e.g. day, month, year) based on format or input. The pipe arguments can be used to specify a custom date format or timezone:
- **format** - The default value for formatting the date is `'mediumDate'`. Other available options are `'short'`, `'long'`, `'shortDate'`, `'fullDate'`, `'longTime'`, `'fullTime'` and etc.
- **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world:
@@ -337,7 +337,7 @@ When `AutoGenerate` is used for the columns, the grid analyses the values in the
#### Default template
-The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) or {ComponentTitle} .
+The default template will show a numeric value with currency symbol that would be either prefixed or suffixed. Both currency symbol location and number value formatting is based on the provided Application [LOCALE_ID](https://angular.io/api/core/LOCALE_ID) or {ComponentTitle} .
**By using LOCALE_ID**
@@ -366,7 +366,7 @@ The default template will show a numeric value with currency symbol that would b
-By using the input the end-user can customize the number format by **decimal point**, **currencyCode** and **display**.
+By using the input the end-user can customize the number format by **decimal point**, **currencyCode** and **display**.
```ts
@@ -711,8 +711,8 @@ public init(column: IgxColumnComponent) {
## API References
-
-
+
+
## Additional Resources
- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
index a6bd183078..8f083f58f2 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
@@ -15,20 +15,20 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Conditional Styling
-The {ProductName} Conditional Styling feature in {Platform} {ComponentTitle} allows custom styling on a row or cell level. The Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.
+The {ProductName} Conditional Styling feature in {Platform} {ComponentTitle} allows custom styling on a row or cell level. The Conditional Styling functionality is used to visually emphasize or highlight data that meets certain criteria, making it easier for users to identify important information or trends within the grid.
## {ComponentTitle} Conditional Row Styling
-The component in {ProductName} provides two ways to **conditional styling of rows** based on custom rules.
+The component in {ProductName} provides two ways to **conditional styling of rows** based on custom rules.
-- By setting input on the component;
-- By setting input on the component;
+- By setting input on the component;
+- By setting input on the component;
Further in this topic we will cover both of them in more details.
### Using Row Classes
-You can conditionally style the rows by setting the input and define custom rules.
+You can conditionally style the rows by setting the input and define custom rules.
```html
@@ -66,7 +66,7 @@ constructor() {
```
-The input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
+The input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
```typescript
@@ -135,9 +135,9 @@ Use **::ng-deep** or **ViewEncapsulation.Non** to force the custom styles down t
### Using Row Styles
-The control exposes the property which allows conditional styling of the data rows. Similar to it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).
+The control exposes the property which allows conditional styling of the data rows. Similar to it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling (without any conditions).
-> The callback signature for both and is:
+> The callback signature for both and is:
```ts
@@ -462,12 +462,12 @@ constructor() {
## Overview
-The component in {ProductName} provides two ways to **conditional styling of cells** based on custom rules.
+The component in {ProductName} provides two ways to **conditional styling of cells** based on custom rules.
-- By setting the input to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.
+- By setting the input to an object literal containing key-value pairs. The key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value. The result is a convenient material styling of the cell.
### Using Cell Classes
-You can conditionally style the cells by setting the input and define custom rules.
+You can conditionally style the cells by setting the input and define custom rules.
@@ -578,7 +578,7 @@ constructor() {
-The input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
+The input accepts an object literal, containing key-value pairs, where the key is the name of the CSS class, while the value is either a callback function that returns a boolean, or boolean value.
@@ -786,7 +786,7 @@ Use **::ng-deep** or **ViewEncapsulation.None** to force the custom styles down
-- By using the input ` which accepts an object literal where the keys are style properties and the values are expressions for evaluation.
+- By using the input ` which accepts an object literal where the keys are style properties and the values are expressions for evaluation.
> The callback signature for both `cellStyles` and `cellClasses` is now changed to:
@@ -804,7 +804,7 @@ Use **::ng-deep** or **ViewEncapsulation.None** to force the custom styles down
### Using Cell Styles
-Columns expose the property which allows conditional styling of the column cells. Similar to it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).
+Columns expose the property which allows conditional styling of the column cells. Similar to it accepts an object literal where the keys are style properties and the values are expressions for evaluation. Also, you can apply regular styling with ease (without any conditions).
Let's define our styles:
@@ -884,7 +884,7 @@ const webGridCellStyles = {
-On `ngOnInit` we will add the configuration for each column of the predefined `Columns` collection, which is used to create the columns dynamically.
+On `ngOnInit` we will add the configuration for each column of the predefined `Columns` collection, which is used to create the columns dynamically.
```ts
public ngOnInit() {
@@ -1103,7 +1103,7 @@ const cellStylesHandler = {
-On `ngOnInit` we will add the configuration for each column of the predefined `Columns` collection, which is used to create the columns dynamically.
+On `ngOnInit` we will add the configuration for each column of the predefined `Columns` collection, which is used to create the columns dynamically.
```ts
public ngOnInit() {
@@ -1289,8 +1289,8 @@ const editDone = (event: IgrGridEditEventArgs) => {
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
index 04d408e39d..e3466e55c7 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Editing
-The {ProductName} Cell Editing feature in {Platform} {ComponentTitle} provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:
+The {ProductName} Cell Editing feature in {Platform} {ComponentTitle} provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:
- [Cell Editing](cell-editing.md)
- [Row Editing](row-editing.md)
- Batch Editing (Coming Soon)
@@ -27,21 +27,21 @@ Additionally, **Cell editing** exposes several default editors based on the colu
## Setup
-In order to specify which edit mode should be enabled, the exposes the following boolean properties - and .
+In order to specify which edit mode should be enabled, the exposes the following boolean properties - and .
-The property enables you to specify the following options:
+The property enables you to specify the following options:
- **false** - the editing for the corresponding column will be disabled. This is the default value.
- **true** - the editing for the corresponding column will be enabled.
->Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the .
+>Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the .
-The property enables you to specify the following options:
+The property enables you to specify the following options:
- **false** - the row editing in the corresponding grid will be disabled. This is the default value.
- **true** - the row editing in the corresponding grid will be enabled.
-In the , if you set property to true, and the property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**.
+In the , if you set property to true, and the property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**.
[Batch editing](batch-editing.md) in the grid can be enabled for both [cell editing](cell-editing.md) and [row editing](row-editing.md) modes. In order to set up batch editing it is necessary to provide to the grid a **TransactionService**.
@@ -51,7 +51,7 @@ In the , if you s
### Editing Templates
- If you want to use a data type specific edit templates, you should specify the column's property. So let's now see what are the default templates for each type:
+ If you want to use a data type specific edit templates, you should specify the column's property. So let's now see what are the default templates for each type:
- For `string` data type, default template is using .
- For `number` data type, default template is using type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.
@@ -76,21 +76,21 @@ The grid exposes a wide array of events that provide greater control over the ed
| Event | Description | Arguments | Cancellable |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- |
- | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** |
- | | Fires when a cell **enters edit mode** (after ) | | **true** |
- | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER ) | | **true** |
- | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** |
- | | Fires when a cell **exits edit mode** | | **false** |
- | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** |
- | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** |
- | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** |
+ | | If `RowEditing` is enabled, fires when a row enters edit mode | | **true** |
+ | | Fires when a cell **enters edit mode** (after ) | | **true** |
+ | | If value is changed, fires just **before** a cell's value is **committed** (e.g. by pressing ENTER ) | | **true** |
+ | | If value is changed, fires **after** a cell has been edited and cell's value is **committed** | | **false** |
+ | | Fires when a cell **exits edit mode** | | **false** |
+ | | If `RowEditing` is enabled, fires just before a row in edit mode's value is **committed** (e.g. by clicking the `Done` button on the Row Editing Overlay) | | **true** |
+ | | If `RowEditing` is enabled, fires **after** a row has been edited and new row's value has been **committed**. | | **false** |
+ | | If `RowEditing` is enabled, fires when a row **exits edit mode** | | **false** |
### Event Cancellation
-- - Neither `Row` nor `Cell` will enter edit mode.
-- - Prevents entering cell edit. If is enabled, row edit will be triggered, although cell edit will remain forbidden.
-- - Allowed `Cell` and/or `Row` edit, hitting **Done** button or **Enter** won't commit the value or row transaction. Cell editing and Row editing won't be closed until **Cancel** button is clicked.
-- - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes.
+- - Neither `Row` nor `Cell` will enter edit mode.
+- - Prevents entering cell edit. If is enabled, row edit will be triggered, although cell edit will remain forbidden.
+- - Allowed `Cell` and/or `Row` edit, hitting **Done** button or **Enter** won't commit the value or row transaction. Cell editing and Row editing won't be closed until **Cancel** button is clicked.
+- - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting **Done** does not commit or close the row. **Cancel** button closes the editing process and the transaction without committing the changes.
The following sample demonstrates the editing execution sequence in action:
@@ -177,8 +177,8 @@ function onSorting(args: IgrSortingEventArgs) {
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
index 1db87b3cb0..cd6dee57ce 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
@@ -24,7 +24,7 @@ The {Platform} {ComponentTitle} exposes an Excel-style filtering feature that pr
## Usage
-To turn on the component's Excel-style filtering, two inputs should be set. The should be set to **true** and the should be set to `ExcelStyleFilter` value.
+To turn on the component's Excel-style filtering, two inputs should be set. The should be set to **true** and the should be set to `ExcelStyleFilter` value.
```html
@@ -69,7 +69,7 @@ To apply a filter with different expressions, you can click the **Text filter**,
## Configure Menu Features
-Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: , , , .
+Sorting, pinning and hiding features can be removed from the filter menu using the corresponding inputs: , , , .
@@ -135,7 +135,7 @@ Sorting, pinning and hiding features can be removed from the filter menu using t
```
-In the sample below **Product Name** and **Discontinued** columns have all four features enabled, **Quantity Per Unit** have all three disabled, **Unit Price** has only sorting and **Order Date** has only pinning and hiding and all are .
+In the sample below **Product Name** and **Discontinued** columns have all four features enabled, **Quantity Per Unit** have all three disabled, **Unit Price** has only sorting and **Order Date** has only pinning and hiding and all are .
@@ -290,9 +290,9 @@ The following code demonstrates how to define a custom Excel style filter menu u
-If you want to further customize the Excel style filter menu, you can use the property to define a custom template for the header icon of the menu.
+If you want to further customize the Excel style filter menu, you can use the property to define a custom template for the header icon of the menu.
-The following code demonstrates how to customize the Excel style filter menu using the :
+The following code demonstrates how to customize the Excel style filter menu using the :
```razor
@@ -637,7 +637,7 @@ By default, the Excel Style Filtering dialog displays the items in a list view.
## External Excel Style filtering
-As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the . So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the .
+As you see at the demos above the default appearance of the Excel Style filtering dialog is inside the . So this dialog is only visible when configuring the filters. There is a way to make that dialog stay always visible - it can be used outside of the grid as a standalone component. In the demo below, the Excel style filtering is declared separately of the .
### Demo
@@ -646,7 +646,7 @@ As you see at the demos above the default appearance of the Excel Style filterin
### Usage
-In order to configure the Excel style filtering component, you should set its property to one of the {ComponentTitle}'s columns. In the sample above, we have bound the property to the value of an SelectComponent that displays the {ComponentTitle}'s columns.
+In order to configure the Excel style filtering component, you should set its property to one of the {ComponentTitle}'s columns. In the sample above, we have bound the property to the value of an SelectComponent that displays the {ComponentTitle}'s columns.
@@ -800,7 +800,7 @@ $custom-drop-down: drop-down-theme(
);
```
-In this example we only changed some of the parameters for the listed components, but the , , , , themes provide way more parameters to control their respective styling.
+In this example we only changed some of the parameters for the listed components, but the , , , , themes provide way more parameters to control their respective styling.
The last step is to **include** the component mixins, each with its respective theme. We will also set the color property for the input's placeholder.
@@ -846,7 +846,7 @@ If the component is using an [Emulated](../themes/styles.md#view-encapsulation)
### Defining a Color Palette
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the and functions.
`igx-palette` generates a color palette based on the primary and secondary colors that are passed:
@@ -857,7 +857,7 @@ $black-color: #292826;
$dark-palette: palette($primary: $black-color, $secondary: $yellow-color);
```
-And then with we can easily retrieve color from the palette.
+And then with we can easily retrieve color from the palette.
```scss
$custom-grid: grid-theme(
@@ -905,7 +905,7 @@ The `igx-color` and `igx-palette` are powerful functions for generating and retr
Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
-Extend one of the two predefined schemas, that are provided for every component, in this case - , , , , and schemas:
+Extend one of the two predefined schemas, that are provided for every component, in this case - , , , , and schemas:
```scss
$custom-grid-schema: extend($_light-grid,
@@ -1006,7 +1006,7 @@ $custom-drop-down-schema: extend($_light-drop-down,
);
```
-In order to apply our custom schemas we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
+In order to apply our custom schemas we have to **extend** one of the globals ( or ), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes:
```scss
$custom-light-schema: extend($light-schema,(
@@ -1102,8 +1102,8 @@ Then set the related CSS properties to this class:
## API References
-
-
+
+
## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
index 05661f82a6..2ddfb8fcf0 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
@@ -17,11 +17,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Exporting
-The {ProductName} {ComponentTitle} provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the inside the grid's toolbar. By default, all export formats are enabled.
+The {ProductName} {ComponentTitle} provides data export functionality through the Grid Toolbar Exporter component. You can export the displayed data to Excel, CSV, or PDF formats. Excel exports use the MS Excel table format, which supports features like filtering and sorting. To enable exporting, place the inside the grid's toolbar. By default, all export formats are enabled.
-The {ProductName} export services in {Platform} {ComponentTitle} can export data to Excel and PDF formats. The exporting functionality is encapsulated in the and classes. Excel exports use the MS Excel table format, which supports features like filtering and sorting, while PDF exports capture the current state of the grid. To start an export, invoke the `Export` method of or and pass the component as the first argument.
+The {ProductName} export services in {Platform} {ComponentTitle} can export data to Excel and PDF formats. The exporting functionality is encapsulated in the and classes. Excel exports use the MS Excel table format, which supports features like filtering and sorting, while PDF exports capture the current state of the grid. To start an export, invoke the `Export` method of or and pass the component as the first argument.
## {Platform} Exporting Example
@@ -32,7 +32,7 @@ The {ProductName} export services in {Platform} {ComponentTitle} can export data
## Exporting {ComponentTitle} Data
-To start using the IgniteUI Excel and PDF exporters, first import the and/or in the app.module.ts file and add the services to the `providers` array:
+To start using the IgniteUI Excel and PDF exporters, first import the and/or in the app.module.ts file and add the services to the `providers` array:
```ts
// app.module.ts
@@ -57,7 +57,7 @@ To initiate an export, you can use the handler of a button in your component's t
Export {ComponentTitle} to PDF
```
-You can access the exporter services by defining constructor arguments of type or , and the {Platform} framework will provide instances of the services. To export data to Excel or PDF, invoke the `Export` method and pass the {ComponentTitle} component as the first argument.
+You can access the exporter services by defining constructor arguments of type or , and the {Platform} framework will provide instances of the services. To export data to Excel or PDF, invoke the `Export` method and pass the {ComponentTitle} component as the first argument.
The following code executes the export processes in the component file:
@@ -80,7 +80,7 @@ public exportPdfButtonHandler() {
}
```
-If all went well, you should see the {ComponentTitle} component and the two export buttons. When you press the respective button, it triggers the export process and the browser downloads a file named "ExportedDataFile.xlsx" or "ExportedDataFile.pdf" containing the data from the component in Excel or PDF format.
+If all went well, you should see the {ComponentTitle} component and the two export buttons. When you press the respective button, it triggers the export process and the browser downloads a file named "ExportedDataFile.xlsx" or "ExportedDataFile.pdf" containing the data from the component in Excel or PDF format.
@@ -114,7 +114,7 @@ When offering PDF downloads for remote data, consider fetching the complete data
## Export Grouped Data
-To export grouped data, group the by one or more columns. The browser will download a file named "ExportedDataFile.xlsx" that contains the data from the component in Excel format, grouped by the selected columns. You can find an example at the beginning of the topic.
+To export grouped data, group the by one or more columns. The browser will download a file named "ExportedDataFile.xlsx" that contains the data from the component in Excel format, grouped by the selected columns. You can find an example at the beginning of the topic.
@@ -124,7 +124,7 @@ To export grouped data, group the with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the . If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` to `true`.
+You can export with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the . If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` to `true`.
@@ -132,21 +132,21 @@ The exported `{ComponentName}` will not be formatted as a table, since Excel tab
-The exported will not be formatted as a table, since Excel tables do not support multiple column headers.
+The exported will not be formatted as a table, since Excel tables do not support multiple column headers.
- is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:
+ is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:
- `export-excel`, `export-csv`, `export-pdf`
- `exportExcel`, `exportCsv`, `exportPdf`
-- , `ExportCsv`, `ExportPdf`
+- , `ExportCsv`, `ExportPdf`
## Export Grid with Frozen Column Headers
-By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` to `true`.
+By default, the Excel Exporter service exports the grid with scrollable (unfrozen) column headers. In many scenarios you may want to freeze all headers at the top of the exported Excel file so they always stay in view as the user scrolls through the records. To achieve this, set the `ExporterOption` to `true`.
PDF exports automatically include the column header row at the top of the document, so readers retain the same context when they open or print the file.
@@ -255,7 +255,7 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
## Customizing the Exported Content
-In the examples above, the Excel Exporter service exports all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this, subscribe to the and/or events, which are fired for each column and each row respectively, and cancel the event by setting the event argument object's `cancel` property to `true`.
+In the examples above, the Excel Exporter service exports all available data. There are situations in which you may want to skip exporting a row or even an entire column. To achieve this, subscribe to the and/or events, which are fired for each column and each row respectively, and cancel the event by setting the event argument object's `cancel` property to `true`.
The following example will exclude a column from the export if its header is "Age" and if its index is 1:
@@ -270,7 +270,7 @@ this.excelExportService.columnExporting.subscribe((args: IColumnExportingEventAr
this.excelExportService.export(this.{ComponentTitle}, new ExcelExporterOptions('ExportedDataFile'));
```
-When you are exporting data from the component, the export process takes into account features like row filtering and column hiding and exports only the data visible in the . You can configure the exporter service to include filtered rows or hidden columns by setting properties on the or object.
+When you are exporting data from the component, the export process takes into account features like row filtering and column hiding and exports only the data visible in the . You can configure the exporter service to include filtered rows or hidden columns by setting properties on the or object.
## Known Limitations
@@ -302,7 +302,7 @@ When you are exporting data from the
## API References
-
+
## Additional Resources
Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
index 49ebb1358d..2491e53495 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
# {Platform} {ComponentTitle} Filtering
-The {ProductName} Filtering in {Platform} {ComponentTitle} is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:
+The {ProductName} Filtering in {Platform} {ComponentTitle} is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:
- Quick filtering
- [Excel Style Filtering](excel-style-filtering.md)
@@ -24,7 +24,7 @@ The {ProductName} Filtering in {Platform} {ComponentTitle} is a feature that all
## {Platform} {ComponentTitle} Filtering Example
-The sample below demonstrates 's **Quick Filter** user experience.
+The sample below demonstrates 's **Quick Filter** user experience.
@@ -32,21 +32,21 @@ The sample below demonstrates exposes the following properties - , , and .
+In order to specify if filtering is enabled and which filtering mode should be used, the exposes the following properties - , , and .
-Property enables you to specify the following options:
+Property enables you to specify the following options:
- **false** - the filtering for the corresponding grid will be disabled. This is the default value.
- **true** - the filtering for the corresponding grid will be enabled.
-Property enables you to specify the following options:
+Property enables you to specify the following options:
- **false** - the advanced filtering for the corresponding grid will be disabled. This is the default value.
- **true** - the advanced filtering for the corresponding grid will be enabled.
-Property enables you to specify the following options:
+Property enables you to specify the following options:
- **QuickFilter** - a simplistic filtering UI. This is the default value.
- **ExcelStyleFilter** - an Excel-like filtering UI.
-Property enables you to specify the following options:
+Property enables you to specify the following options:
- **true** - the filtering for the corresponding column will be enabled. This is the default value.
- **false** - the filtering for the corresponding column will be disabled.
@@ -87,7 +87,7 @@ Property enables you t
-To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the input property to **true**
+To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the input property to **true**
@@ -118,7 +118,7 @@ To enable the [Advanced filtering](advanced-filtering.md) however, you need to s
-You can enable both the `QuickFilter` or `ExcelStyleFilter` and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters.
+You can enable both the `QuickFilter` or `ExcelStyleFilter` and the advanced filtering user interfaces in the . Both filtering user interfaces will work independently of one another. The final filtered result in the is the intersection between the results of the two filters.
## Interaction
@@ -129,9 +129,9 @@ While some filtering conditions have been applied to a column, and the filter ro
## Usage
-There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the and the initial properties.
+There's a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we've provided a way to easily plug in your own custom filtering conditions. The currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set of the column, the correct set of **filtering operations** is loaded inside the filter UI dropdown. Additionally, you can set the and the initial properties.
-The filtering feature is enabled for the component by setting the input to **true**. The default is `QuickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the input to **false**.
+The filtering feature is enabled for the component by setting the input to **true**. The default is `QuickFilter` and it **cannot** be changed run time. To disable this feature for a certain column – set the input to **false**.
@@ -196,21 +196,21 @@ The filtering feature is enabled for the
-If values of type **string** are used by a column of data type **date**, the won't parse them to **date** objects and using filtering conditions won't be possible. If you want to use **string** objects, additional logic should be implemented on the application level, in order to parse the values to **date** objects.
+If values of type **string** are used by a column of data type **date**, the won't parse them to **date** objects and using filtering conditions won't be possible. If you want to use **string** objects, additional logic should be implemented on the application level, in order to parse the values to **date** objects.
-You can filter any column or a combination of columns through the API. The exposes several methods for this task - `Filter`, `FilterGlobal` and `ClearFilter`.
+You can filter any column or a combination of columns through the API. The exposes several methods for this task - , `FilterGlobal` and `ClearFilter`.
-- `Filter` - filter a single column or a combination of columns.
+- - filter a single column or a combination of columns.
There are five filtering operand classes exposed:
-- : this is a base filtering operand, which can be inherited when defining custom filtering conditions.
-- defines all default filtering conditions for **boolean** type.
-- defines all default filtering conditions for **numeric** type.
-- defines all default filtering conditions for **string** type.
-- defines all default filtering conditions for **date** type.
+- : this is a base filtering operand, which can be inherited when defining custom filtering conditions.
+- defines all default filtering conditions for **boolean** type.
+- defines all default filtering conditions for **numeric** type.
+- defines all default filtering conditions for **string** type.
+- defines all default filtering conditions for **date** type.
```typescript
// Single column filtering
@@ -227,7 +227,7 @@ The filtering operation **DOES NOT** change the underlying data source of the `{
-The filtering operation **DOES NOT** change the underlying data source of the .
+The filtering operation **DOES NOT** change the underlying data source of the .
@@ -325,7 +325,7 @@ this.grid.clearFilter();
## Initial filtered state
-To set the initial filtering state of the , set the property to an array of for each column to be filtered.
+To set the initial filtering state of the , set the property to an array of for each column to be filtered.
```typescript
@@ -451,7 +451,7 @@ return (
### Filtering logic
-The property of the controls how filtering multiple columns will resolve in the . You can change it at any time through the API, or through the input property.
+The property of the controls how filtering multiple columns will resolve in the . You can change it at any time through the API, or through the input property.
```razor
@@ -494,18 +494,18 @@ When set to `OR`, a row will be returned when either the 'ProductName' cell valu