sorting & filtering 1st version done

src/app/app-routing.module.ts

@@ -30,7 +30,7 @@ const routes: Routes = [
   },
   {
     path: 'grid-filter',
-    loadChildren: ()=> import('./grid-filter-demo/grid-filter-demo.module').then(m => m.GridFilterDemoModule)
+    loadChildren: ()=> import('./grid-filter&sorting-demo/grid-filter-demo.module').then(m => m.GridFilterDemoModule)
   }
 ];
 

src/app/grid-filter&sorting-demo/grid-filter-demo.module.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 
 import { GridFilterDemoRoutingModule } from './grid-filter-demo-routing.module';
 import { GridFilterDemoComponent } from './grid-filter-demo/grid-filter-demo.component';
-import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule } from '@poweredsoft/ngx-bootstrap';
+import { GridFilterModule, psbxPaginationModule, CommandModalModule, ConfirmModalModule, SpinnerModule, GridSortingModule } from '@poweredsoft/ngx-bootstrap';
 import { DataGridModule } from '@poweredsoft/ngx-cdk-ui';
 import { FormsModule } from '@angular/forms';
 
@@ -18,7 +18,8 @@ import { FormsModule } from '@angular/forms';
     CommandModalModule,
     ConfirmModalModule,
     FormsModule,
-    SpinnerModule
+    SpinnerModule,
+    GridSortingModule
   ]
 })
 export class GridFilterDemoModule { }

src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.html

@@ -14,8 +14,11 @@
     
     <ng-container psDataGridCol="id">
         <div *psDataGridColHeader>ID</div>
+        <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
+        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
         <div *psDataGridCell="let model">{{model.id}}</div>
-        <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" (onFilter)="filterMerchants($event)" ></psbx-ds-text-filter>
+        <!--<psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-number-filter>-->
+        <!--<psbx-grid-sorting *psDataGridColSort path="id" [dataSource]="merchantDataSource"></psbx-grid-sorting>-->
         <!-- <psfa-ds-sort-icon *psDataGridColSort [sortPath]="id" [dataSource]="merchantDataSource">
 
         </psfa-ds-sort-icon>  -->
@@ -31,12 +34,16 @@
 
     <ng-container psDataGridCol="name">
         <div *psDataGridColHeader>Name</div>
-        <div *psDataGridCell="let model">{{model.name}}</div>         
+        <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
+        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
+        <div *psDataGridCell="let model">{{model.name}}</div>
     </ng-container>
    
     <ng-container psDataGridCol="address">
         <div *psDataGridColHeader>Address</div>
         <div *psDataGridCell="let model">{{model.address}}</div>
+        <psbx-ds-text-filter  *psDataGridCellFilter [dataSource]="merchantDataSource" path="address"></psbx-ds-text-filter>
+        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
     </ng-container>
     <ng-container psDataGridCol="commands">
         <ng-container *psDataGridColHeader>Actions</ng-container>
@@ -54,6 +61,7 @@
 
 
 
+
 <ng-template #confirm>
     <div class="modal-body text-center">
       <p>Do you want to confirm?</p>

src/app/grid-filter&sorting-demo/grid-filter-demo/grid-filter-demo.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { IDataSource } from '@poweredsoft/data';
+import { IDataSource, ISimpleFilter } from '@poweredsoft/data';
 import { IMerchant } from 'src/app/data/services/IMerchant';
 import { MerchantService } from 'src/app/data/services/merchant.service';
 import { ConfirmModalService } from '@poweredsoft/ngx-bootstrap';
@@ -32,9 +32,5 @@ export class GridFilterDemoComponent implements OnInit {
     
   }
 
-  filterMerchants(event){
-    this.somefilter = event;
-    this.merchantDataSource.filters[0]=this.somefilter;    
-    this.merchantDataSource.refresh();
-  }
+  
 }