broker earnings displayed successfully groupped with advanced features.

src/app/broker-reward/broker-reward.component.html

@@ -1,5 +1,7 @@
 <kendo-grid
-  [data]="gridData"
+  [groupable]="true"
+  [data]="gridView"
+  (groupChange)="groupChange($event)"
 >
   <kendo-grid-column field="Id"></kendo-grid-column>
 
@@ -10,14 +12,14 @@
   </kendo-grid-column>
   <kendo-grid-column field="Description"></kendo-grid-column>
 
-  <kendo-grid-column field="Item" Title="From Loan"></kendo-grid-column>
-  <kendo-grid-column field="Status">
+  <kendo-grid-column field="Item" title="From Loan"></kendo-grid-column>
+  <kendo-grid-column field="Status" title="Loan Status">
     <ng-template kendoGridCellTemplate let-dataItem>
       <span *ngIf="dataItem.Status != 'none'" class="badge badge-success">{{dataItem.Status}}</span>
     </ng-template>
   </kendo-grid-column>
 
-  <kendo-grid-column field="Ts">
+  <kendo-grid-column field="Ts" title="Date Rewarded">
     <ng-template kendoGridCellTemplate let-dataItem >
       <div *ngIf="dataItem.Settlement != null" >
         {{  dataItem.Ts | date: 'yyyy-MM-dd' }}
@@ -26,13 +28,7 @@
   </kendo-grid-column>
 
 
-  <kendo-grid-column field="Settlement">
-    <ng-template kendoGridCellTemplate let-dataItem >
-      <div *ngIf="dataItem.Settlement != null" >
-        {{  dataItem.Settlement | date: 'yyyy-MM-dd' }}
-      </div>
-    </ng-template>
-  </kendo-grid-column>
+  <kendo-grid-column field="PayOutId" title="Payment Record">  </kendo-grid-column>
 
 
 </kendo-grid>

src/app/broker-reward/broker-reward.component.ts

@@ -1,10 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import {HttpClient} from '@angular/common/http';
-import {GridDataResult} from '@progress/kendo-angular-grid';
-import {Observable} from 'rxjs';
 import {AuthService} from '../service/auth.service';
-import {map} from 'rxjs/operators';
 import {RewardByUserModel} from '../models/reward-by-user.model';
+import {DataResult, GroupDescriptor, process} from '@progress/kendo-data-query';
 
 @Component({
   selector: 'app-broker-reward',
@@ -15,6 +13,9 @@ export class BrokerRewardComponent implements OnInit {
 
   public gridData: RewardByUserModel[] = [] ;
 
+  public groups: GroupDescriptor[] = [{ field: 'Description' }, { field: 'Item' } ];
+  public gridView: DataResult;
+
   constructor(private http: HttpClient, private auth: AuthService ) { }
 
   ngOnInit(): void {
@@ -24,7 +25,18 @@ export class BrokerRewardComponent implements OnInit {
         rsp.forEach(v => {
           this.gridData.push(new RewardByUserModel(v));
         });
+        this.loadRewards();
       }
     );
   }
+
+  public groupChange(groups: GroupDescriptor[]): void {
+    this.groups = groups;
+    this.loadRewards();
+  }
+
+  private loadRewards(): void {
+    this.gridView = process(this.gridData, { group: this.groups });
+  }
+
 }