-
)
- }
+}
```
diff --git a/doc/en/components/grids/_shared/column-resizing.md b/doc/en/components/grids/_shared/column-resizing.md
index 7d6da03a5..88e64184c 100644
--- a/doc/en/components/grids/_shared/column-resizing.md
+++ b/doc/en/components/grids/_shared/column-resizing.md
@@ -113,7 +113,7 @@ public onResize(event) {
```
```tsx
-function onResize(grid: IgrGridBaseDirective, event: IgrColumnMovingEventArgs) {
+function onResize(grid: IgrGridBaseDirective, event: IgrColumnResizeEventArgs) {
IgrColumn col = event.detail.column;
string pWidth = event.detail.prevWidth;
string nWidth = event.detail.newWidth;
@@ -151,16 +151,27 @@ constructor() {
treeGrid.data = this.data;
treeGrid.columnResized = this.onResize;
}
-```
-
-```typescript
public onResize(event) {
this.col = event.column;
this.pWidth = event.prevWidth;
this.nWidth = event.newWidth;
}
```
+
+
+```tsx
+function onResize(grid: IgrGridBaseDirective, event: IgrColumnResizeEventArgs) {
+ IgrColumn col = event.detail.column;
+ string pWidth = event.detail.prevWidth;
+ string nWidth = event.detail.newWidth;
+}
+
+<{ComponentSelector} data={data} autoGenerate="false" primaryKey="ID" foreignKey="ParentID" columnResized={onResize}>
+
+
+
+
+
+
+```
+
+```tsx
+
`
}
```
+
```tsx
const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => {
@@ -332,15 +310,9 @@ const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) =>
);
}
-function App() {
- return (
- <>
-
+
;
+};
+```
+
+
```html
-<{ComponentSelector} row-draggable="true">
+<{ComponentSelector} row-draggable="true" id="grid">
-``
+```
```ts
constructor() {
- var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
- grid.dragIndicatorIcon = this.dragIndicatorIconTemplate;
+ var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
+ grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate;
}
public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
@@ -346,6 +366,54 @@ public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
+
+
+
+
+```tsx
+ function dragIndicatorIconTemplate(ctx: IgrGridEmptyTemplateContext) {
+ return (
+ <>
+
+
;
+};
+```
+
+
+
+
+
+
+```html
+<{ComponentSelector}>
+
+ 📌
+
`;
+}, false);
+```
+
+
+```html
+<{ComponentSelector} [data]="data" [primaryKey]="'ID'" [autoGenerate]="false">
+
+
+```
+
+```razor
+
+
+
+
+
+
+ Case Sensitive
+
+
+ Exact Match
+
+
+
+
+
+
+
+
+
-
- Case Sensitive
-
-
- Exact Match
-
+We will wrap all of our components inside an `Input`. On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our `SearchText` and invoke the `{ComponentName}`'s `ClearSearch` method to clear the highlights.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+
+```razor
+<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
+
+
+
+```
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+```tsx
+
+
+
+
+```
+
The other way to enable/disable summaries for a specific column or a list of columns is to use the public method `EnableSummaries`/`DisableSummaries` of the `{ComponentName}`.
+
```html
<{ComponentSelector} #grid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
@@ -185,6 +253,101 @@ function disableSummary() {
```
+
+
+
+
+```html
+<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px">
+
+
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+```
+```ts
+constructor() {
+ var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName};
+ var enableBtn = this.enableBtn = document.getElementById('enableBtn') as HTMLButtonElement;
+ var disableBtn = this.disableBtn = document.getElementById('disableBtn') as HTMLButtonElement;
+ hierarchicalGrid.data = this.data;
+ enableBtn.addEventListener("click", this.enableSummary);
+ disableBtn.addEventListener("click", this.disableSummary);
+}
+```
+
+
+
+```typescript
+public enableSummary() {
+ this.hierarchicalGrid.enableSummaries([
+ {fieldName: 'GrammyNominations'},
+ {fieldName: 'GrammyAwards'}
+ ]);
+}
+public disableSummary() {
+ this.hierarchicalGrid.disableSummaries(['GrammyNominations']);
+}
+```
+
+
+```razor
+<{ComponentSelector} AutoGenerate="false" Data="SingersData" Name="hierarchicalGrid" @ref="hierarchicalGrid" Id="hierarchicalGrid" PrimaryKey="ID">
+
+
+
+
+```
+
## Custom {ComponentTitle} Summaries
@@ -298,7 +461,7 @@ See [Custom summaries, which access all data](#custom-summaries-which-access-all
> [!Note]
> In order to calculate the summary row height properly, the {ComponentTitle} needs the `Operate` method to always return an array of `SummaryResult` with the proper length even when the data is empty.
-
+
And now let's add our custom summary to the column `UnitsInStock`. We will achieve that by setting the Summaries` property to the class we create below.
```html
@@ -361,6 +524,67 @@ igRegisterScript("WebGridCustomSummary", (event) => {
}
}, false);
```
+
+
+
+And now let's add our custom summary to the column `GrammyAwards`. We will achieve that by setting the Summaries` property to the class we create below.
+
+```html
+<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px">
+
+
+
+
+
+
+```
+
+
+
+```html
+
+
+
+
+
+
+
+```
+```ts
+constructor() {
+ var hierarchicalGrid = this.hierarchicalGrid = document.getElementById('hierarchicalGrid') as {ComponentName};
+ var grammyAwards = this.grammyAwards = document.getElementById('grammyAwards') as IgcColumnComponent;
+ hierarchicalGrid.data = this.data;
+ grammyAwards.summaries = this.mySummary;
+}
+```
+
+
+```typescript
+export class HierarchicalGridComponent implements OnInit {
+ mySummary = MySummary;
+}
+```
+
+```razor
+<{ComponentSelector}
+ AutoGenerate="true"
+ Name="hierarchicalGrid"
+ @ref="hierarchicalGrid"
+ Data="SingersData"
+ PrimaryKey="ID"
+ ColumnInitScript="WebHierarchicalGridCustomSummary">
+
+
+// In Javascript
+igRegisterScript("WebHierarchicalGridCustomSummary", (event) => {
+ if (event.detail.field === "GrammyAwards") {
+ event.detail.summaries = WebHierarchicalGridSummary;
+ }
+}, false);
+```
+
+
### Custom summaries, which access all data
Now you can access all {ComponentTitle} data inside the custom column summary. Two additional optional parameters are introduced in the SummaryOperand `Operate` method.
@@ -409,6 +633,7 @@ class WebGridDiscontinuedSummary {
}
```
+
`sample="/{ComponentSample}/data-summaries-custom", height="650", alt="{Platform} {ComponentTitle} data summary custom"`
@@ -420,6 +645,11 @@ class WebGridDiscontinuedSummary {
`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"`
+
+
+
+`sample="/{ComponentSample}/data-summary-options", height="650", alt="{Platform} {ComponentTitle} data summary options"`
+
@@ -488,14 +718,8 @@ When a default summary is defined, the height of the summary area is calculated
-
-
`sample="/{ComponentSample}/data-summary-template", height="650", alt="{Platform} {ComponentTitle} data summary template"`
-
-
-
-
## Formatting summaries
By default, summary results, produced by the built-in summary operands, are localized and formatted according to the grid `Locale` and column `PipeArgs`. When using custom operands, the `Locale` and `PipeArgs` are not applied. If you want to change the default appearance of the summary results, you may format them using the `SummaryFormatter` property.
@@ -536,20 +760,36 @@ constructor() {
}
```
-
-
```razor
- Grid Toolbar
+ Grid Toolbar
@@ -132,6 +141,11 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo
```
+
+
+
+
+
```html
@@ -146,6 +160,45 @@ The predefined `Actions` and `Title` UI components are added inside the `GridToo
```
+
+
+
+
+```tsx
+
+
+
+ Hierarchical Grid Toolbar
+
+
+
+
+
+```
+
+
+
+
+
+```razor
+
+
+ Hierarchical Grid Toolbar
+
+
+
+
+```
+
+
> [!Note]
> As seen in the code snippet above, the predefined `Actions` UI components are wrapped in the `GridToolbarActions` container. This way, the toolbar title is aligned to the left of the toolbar and the actions are aligned to the right of the toolbar.
@@ -196,6 +249,7 @@ Of course, each of these UIs can be added independently of each other, or may no
```
+
```html
@@ -203,6 +257,11 @@ Of course, each of these UIs can be added independently of each other, or may no
```
+
+
+
+
+
```html
@@ -210,13 +269,37 @@ Of course, each of these UIs can be added independently of each other, or may no
```
+
-For a comprehensive look over each of the default UI components, continue reading the **Features** section below.
+
+
+```razor
+
+
+
+
+```
+
+
+
+```tsx
+
+
+
+
+```
+
+
+For a comprehensive look over each of the default UI components, continue reading the **Features** section below.
+
+
+
## Toolbar with Child Grids
+
Due to certain limitations in how the child grids of an IgxHierarchicalGrid are implemented and how DI scope works, there is a caveat when
using the toolbar in the scope of child grids. When defining a toolbar component inside the `igx-row-island` tags, always make sure to use the IgxGridToolbar and pass the provided grid instance as an input property to the toolbar itself.
This will make sure you always have the correct grid instance in the scope of your template:
@@ -236,8 +319,85 @@ This will make sure you always have the correct grid instance in the scope of yo
```
+
+
+
+Due to certain limitations in how the child grids of an `{ComponentSelector}` are implemented and how DI scope works, to define a toolbar component inside the `{RowIslandSelector}`, use the `ToolbarTemplate` input property. This allows child grids to create their own separate toolbar instances:
+
+
+
+
+
+```ts
+constructor() {
+ var rowIsland1 = document.getElementById('rowIsland1') as IgcRowIslandComponent;
+ rowIsland1.toolbarTemplate = this.rowIslandToolbarTemplate;
+}
+
+public rowIslandToolbarTemplate = () => {
+ return html`
+
+
+ `;
+}
+```
+
+```html
+
+ ...
+
+
+
+```
+
+```razor
+
+ ...
+
+
+
+
+//In JavaScript:
+igRegisterScript("RowIslandToolbarTemplate", () => {
+ var html = window.igTemplating.html;
+ return html`
+
+
+ `;
+}, false);
+```
+
+```tsx
+function rowIslandToolbarTemplate = () => {
+ return (
+
+
+
+
+ );
+}
+
+
+ ...
+
+
+
+```
+
## Features
@@ -249,8 +409,15 @@ These features can be enabled independently from each other by following a patte
Listed below are the main features of the toolbar with example code for each of them.
+
`sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} toolbar sample 2"`
+
+
+
+`sample="/{ComponentSample}/toolbar-sample-2", height="630", alt="{Platform} {ComponentTitle} toolbar sample 2"`
+
+
### Title
@@ -259,29 +426,47 @@ Setting a title for the toolbar in your grid is achieved by using the `GridToolb
Users can provide anything from simple text to more involved templates.
+
+
```html
Grid toolbar title
```
+
+
+
+
```html
Grid toolbar title
```
+
+
+
+
```tsx
- Grid toolbar title
+
+ Grid toolbar title
+
```
+
+
+
+
```razor
Grid toolbar title
```
+
+
### Actions
@@ -290,6 +475,8 @@ The `GridToolbarActions` is where users can place actions/interactions in relati
As with the title portion of the toolbar, users can provide anything inside that template part, including the default
toolbar interaction components.
+
+
```html
@@ -299,15 +486,11 @@ toolbar interaction components.
```
+
+
-```razor
-
-
-
-
-
-```
-
+
+
```html
@@ -315,15 +498,33 @@ toolbar interaction components.
```
+
+
+
+
+```razor
+
+
+
+
+
+```
+
+
+
+
+
```tsx
-
```
+
+
+
Each action now exposes a way to change the overlay settings of the actions dialog by using the `OverlaySettings` input. For example:
@@ -386,6 +587,8 @@ The `GridToolbarPinning` component provides the default UI for interacting with
The component is setup to work out of the box with the parent grid containing the toolbar as well as several input properties for customizing the UI, such as the component title, the placeholder for the component input and the height of the dropdown itself.
+
+
```html
@@ -398,15 +601,11 @@ The component is setup to work out of the box with the parent grid containing th
```
+
+
-```razor
-
-
-
-
-```
-
+
+
```html
@@ -418,7 +617,23 @@ The component is setup to work out of the box with the parent grid containing th
```
+
+
+
+
+
+```razor
+
+
+
+
+```
+
+
+
+
```tsx
@@ -426,12 +641,16 @@ The component is setup to work out of the box with the parent grid containing th
```
+
+
### Column Hiding
The `GridToolbarHiding` provides the default UI for interacting with column hiding. Exposes the same input properties for customizing the UI, such as the component
title, the placeholder for the component input and the height of the dropdown itself.
+
+
```html
@@ -444,15 +663,11 @@ title, the placeholder for the component input and the height of the dropdown it
```
+
+
-```razor
-
-
-
-
-```
-
+
+
```html
@@ -464,7 +679,23 @@ title, the placeholder for the component input and the height of the dropdown it
```
+
+
+
+
+
+```razor
+
+
+
+
+```
+
+
+
+
```tsx
@@ -472,11 +703,15 @@ title, the placeholder for the component input and the height of the dropdown it
```
+
+
### Advanced Filtering
Toolbar Advanced Filtering component provides the default UI for the Advanced Filtering feature. The component exposes a way to change the default text of the button.
+
+
```html
@@ -484,15 +719,11 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi
```
+
+
-```razor
-
-
-
-
-```
-
+
+
```html
@@ -500,7 +731,23 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi
```
+
+
+
+
+```razor
+
+
+
+
+```
+
+
+
+
+
```tsx
@@ -508,6 +755,8 @@ Toolbar Advanced Filtering component provides the default UI for the Advanced Fi
```
+
+
### Data Exporting
@@ -550,6 +799,8 @@ These range from changing the display text, to enabling/disabling options in the
Here is a snippet showing some of the options which can be customized through the {Platform} template:
+
+
```html
@@ -566,15 +817,11 @@ Here is a snippet showing some of the options which can be customized through th
```
+
+
-```razor
-
-
-
-
-```
-
+
+
```html
@@ -583,7 +830,23 @@ Here is a snippet showing some of the options which can be customized through th
```
+
+
+
+
+
+```razor
+
+
+
+
+```
+
+
+
+
```tsx
@@ -591,6 +854,8 @@ Here is a snippet showing some of the options which can be customized through th
```
+
+
In addition to changing the exported filename, the user can further configure the exporter options by waiting for the `ToolbarExporting` event and customizing the options entry in the event properties.
@@ -601,6 +866,8 @@ In addition to changing the exported filename, the user can further configure th
The following code snippet demonstrates subscribing to the toolbar exporting event and configuring the exporter options:
+
+
```html
<{ComponentSelector} (toolbarExporting)="configureExport($event)" >
@@ -691,6 +958,64 @@ igRegisterScript("WebGridToolbarExporting", (evt) => {
});
}, false);
```
+
+
+
+
+
+
+```html
+<{ComponentSelector} id="hierarchicalGrid">
+```
+```ts
+constructor() {
+ var hierarchicalGrid = document.getElementById('hierarchicalGrid') as IgcHierarchicalGridComponent;
+ hierarchicalGrid.addEventListener("toolbarExporting", this.configureExport);
+}
+
+public configureExport(evt: CustomEvent) {
+ const args = evt.detail;
+ const options: IgcExporterOptionsBase = args.options;
+ if (options) {
+ options.fileName = `Report_${new Date().toDateString()}`;
+ (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
+ columnArgs.cancel = columnArgs.header === 'Photo';
+ });
+ }
+}
+```
+
+
+```tsx
+function configureExport(evt: IgrGridToolbarExportEventArgs) {
+ const args = evt.detail;
+ const options: IgrExporterOptionsBase = args.options;
+
+ options.fileName = `Report_${new Date().toDateString()}`;
+ (args.exporter as any).columnExporting.subscribe((columnArgs: any) => {
+ columnArgs.cancel = columnArgs.header === 'Photo';
+ });
+}
+
+<{ComponentSelector} toolbarExporting={configureExport}>
+
+```
+
+```razor
+<{ComponentSelector} ToolbarExportingScript="ConfigureExport">
+
+// In Javascript
+igRegisterScript("ConfigureExport", (evt) => {
+ const args = evt.detail;
+ const options = args.options;
+ options.fileName = `Report_${new Date().toDateString()}`;
+ args.exporter.columnExporting.subscribe((columnArgs) => {
+ columnArgs.cancel = columnArgs.header === 'Photo';
+ });
+}, false);
+```
+
+
The following sample demonstrates how to customize the exported files:
@@ -698,7 +1023,6 @@ The following sample demonstrates how to customize the exported files:
-
## Exporting Indicator
@@ -713,17 +1037,22 @@ The sample belows uses has significant amount of data, in order to increase the
`sample="/{ComponentSample}/data-exporting-indicator", height="370", alt="{Platform} {ComponentTitle} data exporting indicator"`
-
+
## Custom Content
+
+
> [!Note]
> This replaces the old toolbar template directive. If you are migrating from a version before v11 our migrations will handle the moving of the template content. However, we do not handle the bindings in the template, so make sure to double check the modified template files after the migration completes.
+
+
If the actions part of the toolbar component is not sufficient for a particular use case, the toolbar itself has a general content projection where users can provide additional UI. If the user needs the respective grid instance for API calls or bindings, they can create a template reference variable.
Here is a sample snippet:
+
```html
<{ComponentSelector} #gridRef>
@@ -742,9 +1071,11 @@ Here is a sample snippet:
```
+
+
```html
<{ComponentSelector} id="grid">
@@ -758,13 +1089,52 @@ Here is a sample snippet:
```
+
+
+
+```tsx
+<{ComponentSelector}>
+
+
+ title
+
+ {/*
+ Everything between the toolbar tags except the default toolbar components
+ will be projected as custom content.
+ */}
+
+
+
+
+```
+
+
+
+
+
+```razor
+<{ComponentSelector}>
+
+ title
+ @*
+ Everything between the toolbar tags except the default toolbar components
+ will be projected as custom content.
+ *@
+
+
+
+
+```
+
+
+
The following sample demonstrates how to add an additional button to the toolbar to clear the sorting set by clicking on the columns' headers:
`sample="/{ComponentSample}/toolbar-sample-4", height="420", alt="{Platform} {ComponentTitle} toolbar sample 4"`
-
+
@@ -920,6 +1290,15 @@ The last step is to **include** the newly created themes.
+
+
+## Known Limitations
+
+> [!Note]
+> Currently, defining a toolbar component inside the {RowIslandSelector} is not supported.
+
+
+
## API References
The Grid Toolbar service has a few more APIs to explore, which are listed below.
diff --git a/doc/en/components/grids/_shared/virtualization.md b/doc/en/components/grids/_shared/virtualization.md
index 989f3d1cc..0bc8ae18f 100644
--- a/doc/en/components/grids/_shared/virtualization.md
+++ b/doc/en/components/grids/_shared/virtualization.md
@@ -12,11 +12,13 @@ namespace: Infragistics.Controls
In {ProductName}, the `{ComponentName}` control virtualizes its content both vertically and horizontally.
+
+
## {Platform} {ComponentTitle} Virtualization and Performance Example
`sample="/{ComponentSample}/data-performance-virtualization", height="550", alt="{Platform} {ComponentTitle} Virtualization and Performance Example"`
-
+
## Enabling Virtualization
@@ -58,7 +60,6 @@ Without information about the sizes of the container and the items before render
## Additional Resources
-
* [Paging](paging.md)
* [Filtering](filtering.md)
* [Sorting](sorting.md)
@@ -67,7 +68,6 @@ Without information about the sizes of the container and the items before render
* [Column Pinning](column-pinning.md)
* [Column Resizing](column-resizing.md)
* [Selection](selection.md)
-
Our community is active and always welcoming to new ideas.
diff --git a/doc/en/components/grids/data-grid.md b/doc/en/components/grids/data-grid.md
index b31cd760b..6867821c3 100644
--- a/doc/en/components/grids/data-grid.md
+++ b/doc/en/components/grids/data-grid.md
@@ -60,7 +60,7 @@ namespace: Infragistics.Controls
In this {ProductName} Grid example, you can see how users can do both basic and excel-style filtering, live-data sorting, and use grid summaries as well as cell templating. The demo also includes paging set to display 10 items per page.
-`sample="/{GridSample}/overview", height="700", alt="{Platform} grid example"`
+`sample="/{GridSample}/overview", img-src="https://static.infragistics.com/marketing/Website/products/ignite-ui-blazor/ignite-ui-blazor-client-grid", height="700", alt="{Platform} grid example"`
@@ -70,7 +70,7 @@ In this {ProductName} Grid example, you can see how users can do both basic and
### Dependencies
-To get started with the {Platform} Data Grid, first you need to install the {ProductName} package.
+To get started with the {Platform} Data Grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages.
@@ -92,15 +92,20 @@ Afterwards, you may start implementing the control by adding the following names
```
-
-When installing the {Platform} grid package, the core, inputs and layout packages must also be installed.
+
+```cmd
+npm install --save {PackageGrids}
+```
+
+
```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
npm install --save {PackageGrids}
-npm install --save {PackageInputs}
-npm install --save {PackageLayouts}
```
+
+
+
You also need to include the following import to use the grid:
diff --git a/doc/en/components/grids/hierarchical-grid/load-on-demand.md b/doc/en/components/grids/hierarchical-grid/load-on-demand.md
index f9f749745..2de0d97ca 100644
--- a/doc/en/components/grids/hierarchical-grid/load-on-demand.md
+++ b/doc/en/components/grids/hierarchical-grid/load-on-demand.md
@@ -10,7 +10,7 @@ namespace: Infragistics.Controls
The Ignite UI for {Platform} `HierarchicalGrid` allows fast rendering by requesting the minimum amount of data to be retrieved from the server so that the user can see the result in view and interact with the visible data as quickly as possible. Initially only the root grid’s data is retrieved and rendered, only after the user expands a row containing a child grid, he will receive the data for that particular child grid. This mechanism, also known as Load on Demand, can be easily configured to work with any remote data.
-This topic demonstrates how to configure Load on Demand by creating a Remote Service Provider that communicates with an already available remote oData v4 Service. Here's the working demo and later we will go through it step by step and describe the process of creating it.
+This topic demonstrates how to configure Load on Demand by creating a Remote Service Provider that communicates with an already available remote service. Here's the working demo and later we will go through it step by step and describe the process of creating it.
## {Platform} Hierarchical Grid Load On Demand Example
@@ -28,26 +28,25 @@ We will be communicating with our backend service over HTTP protocol using the X
```typescript
public getData(dataState): Observable {
return this.http.get(this.buildUrl(dataState)).pipe(
- map(response => response['value']),
+ map(response => response),
);
}
```
-As you can see `this.http` will be a reference to our `HttpCLient` module, and `buildUrl()` will be the method that will generate our url based on the data that we have received. We map our response so we get only the value of our result and return an Observable, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
+As you can see `this.http` will be a reference to our `HttpCLient` module, and `buildUrl()` will be the method that will generate our url based on the data that we have received. We map our response and return an Observable, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
We will be communicating with our backend service over HTTP protocol using the [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/fetch) global function the browsers provide. That way in order to get our data we will need this simple method in our service:
```ts
-function getData(dataState) {
+export function getData(dataState: any): any {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data['value']);
+ .then((result) => result.json());
}
```
-As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We map our response so we get only the value of our result and return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
+As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
@@ -56,17 +55,16 @@ We will be communicating with our backend service over HTTP protocol using the [
```razor
function getData(dataState) {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data['value']);
+ .then((result) => result.json());
}
```
-As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We map our response so we get only the value of our result and return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
+As you can see `buildUrl()` will be the method that will generate our url based on the data that we have received. We return a Promise, since this is executed asynchronously. That way we can later subscribe to it, process it further in our application and pass it to our grid.
#### Building our request url
-Next we will define how we should build our URL for the GET request. This is where we will be able to get the data for our main grid but also for any child grid inside it. We will use the `Customers` data from [here](https://services.odata.org/V4/Northwind/Northwind.svc/) for our root level and use `Order` and `Order_Details` for the lower levels. The model will differ per application but we will use the following one:
+Next we will define how we should build our URL for the GET request. This is where we will be able to get the data for our main grid but also for any child grid inside it. We will use the `Customers` data from [here](https://data-northwind.indigo.design/swagger/index.html) for our root level and use `Orders` and `Details` for the lower levels. The model will differ per application but we will use the following one:
@@ -87,14 +85,10 @@ export interface IDataState {
public buildUrl(dataState: IDataState): string {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${this.url}${qS}`;
@@ -119,14 +113,10 @@ const dataState: {
function buildUrl(dataState: any) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${URL}${qS}`;
@@ -150,17 +140,13 @@ const dataState: {
function buildUrl(dataState) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
- return `${URL}${qS}`;
+ return `${DATA_URL}${qS}`;
}
```
@@ -185,27 +171,23 @@ export interface IDataState {
@Injectable()
export class RemoteLoDService {
- url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+ public url = `https://data-northwind.indigo.design/`;
constructor(private http: HttpClient) { }
public getData(dataState: IDataState): Observable {
return this.http.get(this.buildUrl(dataState)).pipe(
- map((response) => response['value'])
+ map((response) => response)
);
}
public buildUrl(dataState: IDataState): string {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${this.url}${qS}`;
@@ -218,25 +200,20 @@ export class RemoteLoDService {
Finally, this is how our remote service would look like:
```ts
-const URL = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+const URL = `https://data-northwind.indigo.design/`;
-export function getData(dataState?: any): any {
+export function getData(dataState: any): any {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data["value"]);
+ .then((result) => result.json());
}
function buildUrl(dataState: any) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${URL}${qS}`;
@@ -248,28 +225,23 @@ function buildUrl(dataState: any) {
Finally, this is how our remote service would look like:
```razor
-const URL = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+const DATA_URL = `https://data-northwind.indigo.design/`;
-function getData(dataState): any {
+function getData(dataState) {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data["value"]);
+ .then((result) => result.json());
}
function buildUrl(dataState) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
- return `${URL}${qS}`;
+ return `${DATA_URL}${qS}`;
}
```
@@ -280,28 +252,28 @@ Next we will setup our hierarchical grid and connect it to our remote service pr
#### Template defining
-First we will define our hierarchical grid template with the levels of hierarchy that we expect to have. We know that our root grid `PrimaryKey` for the customers is their `CustomerID`, for their orders on the first level - `OrderID` and respectively for order details - `ProductID`. Knowing each database table and their keys allows us to define our initial template:
+First we will define our hierarchical grid template with the levels of hierarchy that we expect to have. We know that our root grid `PrimaryKey` for the customers is their `customerId`, for their orders on the first level - `orderId` and respectively for order details - `productId`. Knowing each database table and their keys allows us to define our initial template:
```html
-
-
-
+
+
+
@@ -310,25 +282,25 @@ First we will define our hierarchical grid template with the levels of hierarchy
```html
-
-
-
-
+
+
+
+
```
@@ -336,25 +308,25 @@ First we will define our hierarchical grid template with the levels of hierarchy
```tsx
-
-
-
-
+
+
+
+
```
@@ -362,24 +334,24 @@ First we will define our hierarchical grid template with the levels of hierarchy
```razor
-
-
-
-
+
+
+
@@ -432,24 +404,24 @@ The template file, with these changes added, would look like this:
```html
-
-
-
+
+
+
@@ -458,25 +430,25 @@ The template file, with these changes added, would look like this:
```html
-
-
-
-
+
+
+
+
```
@@ -486,11 +458,11 @@ constructor() {
const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");
ordersRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "CustomerID");
+ this.gridCreated(event, "Customers");
});
orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "OrderID");
+ this.gridCreated(event, "Orders");
});
}
```
@@ -498,38 +470,38 @@ constructor() {
```tsx
-
-
+ gridCreated(rowIsland, e, "CustomerID")}
+ childDataKey="Orders"
+ primaryKey="orderId"
+ gridCreated={(
+ rowIsland: IgrRowIsland,
+ e: IgrGridCreatedEventArgs
+ ) => gridCreated(rowIsland, e, "Customers")}
>
- gridCreated(rowIsland, e, "OrderID")}
+ childDataKey="Details"
+ primaryKey="productId"
+ gridCreated={(
+ rowIsland: IgrRowIsland,
+ e: IgrGridCreatedEventArgs
+ ) => gridCreated(rowIsland, e, "Orders")}
>
-
@@ -538,24 +510,24 @@ constructor() {
```razor
-
-
-
-
+
+
+
@@ -719,7 +691,7 @@ function gridCreated(rowIsland: IgrRowIsland, event: IgrGridCreatedEventArgs, _p
```razor
igRegisterScript("OnGridCreated", (args) => {
const context = args.detail;
- const _parentKey = context.owner.childDataKey === "Orders" ? "CustomerID" : "OrderID";
+ const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders";
const dataState = {
key: context.owner.childDataKey,
parentID: context.parentID,
@@ -802,11 +774,11 @@ constructor() {
const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");
ordersRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "CustomerID");
+ this.gridCreated(event, "Customers");
});
orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "OrderID");
+ this.gridCreated(event, "Orders");
});
hierarchicalGrid.isLoading = true;
@@ -891,7 +863,7 @@ igRegisterScript("OnGridRendered", () => {
igRegisterScript("OnGridCreated", (args) => {
const context = args.detail;
- const _parentKey = context.owner.childDataKey === "Orders" ? "CustomerID" : "OrderID";
+ const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders";
const dataState = {
key: context.owner.childDataKey,
parentID: context.parentID,
diff --git a/doc/en/components/grids/hierarchical-grid/overview.md b/doc/en/components/grids/hierarchical-grid/overview.md
index 6bc5b02c1..e7c8f8a84 100644
--- a/doc/en/components/grids/hierarchical-grid/overview.md
+++ b/doc/en/components/grids/hierarchical-grid/overview.md
@@ -20,7 +20,7 @@ In this {Platform} grid example you can see how users can visualize hierarchical
### Dependencies
-To get started with the {Platform} hierarchical grid, first you need to install the {ProductName} package.
+To get started with the {Platform} hierarchical grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages.
@@ -43,16 +43,20 @@ Afterwards, you may start implementing the control by adding the following names
-
-
-When installing the {Platform} hierarchical grid package, the core package must also be installed.
+
+```cmd
+npm install --save {PackageGrids}
+```
+
+
```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
npm install --save {PackageGrids}
-npm install --save {PackageInputs}
-npm install --save {PackageLayouts}
```
+
+
+
You also need to include the following import to use the grid:
@@ -252,9 +256,9 @@ Most applications are designed to load as little data as possible initially, whi
```html
-
-
-
+
+
+
@@ -303,27 +307,23 @@ export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
@Injectable()
export class RemoteLoDService {
- public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+ public url = `https://data-northwind.indigo.design/`;
constructor(private http: HttpClient) { }
- public getData(dataState?: any): Observable {
+ public getData(dataState: any): Observable {
return this.http.get(this.buildUrl(dataState)).pipe(
- map((response) => response["value"])
+ map((response) => response)
);
}
public buildUrl(dataState) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${this.url}${qS}`;
@@ -334,9 +334,9 @@ export class RemoteLoDService {
```html
-
-
-
+
+
```
@@ -349,13 +349,16 @@ export class HierarchicalGridLoadOnDemand {
const hierarchicalGrid = document.getElementById("hGrid") as IgcHierarchicalGridComponent;
const ordersRowIsland = document.getElementById("ordersRowIsland");
const orderDetailsRowIsland = document.getElementById("orderDetailsRowIsland");
+
ordersRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "CustomerID");
+ this.gridCreated(event, "Customers");
});
orderDetailsRowIsland.addEventListener("gridCreated", (event: any) => {
- this.gridCreated(event, "OrderID");
+ this.gridCreated(event, "Orders");
});
+
hierarchicalGrid.isLoading = true;
+
getData({ parentID: null, rootLevel: true, key: "Customers" }).then((data: any) => {
hierarchicalGrid.isLoading = false;
hierarchicalGrid.data = data;
@@ -386,7 +389,8 @@ export class HierarchicalGridLoadOnDemand {
import { getData } from "./remoteService";
export default function Sample() {
- const hierarchicalGrid = useRef(null);
+ const hierarchicalGrid = useRef(null);
+
function gridCreated(
rowIsland: IgrRowIsland,
event: IgrGridCreatedEventArgs,
@@ -406,6 +410,7 @@ export default function Sample() {
context.grid.markForCheck();
});
}
+
useEffect(() => {
hierarchicalGrid.current.isLoading = true;
getData({ parentID: null, rootLevel: true, key: "Customers" }).then(
@@ -420,28 +425,28 @@ export default function Sample() {
return (
gridCreated(rowIsland, e, "CustomerID")}
+ ) => gridCreated(rowIsland, e, "Customers")}
>
gridCreated(rowIsland, e, "OrderID")}
+ ) => gridCreated(rowIsland, e, "Orders")}
>
@@ -451,24 +456,20 @@ export default function Sample() {
```ts
-const URL = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
-export function getData(dataState?: any): any {
+const URL = `https://data-northwind.indigo.design/`;
+
+export function getData(dataState: any): any {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data["value"]);
+ .then((result) => result.json());
}
function buildUrl(dataState: any) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${URL}${qS}`;
@@ -477,10 +478,10 @@ function buildUrl(dataState: any) {
```razor
-
-
-
+
@@ -498,7 +499,7 @@ igRegisterScript("OnGridRendered", () => {
igRegisterScript("OnGridCreated", (args) => {
const context = args.detail;
- const _parentKey = context.owner.childDataKey === "Orders" ? "CustomerID" : "OrderID";
+ const _parentKey = context.owner.childDataKey === "Orders" ? "Customers" : "Orders";
const dataState = {
key: context.owner.childDataKey,
parentID: context.parentID,
@@ -513,24 +514,20 @@ igRegisterScript("OnGridCreated", (args) => {
});
}, false)
-const DATA_URL = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+const DATA_URL = `https://data-northwind.indigo.design/`;
+
function getData(dataState) {
return fetch(buildUrl(dataState))
- .then((result) => result.json())
- .then((data) => data["value"]);
+ .then((result) => result.json());
}
function buildUrl(dataState) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${DATA_URL}${qS}`;
diff --git a/doc/en/components/grids/tree-grid/overview.md b/doc/en/components/grids/tree-grid/overview.md
index 6c82d4ae6..4a2c2bc31 100644
--- a/doc/en/components/grids/tree-grid/overview.md
+++ b/doc/en/components/grids/tree-grid/overview.md
@@ -23,7 +23,7 @@ In this example, you can see how users can manipulate hierarchical or flat data.
### Dependencies
-To get started with the {Platform} tree grid, first you need to install the {ProductName} package.
+To get started with the {Platform} tree grid, first you need to install the {PackageCommon} package.`{PackageGrids}` package.`{PackageCommon}` and `{PackageGrids}` packages.
@@ -48,13 +48,18 @@ Afterwards, you may start implementing the control by adding the following names
-When installing the {Platform} tree grid package, the core package must also be installed.
+
+```cmd
+npm install --save {PackageGrids}
+```
+
+
```cmd
-npm install --save {PackageCore}
+npm install --save {PackageCommon}
npm install --save {PackageGrids}
-npm install --save {PackageInputs}
```
+
diff --git a/doc/en/components/inputs/combo/features.md b/doc/en/components/inputs/combo/features.md
index 0569e39fc..c4cb5b94b 100644
--- a/doc/en/components/inputs/combo/features.md
+++ b/doc/en/components/inputs/combo/features.md
@@ -43,8 +43,38 @@ You will also need to link an additional CSS file to apply the styling to the `S
+
+
+```tsx
+import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrComboModule.register();
+IgrSwitchModule.register();
+```
+
+
+
Then, we will add event handlers to all switch components so that we can control the combo features by toggling the switches:
+```tsx
+const comboRef = useRef(null);
+const switchCaseSensitiveRef = useRef(null);
+
+const disableFiltering = (switchComponent: IgrSwitch) => {
+ comboRef.current.disableFiltering =
+ switchCaseSensitiveRef.current.disabled = switchComponent.checked;
+};
+
+const showCaseSensitiveIcon = (switchComponent: IgrSwitch) => {
+ comboRef.current.caseSensitiveIcon = switchComponent.checked;
+};
+
+const disableCombo = (switchComponent: IgrSwitch) => {
+ comboRef.current.disabled = switchComponent.checked;
+};
+```
+
```ts
let combo = document.getElementById('combo') as IgcComboComponent;
@@ -126,6 +156,12 @@ switchGroup.addEventListener("igcChange", () => {
}
```
+```tsx
+const enableGrouping = (switchComponent: IgrSwitch) => {
+ comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
+};
+```
+
## Features
### Filtering
@@ -142,12 +178,17 @@ Filtering options can be further enhanced by enabling the search case sensitivit
-## 強調表示
+## ハイライト表示
-線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときに強調表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャート強調表示](features/chart-highlighting.md)トピックを参照してください。
+線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャートのハイライト表示](features/chart-highlighting.md)トピックを参照してください。
-`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} 強調表示の例"`
+`sample="/charts/category-chart/column-chart-with-highlighting", height="500", alt="{Platform} ハイライト表示の例"`
diff --git a/doc/jp/components/charts/chart-overview.md b/doc/jp/components/charts/chart-overview.md
index 172f4c279..488a2f4c2 100644
--- a/doc/jp/components/charts/chart-overview.md
+++ b/doc/jp/components/charts/chart-overview.md
@@ -52,7 +52,7 @@ _language: ja
{Platform} 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[棒チャート](types/bar-chart.md)の詳細をご覧ください。
-`sample="/charts/data-chart/bar-chart-multiple-sources", height="600", alt="{Platform} 複数ソースの棒チャート"`
+`sample="/charts/data-chart/bar-chart-multiple-sources", img-src="https://static.infragistics.com/marketing/Website/products/Ignite-UI-for-Angular/ignite-ui-angular-bar-chart", height="600", alt="{Platform} 複数ソースの棒チャート"`
@@ -172,7 +172,7 @@ _language: ja
### {Platform} 散布図
-{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差を強調表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。
+{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。
`sample="/charts/data-chart/scatter-point-chart", height="600", alt="{Platform} 散布マーカー チャート"`
@@ -274,7 +274,7 @@ alt="{Platform} チャート インタラクティブなパニングとズーム
### マーカー、ツールチップ、およびテンプレート
-10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データを強調表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
+10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データをハイライト表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
+ Case Sensitive
+ Exact Match
-
-
-
-
-
+
@@ -722,6 +1103,46 @@ useEffect(() => {
```
+
+
+```razor
+
+ @if (searchText.Length == 0)
+ {
+
+
+@code {
+
+ public void clearSearch()
+ {
+ this.searchText = "";
+ this.grid.ClearSearchAsync();
+ }
+}
+```
On the right in our input group, let's create three separate containers with the following purposes:
@@ -792,6 +1213,7 @@ public showResults() {
```
+
```ts
constructor() {
const input = document.getElementById("searchBox") as IgcInputComponent;
@@ -804,18 +1226,42 @@ public updateSearch() {
grid.findNext(input.value, caseSensitiveChip.selected, exactMatchChip.selected);
}
```
+
+
+
+```ts
+constructor() {
+ this.caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
+ this.exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
+
+ this.caseSensitiveChip.addEventListener('igcSelect', (evt) => {
+ this.treeGrid.findNext(this.searchBox.value, evt.detail, this.exactMatchChip.selected);
+ });
+ this.exactMatchChip.addEventListener('igcSelect', (evt) => {
+ this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, evt.detail);
+ });
+}
+```
+
```tsx
+
-
+
+```
-@code {
+
+```typescript
+constructor() {
+ const prevIconText = "";
+ const nextIconText = "";
+ const searchIconText = "";
+ const clearIconText = "";
- public void clearSearch()
- {
- this.searchText = "";
- this.grid.ClearSearchAsync();
- }
+ registerIconFromText('prev', prevIconText, 'material');
+ registerIconFromText('next', nextIconText, 'material');
+ registerIconFromText('search', searchIconText, 'material');
+ registerIconFromText('clear', clearIconText, 'material');
+
+ this.icon = document.getElementById('icon') as IgcIconComponent;
+ this.searchBox = document.getElementById('searchBox') as IgcInputComponent;
+
+ this.searchBox.addEventListener('igcInput', (evt) => {
+ this.icon.name = evt.detail ? 'clear' : 'search';
+ });
+ this.icon.addEventListener('click', this.clearSearch);
+}
+
+public clearSearch() {
+ this.searchBox.value = '';
+ this.icon.name = 'search';
+ this.treeGrid.clearSearch();
}
```
+
```tsx
const prevIconText =
"";
const nextIconText =
"";
+const searchIconText =
+ "";
const clearIconText =
"";
useEffect(() => {
- if (clearIconRef?.current) {
- clearIconRef.current.registerIconFromText("clear", clearIconText, "material");
+ if (searchIconRef?.current) {
+ searchIconRef.current.registerIconFromText("search", searchIconText, "material");
+ searchIconRef.current.registerIconFromText("clear", clearIconText, "material");
}
if (iconButtonPrevRef?.current) {
- iconButtonPrevRef.current.registerIconFromText("prev", prevIconText, "material");
+ iconButtonPrevRef.current.registerIconFromText("prev", prevIconText,"material");
}
if (iconButtonNextRef?.current) {
iconButtonNextRef.current.registerIconFromText("next", nextIconText, "material");
}
}, []);
+function clearSearch() {
+ setSearchText('');
+ gridRef.current.clearSearch();
+}
+
-
-
+ {searchText.length === 0 ? (
+
+
+ ) : (
+
+
+ )}
+
+ Case Sensitive
+
+
+ Exact Match
+
+
+
+
+
+
+
+
+
-
- Case Sensitive
+
+ Case Sensitive
-
- Exact Match
+
+ Exact Match
+
+function handleCaseSensitiveChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
+ gridRef.current.findNext(searchText, event.detail, exactMatchChipRef.current.selected);
+}
+function handleExactMatchChange(chip: IgrChip, event: IgrComponentBoolValueChangedEventArgs) {
+ gridRef.current.findNext(searchText, caseSensitiveChipRef.current.selected, event.detail);
+}
```
```razor
@@ -876,7 +1322,10 @@ constructor() {
nextIconButton.addEventListener("click", this.nextSearch);
prevIconButton.addEventListener("click", this.prevSearch);
}
+```
+
+```ts
public nextSearch() {
const grid = document.getElementById('grid') as IgcGridComponent;
const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
@@ -891,6 +1340,20 @@ public prevSearch() {
grid.findPrev(input.value, caseSensitiveChip.selected, exactMatchChip.selected);
}
```
+
+
+
+```ts
+public prevSearch() {
+ this.treeGrid.findPrev(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
+}
+
+public nextSearch() {
+ this.treeGrid.findNext(this.searchBox.value, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
+}
+```
+
+
```tsx
@@ -977,7 +1440,6 @@ Additional components with relative APIs that were used:
## Additional Resources
-
* [Virtualization and Performance](virtualization.md)
* [Filtering](filtering.md)
* [Paging](paging.md)
@@ -987,7 +1449,6 @@ Additional components with relative APIs that were used:
* [Column Pinning](column-pinning.md)
* [Column Resizing](column-resizing.md)
* [Selection](selection.md)
-
Our community is active and always welcoming to new ideas.
diff --git a/doc/en/components/grids/_shared/summaries.md b/doc/en/components/grids/_shared/summaries.md
index c2597e482..bb9dbb9b9 100644
--- a/doc/en/components/grids/_shared/summaries.md
+++ b/doc/en/components/grids/_shared/summaries.md
@@ -42,6 +42,7 @@ All available column data types could be found in the official [Column types top
`{ComponentName}` summaries are enabled per-column by setting `HasSummary` property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the `{ComponentName}` the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the `DataType` property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid `Locale` and column `PipeArgs`.
+
```html
<{ComponentSelector} #grid1 [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
@@ -87,9 +88,76 @@ All available column data types could be found in the official [Column types top
```
+
+
+
+
+```html
+<{ComponentSelector} #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)">
+
@@ -87,14 +85,10 @@ export interface IDataState {
public buildUrl(dataState: IDataState): string {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${this.url}${qS}`;
@@ -119,14 +113,10 @@ const dataState: {
function buildUrl(dataState: any) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
return `${URL}${qS}`;
@@ -150,17 +140,13 @@ const dataState: {
function buildUrl(dataState) {
let qS = "";
if (dataState) {
- qS += `${dataState.key}?`;
-
- if (!dataState.rootLevel) {
- if (typeof dataState.parentID === "string") {
- qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
- } else {
- qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
- }
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
}
}
- return `${URL}${qS}`;
+ return `${DATA_URL}${qS}`;
}
```
@@ -185,27 +171,23 @@ export interface IDataState {
@Injectable()
export class RemoteLoDService {
- url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;
+ public url = `https://data-northwind.indigo.design/`;
constructor(private http: HttpClient) { }
public getData(dataState: IDataState): Observable
diff --git a/doc/jp/components/charts/features/chart-animations.md b/doc/jp/components/charts/features/chart-animations.md
index bb580ed57..40dceff84 100644
--- a/doc/jp/components/charts/features/chart-animations.md
+++ b/doc/jp/components/charts/features/chart-animations.md
@@ -28,7 +28,7 @@ _language: ja
関連するチャートタイプの詳細については、以下のトピックを参照してください。
- [チャート注釈](chart-annotations.md)
-- [チャート強調表示](chart-highlighting.md)
+- [チャートのハイライト表示](chart-highlighting.md)
- [チャート ツールチップ](chart-tooltips.md)
## API リファレンス
diff --git a/doc/jp/components/charts/features/chart-data-filtering b/doc/jp/components/charts/features/chart-data-filtering
new file mode 100644
index 000000000..5b6e0ff95
--- /dev/null
+++ b/doc/jp/components/charts/features/chart-data-filtering
@@ -0,0 +1,53 @@
+---
+title: {Platform} Chart Data Filtering | Data Visualization | Infragistics
+_description: Infragistics' {Platform} Chart Data Filtering
+_keywords: {Platform} Charts, Filtering, Infragistics
+mentionedTypes: ["CategoryChart"]
+namespace: Infragistics.Controls.Charts
+---
+
+# {Platform} Chart Data Filtering
+
+Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart.
+
+A complete list of valid expressions and keywords to form a query string can be found here:
+
+[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris)
+
+> NOTE: Any incorrect filter applied will result with an empty chart.
+
+## {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 `InitialFilter` property, to update the chart visual and thus filtering out the other decades out.
+
+`sample="/charts/category-chart/data-filter", height="500", alt="{Platform} Data Filter Example"`
+
+
+
+The `InitialFilter` property is a string that requires the following syntax in order to filter properly. The value requires sets of parenthesesthat 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:
+
+"(startswith(Country, 'B'))"
+
+eg. Concatenating more than one expression:
+
+"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))"
+
+
+## Additional Resources
+
+You can find more information about related chart features in these topics:
+
+- [Chart Annotations](chart-annotations.md)
+- [Chart Highlighting](chart-highlighting.md)
+- [Chart Tooltips](chart-tooltips.md)
+
+## API References
+
+The following is a list of API members mentioned in the above sections:
+
+- `CategoryChart`
+- `IsTransitionInEnabled`
+- `TransitionInDuration`
+- `TransitionInMode`
\ No newline at end of file
diff --git a/doc/jp/components/charts/features/chart-highlight-filter.md b/doc/jp/components/charts/features/chart-highlight-filter.md
index 56df8a586..980892708 100644
--- a/doc/jp/components/charts/features/chart-highlight-filter.md
+++ b/doc/jp/components/charts/features/chart-highlight-filter.md
@@ -1,46 +1,46 @@
---
-title: {Platform} チャート強調表示フィルター | データ可視化 | インフラジスティックス
-_description: Infragistics の {Platform} チャート強調表示フィルター
-_keywords: {Platform} Charts, Highlighting, Filtering, Infragistics, {Platform} チャート, 強調表示, フィルターリング, インフラジスティックス
+title: {Platform} チャートのハイライト表示フィルター | データ可視化 | インフラジスティックス
+_description: Infragistics の {Platform} チャートのハイライト表示フィルター
+_keywords: {Platform} Charts, Highlighting, Filtering, Infragistics, {Platform} チャート, ハイライト表示, フィルターリング, インフラジスティックス
mentionedTypes: ["CategoryChart", "XamDataChart", "Series", "HighlightedValuesDisplayMode"]
namespace: Infragistics.Controls.Charts
_language: ja
---
-# {Platform} Chart 強調表示フィルター
+# {Platform} チャートのハイライト表示フィルター
-{ProductName} Chart コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータ強調表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットが強調表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。
+{ProductName} チャート コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータハイライト表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットがハイライト表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。
-`sample="/charts/data-chart/chart-highlight-filter-multiple-series", height="500", alt="{Platform} 強調表示フィルターの例"`
+`sample="/charts/data-chart/chart-highlight-filter-multiple-series", height="500", alt="{Platform} ハイライト表示フィルターの例"`
-データ強調表示機能は `XamDataChart` および `CategoryChart` でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、強調表示を表示したい場合は `HighlightedValuesDisplayMode` プロパティを `Overlay` に設定する必要があることです。以下では、強調表示フィルター機能のさまざまな設定について説明します。
+データハイライト表示機能は `XamDataChart` および `CategoryChart` でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、ハイライト表示を表示したい場合は `HighlightedValuesDisplayMode` プロパティを `Overlay` に設定する必要があることです。以下では、ハイライト表示フィルター機能のさまざまな設定について説明します。
-## DataChart での強調表示フィルターの使用
+## DataChart でのハイライト表示フィルターの使用
-`XamDataChart` では、強調表示フィルター API の多くは主に、強調表示するデータのサブセットを表すコレクションに `HighlightedItemsSource` プロパティを設定することによって、シリーズ自体で発生します。`HighlightedItemsSource` 内の項目の数は、強調表示するシリーズの `ItemsSource` にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトで強調表示パスとして定義した `ValueMemberPath` が使用されます。このページの上部にあるサンプルでは、`XamDataChart` の `HighlightedItemsSource` を使用してオーバーレイを表示しています。
+`XamDataChart` では、ハイライト表示フィルター API の多くは主に、ハイライト表示するデータのサブセットを表すコレクションに `HighlightedItemsSource` プロパティを設定することによって、シリーズ自体で発生します。`HighlightedItemsSource` 内の項目の数は、ハイライト表示するシリーズの `ItemsSource` にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトでハイライト表示パスとして定義した `ValueMemberPath` が使用されます。このページの上部にあるサンプルでは、`XamDataChart` の `HighlightedItemsSource` を使用してオーバーレイを表示しています。
-シリーズの `HighlightedItemsSource` と `ItemsSource` の間でスキーマが一致しない場合は、シリーズの `HighlightedValueMemberPath` プロパティを使用してこれを構成できます。さらに、シリーズ自体の `ItemsSource` を強調表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、`HighlightedItemsSource` を提供せずに、`HighlightedValueMemberPath` プロパティをそのパスに設定するだけで行われます。
+シリーズの `HighlightedItemsSource` と `ItemsSource` の間でスキーマが一致しない場合は、シリーズの `HighlightedValueMemberPath` プロパティを使用してこれを構成できます。さらに、シリーズ自体の `ItemsSource` をハイライト表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、`HighlightedItemsSource` を提供せずに、`HighlightedValueMemberPath` プロパティをそのパスに設定するだけで行われます。
列およびエリア シリーズ の場合の不透明度の低減は、シリーズの `HighlightedValuesFadeOpacity` プロパティを設定することで構成できます。オーバーレイをまったく表示したくない場合は、`HighlightedValuesDisplayMode` プロパティを `Hidden` に設定することもできます。
-強調表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。`HighlightedTitleSuffix` を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの `Title` の末尾に追加されます。
+ハイライト表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。`HighlightedTitleSuffix` を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの `Title` の末尾に追加されます。
-次の例は、`HighlightedValueMemberPath` を使用した `XamDataChart` コントロール内のデータ強調表示オーバーレイ機能の使用法を示しています。
+次の例は、`HighlightedValueMemberPath` を使用した `XamDataChart` コントロール内のデータハイライト表示オーバーレイ機能の使用法を示しています。
-`sample="/charts/data-chart/chart-highlight-filter", height="500", alt="{Platform} 強調表示フィルターの例"`
+`sample="/charts/data-chart/chart-highlight-filter", height="500", alt="{Platform} ハイライト表示フィルターの例"`
-## CategoryChart での強調表示フィルターの使用
+## CategoryChart でのハイライト表示フィルターの使用
-`CategoryChart` 強調表示フィルターは、`InitialHighlightFilter` プロパティを設定することによってチャート上で発生します。`CategoryChart` は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも `InitialGroups` を定義する必要があります。`InitialGroups` を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。
+`CategoryChart` ハイライト表示フィルターは、`InitialHighlightFilter` プロパティを設定することによってチャート上で発生します。`CategoryChart` は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも `InitialGroups` を定義する必要があります。`InitialGroups` を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。
`XamDataChart` と同様に、`HighlightedValuesDisplayMode` プロパティも `CategoryChart` で公開されます。オーバーレイを表示したくない場合は、このプロパティを `Hidden` に設定できます。
-以下の例は、`CategoryChart` コントロール内でのデータ強調表示オーバーレイ機能の使用法を示しています。
+以下の例は、`CategoryChart` コントロール内でのデータハイライト表示オーバーレイ機能の使用法を示しています。
-`sample="/charts/category-chart/chart-highlight-filter", height="500", alt="{Platform} 強調表示フィルターの例"`
+`sample="/charts/category-chart/chart-highlight-filter", height="500", alt="{Platform} ハイライト表示フィルターの例"`
+
+
+```html
+
-
)
- }
+}
```
diff --git a/doc/jp/components/grids/_shared/column-hiding.md b/doc/jp/components/grids/_shared/column-hiding.md
index 5e390be68..077824f12 100644
--- a/doc/jp/components/grids/_shared/column-hiding.md
+++ b/doc/jp/components/grids/_shared/column-hiding.md
@@ -26,6 +26,7 @@ _language: ja
`{ComponentName}` を作成してからデータをバインドします。列でフィルタリングとソートも有効にします。
+
```html
+
+
+
+
+
+```
+
+```tsx
+`
}
```
+
```tsx
const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => {
@@ -333,15 +311,9 @@ const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) =>
);
}
-function App() {
- return (
- <>
-
<{ComponentSelector} Data=northwindEmployees>
@@ -157,11 +201,33 @@ import { IgxActionStripModule } from 'igniteui-angular';
```
+
-
+
+```razor
+
+
+
+
+ edit
+
+ @if (!IsDeleted(actionstrip.Context))
+ {
+
+ delete
+
+ }
+
+
+
+```
+
+
+
```html
<{ComponentSelector}>
+
;
+};
+```
+
+
+
+
+
+```html
+<{ComponentSelector} row-draggable="true" id="grid">
+
+```
+
+```ts
+constructor() {
+ var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
+ grid.dragIndicatorIconTemplate = this.dragIndicatorIconTemplate;
+}
+
+public dragIndicatorIconTemplate = (ctx: IgcGridEmptyTemplateContext) => {
+ return html`
Changes: ${ctx.implicit}
`;
}, false);
- ```
+```
```ts
public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
@@ -248,6 +548,8 @@ public rowEditTextTemplate = (ctx: IgcGridRowEditTextTemplateContext) => {
}
```
+
+
```tsx
function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
return (
@@ -257,6 +559,8 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
);
}
```
+
+
### ボタンのカスタマイズ
@@ -266,14 +570,14 @@ function rowEditTextTemplate(ctx: IgrGridRowEditTextTemplateContext) {
キーボード ナビゲーションにボタンを含める場合、各ボタンに `RowEditTabStopDirective` が必要です。
- ```html
+```html
+ 📌
+
`;
+}, false);
+```
+
+
+```html
+<{ComponentSelector} [data]="data" [primaryKey]="'ID'" [autoGenerate]="false">
+
+
+はじめに必要となるのはグリッドのデータ、親業のプライマリキーとその一意の ID をどこから取得するかを決定するテーブルの `key` が必要です。
+
+
+インターフェイス `IDataState` でこれらすべてを定義します。例:
+
+```typescript
+export interface IDataState {
+ key: string;
+ parentID: any;
+ parentKey: string;
+ rootLevel: boolean;
+}
+
+//...
+public buildUrl(dataState: IDataState): string {
+ let qS = "";
+ if (dataState) {
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
+ }
+ }
+ return `${this.url}${qS}`;
+}
+//...
+```
+
+
+
+これらすべてを `dataState` オブジェクトで定義します。例:
+
+```ts
+const dataState: {
+ key: string;
+ parentID: any;
+ parentKey: string;
+ rootLevel: boolean;
+} = {
+ //...
+};
+
+function buildUrl(dataState: any) {
+ let qS = "";
+ if (dataState) {
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
+ }
+ }
+ return `${URL}${qS}`;
+}
+```
+
+
+
+これらすべてを `dataState` オブジェクトで定義します。例:
+
+```razor
+const dataState: {
+ key: string;
+ parentID: any;
+ parentKey: string;
+ rootLevel: boolean;
+} = {
+ //...
+};
+
+function buildUrl(dataState) {
+ let qS = "";
+ if (dataState) {
+ if (dataState.rootLevel) {
+ qS += `${dataState.key}`;
+ } else {
+ qS += `${dataState.parentKey}/${dataState.parentID}/${dataState.key}`;
+ }
+ }
+ return `${DATA_URL}${qS}`;
+}
+```
+
+
+#### 結果
+
+
+最後に `remote-lod.service.ts` は以下のようになります。
+
+```typescript
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export interface IDataState {
+ key: string;
+ parentID: any;
+ parentKey: string;
+ rootLevel: boolean;
+}
+
+@Injectable()
+export class RemoteLoDService {
+ public url = `https://data-northwind.indigo.design/`;
+
+ constructor(private http: HttpClient) { }
+
+ public getData(dataState: IDataState): Observable