Skip to content

Commit 113f9da

Browse files
ddinchevanrobakova
ddincheva
and
nrobakova
authored
Copy/paste cells in grid with remote virtualization (#7524)
* fix(IgxGrid): extract data correctly when remote virtualization is enabled #7385 Co-authored-by: Nadia Robakova <[email protected]>
1 parent c7ad159 commit 113f9da

File tree

8 files changed

+206
-5
lines changed

8 files changed

+206
-5
lines changed

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5452,15 +5452,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
54525452
let record = {};
54535453
const selectedData = [];
54545454
const activeEl = this.selectionService.activeElement;
5455-
5456-
const selectionMap = Array.from(this.selectionService.selection)
5457-
.filter((tuple) => tuple[0] < source.length);
5455+
const totalItems = (this as any).totalItemCount ?? 0;
5456+
const isRemote = totalItems && totalItems > this.dataView.length;
5457+
const selectionMap = isRemote ? Array.from(this.selectionService.selection) :
5458+
Array.from(this.selectionService.selection).filter((tuple) => tuple[0] < source.length);
54585459

54595460
if (this.cellSelection === GridSelectionMode.single && activeEl) {
54605461
selectionMap.push([activeEl.row, new Set<number>().add(activeEl.column)]);
54615462
}
54625463

5463-
for (const [row, set] of selectionMap) {
5464+
for (let [row, set] of selectionMap) {
5465+
row = isRemote ? row - this.virtualizationState.startIndex : row;
54645466
if (!source[row] || source[row].detailsData !== undefined) {
54655467
continue;
54665468
}

‎src/app/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,11 @@ export class AppComponent implements OnInit {
247247
icon: 'view_column',
248248
name: 'Grid Remote Virtualization'
249249
},
250+
{
251+
link: '/gridScrollVirtualization',
252+
icon: 'view_column',
253+
name: 'Grid Remote Virtualization with Scroll'
254+
},
250255
{
251256
link: '/gridRemotePaging',
252257
icon: 'view_column',

‎src/app/app.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@ import { GridColumnSelectionSampleComponent, GridColumnSelectionFilterPipe } fro
126126
import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
127127
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
128128
import { DateRangeSampleComponent } from './date-range/date-range.sample';
129+
import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
129130

130131
const components = [
131132
ActionStripSampleComponent,
@@ -240,7 +241,8 @@ const components = [
240241
AboutComponent,
241242
ReactiveFormSampleComponent,
242243
DateRangeSampleComponent,
243-
GridRemotePagingSampleComponent
244+
GridRemotePagingSampleComponent,
245+
GridVirtualizationScrollSampleComponent
244246
];
245247

246248
@NgModule({

‎src/app/app.routing.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ import { GridMasterDetailSampleComponent } from './grid-master-detail/grid-maste
7272
import { DateTimeEditorSampleComponent } from './date-time-editor/date-time-editor.sample';
7373
import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinning.sample';
7474
import { ActionStripSampleComponent } from './action-strip/action-strip.sample';
75+
import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
7576

7677
const appRoutes = [
7778
{
@@ -350,6 +351,10 @@ const appRoutes = [
350351
path: 'gridAbout',
351352
component: AboutComponent
352353
},
354+
{
355+
path: 'gridScrollVirtualization',
356+
component: GridVirtualizationScrollSampleComponent
357+
}
353358
];
354359

355360
export const routing = RouterModule.forRoot(appRoutes);

‎src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="sample-wrapper dark-grid">
2+
<igx-grid #grid1 [data]="remoteData | async" [height]="'500px'" [width]="'100%'" [autoGenerate]='true' (onDataPreLoad)="handlePreLoad()" [clipboardOptions]="clipboardOptions"
3+
(onSortingDone)="processData(true)">
4+
</igx-grid>
5+
</div>

‎src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, ViewChild, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
2+
import { IgxGridComponent } from 'igniteui-angular';
3+
import { debounceTime } from 'rxjs/operators';
4+
import { RemoteVirtService } from '../shared/remote.service - Copy';
5+
6+
@Component({
7+
selector: 'app-grid-remote-virtualization-scroll',
8+
templateUrl: 'grid-remote-virtualization-scroll.sample.html',
9+
providers: [RemoteVirtService]
10+
})
11+
12+
export class GridVirtualizationScrollSampleComponent implements OnInit, AfterViewInit {
13+
14+
public remoteData: any;
15+
public prevRequest: any;
16+
public columns: any;
17+
public loading = true;
18+
19+
@ViewChild('grid1', { static: true })
20+
public grid: IgxGridComponent;
21+
22+
public clipboardOptions = {
23+
enabled: true,
24+
copyHeaders: false,
25+
copyFormatters: true,
26+
separator: '\t'
27+
};
28+
constructor(private remoteService: RemoteVirtService, public cdr: ChangeDetectorRef) { }
29+
30+
public ngOnInit(): void {
31+
this.remoteData = this.remoteService.data;
32+
}
33+
34+
public ngAfterViewInit() {
35+
this.grid.isLoading = true;
36+
37+
this.remoteService.getData(this.grid.virtualizationState, this.grid.sortingExpressions[0], true, (data) => {
38+
this.grid.totalItemCount = data['@odata.count'];
39+
this.grid.isLoading = false;
40+
});
41+
42+
this.grid.onDataPreLoad.pipe(debounceTime(500)).subscribe(() => {
43+
this.processData(false);
44+
});
45+
}
46+
47+
public handlePreLoad() {
48+
if (this.remoteService.hasItemsInCache(this.grid.virtualizationState)) {
49+
this.processData(false);
50+
}
51+
}
52+
53+
public processData(reset) {
54+
if (this.prevRequest) {
55+
this.prevRequest.unsubscribe();
56+
}
57+
this.prevRequest = this.remoteService.getData(this.grid.virtualizationState,
58+
this.grid.sortingExpressions[0], reset, () => {
59+
this.cdr.detectChanges();
60+
});
61+
}
62+
}

‎src/app/routing.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ import { GridRowPinningSampleComponent } from './grid-row-pinning/grid-row-pinni
102102
import { ReactiveFormSampleComponent } from './reactive-from/reactive-form-sample.component';
103103
import { DateRangeSampleComponent } from './date-range/date-range.sample';
104104
import { ActionStripSampleComponent } from './action-strip/action-strip.sample';
105+
import { GridVirtualizationScrollSampleComponent } from './grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample';
105106

106107
const appRoutes = [
107108
{
@@ -434,6 +435,10 @@ const appRoutes = [
434435
path: 'gridRowEdit',
435436
component: GridRowEditSampleComponent
436437
},
438+
{
439+
path: 'gridScrollVirtualization',
440+
component: GridVirtualizationScrollSampleComponent
441+
},
437442
{
438443
path: 'treeGrid',
439444
component: TreeGridSampleComponent

‎src/app/shared/remote.service - Copy.ts‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
2+
import { HttpClient } from '@angular/common/http';
3+
import { Injectable } from '@angular/core';
4+
import { SortingDirection } from 'igniteui-angular';
5+
import { BehaviorSubject, Observable } from 'rxjs';
6+
7+
const DATA_URL = 'https://services.odata.org/V4/Northwind/Northwind.svc/Products';
8+
const EMPTY_STRING = '';
9+
export enum SortOrder {
10+
ASC = 'asc',
11+
DESC = 'desc',
12+
NONE = ''
13+
}
14+
@Injectable()
15+
export class RemoteVirtService {
16+
17+
public data: Observable<any[]>;
18+
private _data: BehaviorSubject<any[]>;
19+
private _cachedData: any[];
20+
21+
constructor(private _http: HttpClient) {
22+
this._data = new BehaviorSubject([]);
23+
this.data = this._data.asObservable();
24+
}
25+
26+
public hasItemsInCache(virtualizationArgs?) {
27+
const startIndex = virtualizationArgs.startIndex;
28+
const endIndex = virtualizationArgs.chunkSize + startIndex;
29+
let areAllItemsInCache = true;
30+
for (let i = startIndex; i < endIndex; i++) {
31+
if (this._cachedData[i] === null) {
32+
areAllItemsInCache = false;
33+
break;
34+
}
35+
}
36+
return areAllItemsInCache;
37+
}
38+
39+
public getData(virtualizationArgs?, sortingArgs?: any, resetData?: boolean, cb?: (any) => void): any {
40+
const startIndex = virtualizationArgs.startIndex;
41+
const endIndex = virtualizationArgs.chunkSize + startIndex;
42+
43+
if (resetData) {
44+
this._http.get(this._buildDataUrl(virtualizationArgs, sortingArgs)).subscribe((data: any) => {
45+
this._cachedData = new Array<any>(data['@odata.count']).fill(null);
46+
this._updateData(data, startIndex);
47+
if (cb) {
48+
cb(data);
49+
}
50+
});
51+
52+
return;
53+
}
54+
55+
if (!this.hasItemsInCache(virtualizationArgs)) {
56+
this._http.get(this._buildDataUrl(virtualizationArgs, sortingArgs)).subscribe((data: any) => {
57+
this._updateData(data, startIndex);
58+
if (cb) {
59+
cb(data);
60+
}
61+
});
62+
} else {
63+
const data = this._cachedData.slice(startIndex, endIndex);
64+
this._data.next(data);
65+
if (cb) {
66+
cb(data);
67+
}
68+
}
69+
}
70+
71+
private _updateData(data: any, startIndex: number) {
72+
this._data.next(data.value);
73+
for (let i = 0; i < data.value.length; i++) {
74+
this._cachedData[i + startIndex] = data.value[i];
75+
}
76+
}
77+
78+
private _buildDataUrl(virtualizationArgs: any, sortingArgs: any): string {
79+
let baseQueryString = `${DATA_URL}?$count=true`;
80+
let scrollingQuery = EMPTY_STRING;
81+
let orderQuery = EMPTY_STRING;
82+
let query = EMPTY_STRING;
83+
84+
if (sortingArgs) {
85+
let sortingDirection: string;
86+
switch (sortingArgs.dir) {
87+
case SortingDirection.Asc:
88+
sortingDirection = SortOrder.ASC;
89+
break;
90+
case SortingDirection.Desc:
91+
sortingDirection = SortOrder.DESC;
92+
break;
93+
default:
94+
sortingDirection = SortOrder.NONE;
95+
}
96+
97+
orderQuery = `$orderby=${sortingArgs.fieldName} ${sortingDirection}`;
98+
}
99+
100+
if (virtualizationArgs) {
101+
let requiredChunkSize: number;
102+
const skip = virtualizationArgs.startIndex;
103+
requiredChunkSize = virtualizationArgs.chunkSize === 0 ? 11 : virtualizationArgs.chunkSize;
104+
const top = requiredChunkSize;
105+
scrollingQuery = `$skip=${skip}&$top=${top}`;
106+
}
107+
108+
query += (orderQuery !== EMPTY_STRING) ? `&${orderQuery}` : EMPTY_STRING;
109+
query += (scrollingQuery !== EMPTY_STRING) ? `&${scrollingQuery}` : EMPTY_STRING;
110+
111+
baseQueryString += query;
112+
113+
return baseQueryString;
114+
}
115+
}

0 commit comments

Comments
 (0)