Multiple Grid with Similar Data: Sorting Issue

[bhavin]

Hello,

  I have 2 grids both of them have the same columns expect one grid has few additional columns. When I try to sort any column it reflects back on the second grid as well. 

I do have different functions for the grid like:

  public groupChangeGrid1(groups: GroupDescriptor[]): void {
    this.groupGrid1 = groups;
    this.loadDataGrid1();
  }

  public groupChangeGrid2(groups: GroupDescriptor[]): void {
    this.groupGrid2 = groups;
    this.loadDataGrid2();
  }

  private loadDataGrid1(): void {
    this.gridView1 = process(this.summary_data, { group: this.groupGrid1, sort: this.sortGrid1 });
  }

  private loadDataGrid2(): void {
    this.gridView1 = process(this.detail_data, { group: this.groupGrid2, sort: this.sortGrid2 });
  }

  public sortChangeGrid1(sort: SortDescriptor[]): void {
    this.sortGrid1 = sort;
    this.loadDataGrid1();
  }

  public sortChangeGrid2(sort: SortDescriptor[]): void {
    this.sortGrid2 = sort;
    this.loadDataGrid2();
  }

And my grid settings look something like 

<kendo-grid [kendoGridBinding]="detail_data" [pageable]="true" [pageSize]="10" [groupable]="true" [scrollable]="true" [data]="gridView2"
            [group]="groupGrid2" (groupChange)="groupChangeGrid2($event)" [sortable]="{
            mode: 'single'
            }" [sort1]="sortGrid2" (sortChange)="sortChangeGrid2($event)">

 

<kendo-grid [kendoGridBinding]="summary_data" [pageable]="true" [pageSize]="10" [groupable]="true" [scrollable]="true" [data]="gridView1"
            [group]="groupGrid1" (groupChange)="groupChangeGrid1($event)" [sortable]="{
            mode: 'single'
            }" [sort]="sortGrid1" (sortChange)="sortChangeGrid1($event)">

 

Would be nice to have an example provided as a reference if possible. 

[bhavin]

private loadDataGrid1(): void {
    this.gridView1 = process(this.summary_data, { group: this.groupGrid1, sort: this.sortGrid1 });
  }

  private loadDataGrid2(): void {
    this.gridView1 = process(this.detail_data, { group: this.groupGrid2, sort: this.sortGrid2 });
  }

 

I got the problem I was assigning the process to the same variable.