docs: update remote docs #1633

IgniteUI · Nov 1, 2019 · fea129a · fea129a
1 parent ebefdcd
commit fea129a
Show file tree

Hide file tree

Showing 6 changed files with 153 additions and 23 deletions.
diff --git a/en/components/grids_templates/filtering.md b/en/components/grids_templates/filtering.md
@@ -198,9 +198,23 @@ When set to [`OR`]({environment:angularApiUrl}/enums/filteringlogic.html#or), a
 
 <div class="divider--half"></div>
 
-@@if (igxName === 'IgxGrid') {
+@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
 #### Remote Filtering
-You can provide @@igComponent's remote filtering by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) outputs. More information on how to use it you can find in the `Grid Virtualization and Performance` [documentation](virtualization.md#remote-sortingfiltering-virtualization).
+You can provide @@igComponent's remote filtering by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and either the [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) or the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) outputs. More information on how to use them you can find in the `@@igComponent Virtualization and Performance` [documentation](virtualization.md).
+
+> [!NOTE]
+> The [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) output is fired whenever a change to the filtering expressions has occurred. This output is triggered prior to the actual filtering operation, unlike the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) output, which is triggered after the filtering has finished.
+
+When remote filtering is provided, usually we do not need the built-in filtering of the @@igComponent. We can disable it by setting the [`filterStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterstrategy) input of the @@igComponent to the `NoopFilteringStrategy` instance. When this strategy is used, the filtering functionality is left entirely for the developer to implement.
+
+```html
+<@@igSelector [allowFiltering]="true" [filterStrategy]="noopFilterStrategy">
+</@@igSelector>
+```
+
+```typescript
+public noopFilterStrategy = NoopFilteringStrategy.instance();
+```
 
 <div class="divider--half"></div>
 }

diff --git a/en/components/grids_templates/sorting.md b/en/components/grids_templates/sorting.md
@@ -117,9 +117,27 @@ public ngOnInit() {
 
 <div class="divider--half"></div>
 
-@@if (igxName === 'IgxGrid') {
+@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
 #### Remote Sorting
-You can provide @@igComponent's remote sorting by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) outputs. More information on how to use it you can find in the `@@igComponent Virtualization and Performance` [documentation](virtualization.md#remote-sortingfiltering-virtualization).
+You can provide @@igComponent's remote sorting by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and either the [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange) or the [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) outputs.
+@@if (igxName === 'IgxGrid') {More information on how to use them you can find in the `@@igComponent Virtualization and Performance` [documentation](virtualization.md#remote-sortingfiltering-virtualization).}
+
+> [!NOTE]
+> The [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange) output is fired whenever a change to the sorting expressions has occurred. This output is triggered prior to the actual sorting operation, unlike the [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) output, which is triggered after the sorting has finished.
+
+When remote sorting is provided, usually we do not need the built-in sorting of the @@igComponent. We can disable it by setting the [`sortStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortstrategy) input of the @@igComponent to the `NoopSortingStrategy` instance. When this strategy is used, the sorting functionality is left entirely for the developer to implement.
+
+> [!NOTE]
+> The [`sortStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortstrategy) of the **@@igComponent** is of different type compared to the [`sortStrategy`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortstrategy) of the **column**, since they work in different scopes and expose different parameters.
+
+```html
+<@@igSelector [allowFiltering]="true" [sortStrategy]="noopSortStrategy">
+</@@igSelector>
+```
+
+```typescript
+public noopSortStrategy = NoopSortingStrategy.instance();
+```
 
 <div class="divider--half"></div>
 }

diff --git a/en/components/grids_templates/virtualization.md b/en/components/grids_templates/virtualization.md
@@ -111,7 +111,30 @@ When requesting data, you need to utilize the [`IForOfState`]({environment:angul
 ***Note:*** The first [`chunkSize`]({environment:angularApiUrl}/interfaces/iforofstate.html#chunksize) will always be 0 and should be determined by you based on the specific application scenario.
 
 ### Remote Sorting/Filtering Virtualization
-To provide remote sorting and filtering, you need to subscribe to the [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload), [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone), [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) outputs so that you make the appropriate request based on the arguments received, as well as set the public [@@igxName]({environment:angularApiUrl}/classes/@@igTypeDoc.html) property [`totalItemCount`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#totalitemcount) with the respective information coming from the service.
+
+To provide remote sorting and filtering, you need to subscribe to the [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload), [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange), [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) outputs so that you make the appropriate request based on the arguments received, as well as set the public [@@igxName]({environment:angularApiUrl}/classes/@@igTypeDoc.html) property [`totalItemCount`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#totalitemcount) with the respective information coming from the service.
+
+> [!NOTE]
+> The [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange) and the [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) outputs are fired whenever a change to the sorting and filtering expressions has occurred respectively. These outputs are triggered prior to the actual sorting and filtering operations, unlike the [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) and the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) outputs, which are triggered after the respective operations have finished.
+
+When remote sorting and filtering are provided, usually we do not need the built-in sorting and filtering of the grid. We can disable them by setting the [`sortStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortstrategy) and the [`filterStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterstrategy) inputs of the grid to the `NoopSortingStrategy` and the `NoopFilteringStrategy` respective instances.
+
+```html
+<igx-grid #grid [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [autoGenerate]='false'
+        [filterStrategy]="noopFilterStrategy"
+        [sortStrategy]="noopSortStrategy"
+        (onDataPreLoad)="processData()"
+        (sortingExpressionsChange)="processData()"
+        (filteringExpressionsTreeChange)="processData()"
+        [allowFiltering]="true">
+    ...
+</igx-grid>
+```
+
+```typescript
+public noopFilterStrategy = NoopFilteringStrategy.instance();
+public noopSortStrategy = NoopSortingStrategy.instance();
+```
 
 Note that when requesting remote data, filtering operation is case-sensitive.
 
@@ -127,13 +150,21 @@ Note that when requesting remote data, filtering operation is case-sensitive.
 @@if (igxName === 'IgxTreeGrid') {
 ### Remote Filtering Virtualization
 
-To provide remote filtering, you need to subscribe to the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) output so that you make the appropriate request based on the arguments received. Let's use a flat collection as a data source for our Tree Grid by providing a [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) and a [`foreignKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#foreignkey).
+To provide remote filtering, you need to subscribe to the [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) output so that you make the appropriate request based on the arguments received. Let's use a flat collection as a data source for our Tree Grid by providing a [`primaryKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#primarykey) and a [`foreignKey`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#foreignkey).
+
+> [!NOTE]
+> The [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) output is fired whenever a change to the filtering expressions has occurred. This output is triggered prior to the actual filtering operation, unlike the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) output, which is triggered after the respective operation has finished.
+
+When remote filtering is provided, usually we do not need the built-in filtering of the Tree Grid. We can disable it by setting the [`filterStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterstrategy) input of the Tree Grid to the `NoopFilteringStrategy` instance.
 
 ```html
 <!-- tree-grid-remote-filtering-sample.html -->
 
 <igx-tree-grid #treeGrid [data]="remoteData | async" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" width="100%" height="450px"
-                [autoGenerate]="false" (onFilteringDone)="processData()" [allowFiltering]="true">
+               [autoGenerate]="false"
+               [filterStrategy]="noopFilterStrategy"
+               (filteringExpressionsTreeChange)="processData()"
+               [allowFiltering]="true">
     <igx-column [field]="'Name'" dataType="string"></igx-column>
     <igx-column [field]="'Title'" dataType="string"></igx-column>
     <igx-column [field]="'Age'" dataType="number"></igx-column>
@@ -144,17 +175,19 @@ To provide remote filtering, you need to subscribe to the [`onFilteringDone`]({e
 ```typescript
 // tree-grid-remote-filtering-sample.ts
 
+public noopFilterStrategy = NoopFilteringStrategy.instance();
+
 public ngAfterViewInit() {
     this.processData();
 }
 
 public processData() {
-    this.toast.show();
+    this.treeGrid.isLoading = true;
 
     const filteringExpr = this.treeGrid.filteringExpressionsTree;
 
     this._remoteService.getData(filteringExpr, () => {
-        this.toast.hide();
+        this.treeGrid.isLoading = false;
     });
 }
 ```

diff --git a/jp/components/grids_templates/filtering.md b/jp/components/grids_templates/filtering.md
@@ -202,9 +202,23 @@ this.@@igObjectRef.filteringLogic = FilteringLogic.OR;
 
 <div class="divider--half"></div>
 
-@@if (igxName === 'IgxGrid') {
-#### リモート フィルタリング
-[`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) と [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) アウトプットにサブスクライブしてグリッドでリモート フィルタリングができます。詳細については、`グリッドの仮想化とパフォーマンスの`[ヘルプ](virtualization.md#remote-sortingfiltering-virtualization)をご覧ください。
+@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+#### Remote Filtering
+You can provide @@igComponent's remote filtering by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and either the [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) or the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) outputs. More information on how to use them you can find in the `@@igComponent Virtualization and Performance` [documentation](virtualization.md).
+
+> [!NOTE]
+> The [`filteringExpressionsTreeChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filteringexpressionstreechange) output is fired whenever a change to the filtering expressions has occurred. This output is triggered prior to the actual filtering operation, unlike the [`onFilteringDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onfilteringdone) output, which is triggered after the filtering has finished.
+
+When remote filtering is provided, usually we do not need the built-in filtering of the @@igComponent. We can disable it by setting the [`filterStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#filterstrategy) input of the @@igComponent to the `NoopFilteringStrategy` instance. When this strategy is used, the filtering functionality is left entirely for the developer to implement.
+
+```html
+<@@igSelector [allowFiltering]="true" [filterStrategy]="noopFilterStrategy">
+</@@igSelector>
+```
+
+```typescript
+public noopFilterStrategy = NoopFilteringStrategy.instance();
+```
 
 <div class="divider--half"></div>
 }

diff --git a/jp/components/grids_templates/sorting.md b/jp/components/grids_templates/sorting.md
@@ -116,9 +116,27 @@ public ngOnInit() {
 
 <div class="divider--half"></div>
 
-@@if (igxName === 'IgxGrid') {
-#### リモート並べ替え
-[`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) と [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) アウトプットにサブスクライブして @@igComponent のリモート並べ替えが可能です。詳細については、[@@igComponent の仮想化とパフォーマンス](virtualization.md#remote-sortingfiltering-virtualization)をご覧ください。
+@@if (igxName === 'IgxGrid' || igxName === 'IgxTreeGrid') {
+#### Remote Sorting
+You can provide @@igComponent's remote sorting by subscribing to [`onDataPreLoad`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#ondatapreload) and either the [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange) or the [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) outputs.
+@@if (igxName === 'IgxGrid') {More information on how to use them you can find in the `@@igComponent Virtualization and Performance` [documentation](virtualization.md#remote-sortingfiltering-virtualization).}
+
+> [!NOTE]
+> The [`sortingExpressionsChange`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortingexpressionschange) output is fired whenever a change to the sorting expressions has occurred. This output is triggered prior to the actual sorting operation, unlike the [`onSortingDone`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#onsortingdone) output, which is triggered after the sorting has finished.
+
+When remote sorting is provided, usually we do not need the built-in sorting of the @@igComponent. We can disable it by setting the [`sortStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortstrategy) input of the @@igComponent to the `NoopSortingStrategy` instance. When this strategy is used, the sorting functionality is left entirely for the developer to implement.
+
+> [!NOTE]
+> The [`sortStrategy`]({environment:angularApiUrl}/classes/@@igTypeDoc.html#sortstrategy) of the **@@igComponent** is of different type compared to the [`sortStrategy`]({environment:angularApiUrl}/classes/igxcolumncomponent.html#sortstrategy) of the **column**, since they work in different scopes and expose different parameters.
+
+```html
+<@@igSelector [allowFiltering]="true" [sortStrategy]="noopSortStrategy">
+</@@igSelector>
+```
+
+```typescript
+public noopSortStrategy = NoopSortingStrategy.instance();
+```
 
 <div class="divider--half"></div>
 }