sorting & filtering 1st version done

projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.html

@@ -1 +1,57 @@
-<p>number-filter works!</p>
+<ng-template #popTemplate>
+    <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
+        <option *ngFor="let filter of filterTypes">{{filter}}</option>
+    </select>    
+
+    <input type="text" class="form-control" placeholder="column value" aria-label="Username"
+        aria-describedby="basic-addon1" [(ngModel)]="filterValue">
+    <button class="btn btn-primary" (click)="applyFilter()">Filter</button>
+</ng-template>
+
+
+<button [popover]="popTemplate" popoverTitle="Template ref content inside" [outsideClick]="true" >
+    <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+        y="0px" viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve"
+        width="13px" height="13px">
+        <g>
+            <g>
+                <path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c0.001,4.836,2.054,9.445,5.649,12.681l165.018,148.514V460.8
+			c-0.004,9.426,7.633,17.07,17.059,17.075c2.651,0.001,5.266-0.615,7.637-1.8l102.4-51.2c5.786-2.891,9.441-8.806,9.438-15.275
+			V263.595l165.018-148.48c3.604-3.243,5.658-7.866,5.649-12.715V17.067C477.871,7.641,470.23,0,460.804,0z M443.737,94.805
+			L278.72,243.285c-3.604,3.243-5.657,7.866-5.649,12.715v143.053l-68.267,34.133V256c-0.001-4.836-2.054-9.445-5.649-12.68
+			L34.137,94.805V34.133h409.6V94.805z" />
+            </g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+        <g>
+        </g>
+    </svg>
+
+</button>{{columnName}}

projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/number-filter/number-filter.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { IDataSource,IFilter } from '@poweredsoft/data';
+import { ISimpleFilter } from '../../models/IFilter';
 
 @Component({
   selector: 'psbx-number-filter',
@@ -6,10 +8,30 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./number-filter.component.scss']
 })
 export class NumberFilterComponent implements OnInit {
+  @Input() dataSource : IDataSource<any>;   
+  @Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
+  @Input() columnName:string;
+ 
+  filterType: string = 'Contains';
+  filterValue: string = null;
 
-  constructor() { }
+  get filterTypes(){
-
+    return ["contains","equals","startsWith","GreaterThan","LessThan"]
-  ngOnInit(): void {
   }
 
+  constructor() { }
+ 
+
+  ngOnInit(): void {
+    
+  }
+
+  applyFilter(){
+    this.onFilter.emit(<ISimpleFilter>{
+      path: this.columnName,
+      value: this.filterValue,
+      type: this.filterType,
+      and: true
+    });
+  }
 }

projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.html

@@ -1,15 +1,24 @@
 <ng-template #popTemplate>
-    <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
+    <div class="container" >
-        <option *ngFor="let filter of filterTypes">{{filter}}</option>
+        <div class="row">
-    </select>    
+            <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
-
+                <option *ngFor="let filter of filterTypes">{{filter}}</option>
-    <input type="text" class="form-control" placeholder="column value" aria-label="Username"
+            </select>    
+        </div>
+       
+        <div class="row mt-1 mb-1">
+            <input type="text" class="form-control" placeholder="column value" aria-label="Username"
         aria-describedby="basic-addon1" [(ngModel)]="filterValue">
-    <button class="btn btn-primary" (click)="applyFilter()">Filter</button>
+        </div>
+        
+        <button class="btn btn-primary mr-1" (click)="applyFilter()">Filter</button>
+        <button type="button" class="btn btn-warning" (click)="pop.hide()">
+            Hide
+          </button>
+    </div>
 </ng-template>
 
-
+<button [popover]="popTemplate"  [outsideClick]="true" #pop="bs-popover">
-<span [popover]="popTemplate" popoverTitle="Template ref content inside">
     <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
         y="0px" viewBox="0 0 477.875 477.875" style="enable-background:new 0 0 477.875 477.875;" xml:space="preserve"
         width="13px" height="13px">
@@ -54,4 +63,4 @@
         </g>
     </svg>
 
-</span>
+</button>

projects/poweredsoft/ngx-bootstrap/src/lib/grid-filter/text-filter/text-filter.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, OnDestroy, Output,EventEmitter } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
-import { IDataSource, IQueryExecutionResult, IQueryExecutionGroupResult } from '@poweredsoft/data';
+import { IDataSource} from '@poweredsoft/data';
-import { Subscription } from 'rxjs';
+import { ISimpleFilter } from '../../models/IFilter';
-import { IFilter, ISimpleFilter } from '../../models/IFilter';
 
 
 @Component({
@@ -12,18 +11,11 @@ import { IFilter, ISimpleFilter } from '../../models/IFilter';
 export class TextFilterComponent implements OnInit {
 
   @Input() dataSource : IDataSource<any>;   
-  @Output() onFilter: EventEmitter<IFilter> = new EventEmitter();
+  @Input() path:string;
-  title = 'Welcome word';
-  content = 'Vivamus sagittis lacus vel augue laoreet rutrum faucibus.';
- 
-  private _searchTerm: string;
  
   filterType: string = 'Contains';
   filterValue: string = null;
-
+  filterTypes = ['contains', 'equal', 'startsWith','endsWith'];
-  get filterTypes(){
-    return ["contains","equals","startsWith"]
-  }
 
   constructor() { }
  
@@ -32,12 +24,35 @@ export class TextFilterComponent implements OnInit {
     
   }
 
+  clearFilter() {
+    const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
+    if (existingFilter) {
+      this.dataSource.query({
+        page: 1,
+        filters: this.dataSource.filters.filter(t => t != existingFilter)
+      })
+    }
+  }
+
   applyFilter(){
-    this.onFilter.emit(<ISimpleFilter>{
+
-      path: "name",
+    const filters = this.dataSource.filters;
-      value: this.filterValue,
+    const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
-      type: this.filterType,
+    if (existingFilter) {
-      and: true
+      existingFilter.type = this.filterType;
-    });
+      existingFilter.value = this.filterValue;
+    } else {
+      filters.push(<ISimpleFilter>{
+        and: true,
+        type: this.filterType,
+        path: this.path, 
+        value: this.filterValue
+      })
+    }
+
+    this.dataSource.query({
+      filters: filters,
+      page: 1
+    })
   }
 }

projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { GridSortingComponent } from './grid-sorting/grid-sorting.component';
+
+
+
+@NgModule({
+  declarations: [GridSortingComponent],
+  imports: [
+    CommonModule
+  ],
+  exports:[GridSortingComponent]
+})
+export class GridSortingModule { }

projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.html

@@ -0,0 +1,4 @@
+<div>
+    <span class="caret dropdown-toggle" [class.not-sorting-state]="!isAscending" (click)="ascending()"></span>
+    <span class="caret dropdown-toggle sort-asc" [class.not-sorting-state]="!isDescending" style="transform: rotate(180deg)" (click)="descending()"></span>
+</div>

projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.scss

@@ -0,0 +1,16 @@
+:host span.dropdown-toggle.sort-asc{
+    transform: rotate(180deg);
+    display: inline-block;
+}
+
+:host span{
+    margin: 10px;
+}
+
+:host .not-sorting-state{
+    opacity: 0.3;
+}
+
+:host .not-sorting-state:hover{
+    opacity: 1;
+}

projects/poweredsoft/ngx-bootstrap/src/lib/grid-sorting/grid-sorting/grid-sorting.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { IDataSource } from '@poweredsoft/data';
+
+@Component({
+  selector: 'psbx-grid-sorting',
+  templateUrl: './grid-sorting.component.html',
+  styleUrls: ['./grid-sorting.component.scss']
+})
+export class GridSortingComponent implements OnInit {
+
+  @Input() dataSource : IDataSource<any>;
+  @Input() path:string;  
+  isAscending:boolean;
+  isDescending:boolean;
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ascending(){
+    this.isAscending = true;
+    console.log("ascending result...")
+    const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
+    if (existingSort){
+      existingSort.ascending = true;
+    }else{
+      this.dataSource.sorts.push({
+        path: this.path,
+        ascending:true        
+      })
+    }
+
+    this.dataSource.query({
+      sorts: this.dataSource.sorts,
+      page: 1
+    })
+    this.isDescending = false;
+  }
+
+  descending(){
+    this.isDescending = true;
+    console.log("descending result...")
+    const existingSort = this.dataSource.sorts.find(t => t.path == this.path);
+    if (existingSort){
+      existingSort.ascending = false;
+    }else{
+      this.dataSource.sorts.push({
+        path: this.path,
+        ascending:false        
+      })
+    }
+
+    this.dataSource.query({
+      sorts: this.dataSource.sorts,
+      page: 1
+    })
+    this.isAscending = false;
+  }
+
+}

projects/poweredsoft/ngx-bootstrap/src/public-api.ts

@@ -16,4 +16,6 @@ export * from './lib/spinner/spinner/spinner.component';
 export * from './lib/grid-filter/grid-filter.module';
 export * from './lib/grid-filter/text-filter/text-filter.component';
 export * from './lib/grid-filter/number-filter/number-filter.component';
-export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
+export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
+export * from './lib/grid-sorting/grid-sorting.module';
+export * from './lib/grid-sorting/grid-sorting/grid-sorting.component';

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid.module.ts

@@ -8,6 +8,7 @@ import { DataGridFooterDirective } from './directives/data-grid-footer.directive
 import { DataGridHeaderDirective } from './directives/data-grid-header.directive';
 import { DataGridLoaderDirective } from './directives/data-grid-loader.directive';
 import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from './directives/data-grid-col-sort.directive';
 
 
 
@@ -17,7 +18,7 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
   declarations: [
     DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
     DataGridCellDirective, DataGridFooterDirective, DataGridHeaderDirective, 
-    DataGridLoaderDirective, DataGridCellFilterDirective,
+    DataGridLoaderDirective, DataGridCellFilterDirective, DataGridColSortDirective,
     
   ],
   imports: [
@@ -26,6 +27,6 @@ import { DataGridCellFilterDirective } from './directives/data-grid-cell-filter.
   exports: [
     DataGridComponent,DataGridColDirective,DataGridColHeaderDirective,
     DataGridCellDirective,DataGridFooterDirective, DataGridHeaderDirective,
-    DataGridLoaderDirective,DataGridCellFilterDirective]
+    DataGridLoaderDirective,DataGridCellFilterDirective,DataGridColSortDirective]
 })
 export class DataGridModule { }

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.html

@@ -9,14 +9,27 @@
     </tr>
     <tr>
       <th *ngFor="let column of columns">
-        <ng-container *ngIf="hasHeaderTemplate(column)">
+        <div class="flex-container">
-          <ng-container
+          <div class="flex-item">
-            [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
+            <ng-container *ngIf="hasHeaderTemplate(column)" >
-          ></ng-container>
+              <ng-container
-          <ng-container *ngFor="let filter of filters" >
+                [ngTemplateOutlet]="getColumnHeaderTemplate(column)"
-            <ng-container [ngTemplateOutlet]="filter.template"></ng-container>
+              ></ng-container>
-          </ng-container>
+            </ng-container>
-        </ng-container>
+          </div>
+  
+          <div class="flex-item">
+            <ng-container *ngIf="hasFilterTemplate(column)">
+              <ng-container [ngTemplateOutlet]="getFilterTemplate(column)"></ng-container>
+            </ng-container>
+          </div>
+          
+          <div class="flex-item">
+            <ng-container *ngIf="hasSortingTemplate(column)">
+              <ng-container [ngTemplateOutlet]="getSortingTemplate(column)"></ng-container>
+            </ng-container>
+          </div>
+        </div>
       </th>
     </tr>
   </thead>

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.scss

@@ -0,0 +1,8 @@
+:host  .flex-container{
+    display: flex;
+    justify-content: flex-start;
+}
+
+:host .flex-item{
+    margin-right: 1px;
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/data-grid/data-grid.component.ts

@@ -6,6 +6,7 @@ import { DataGridFooterDirective } from '../directives/data-grid-footer.directiv
 import { DataGridLoaderDirective } from '../directives/data-grid-loader.directive';
 import { Subscription } from 'rxjs';
 import { DataGridCellFilterDirective } from '../directives/data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from '../directives/data-grid-col-sort.directive';
 
 @Component({
   selector: 'ps-data-grid',
@@ -21,7 +22,6 @@ export class DataGridComponent implements OnInit, OnDestroy {
   @ContentChildren(DataGridHeaderDirective) gridHeaders: QueryList<DataGridHeaderDirective>;
   @ContentChildren(DataGridFooterDirective) gridFooters: QueryList<DataGridFooterDirective>;
   @ContentChildren(DataGridLoaderDirective) loaders: QueryList<DataGridLoaderDirective>;
-  @ContentChildren(DataGridCellFilterDirective) filters: QueryList<DataGridCellFilterDirective>;
   
   @Input() dataSource: IDataSource<any>;
   @Input() tableClasses: any;
@@ -32,6 +32,8 @@ export class DataGridComponent implements OnInit, OnDestroy {
   private _dataSubscription: Subscription;
   private _loadingSubscription: Subscription;
 
+  _fiters:any
+
   @Input() set columns(value: string[]) {
     this._columns = value;
     this.columnsChange.emit(value);
@@ -75,8 +77,24 @@ export class DataGridComponent implements OnInit, OnDestroy {
     
   }
 
+  getSortingTemplate(columnName){
+    const ret = this.getColumn(columnName);
+    if (ret && ret.sortTemplate) 
+      return ret.sortTemplate.template;
+
+    return null;
+  }
+
+  getFilterTemplate(columnName){
+    const ret = this.getColumn(columnName);
+    if (ret && ret.filterTemplate) 
+      return ret.filterTemplate.template;
+
+    return null;
+  }
+
   getColumn(columnName: string) {
-    
+  
     if (!this.columnDefinitions)
       return null;
 
@@ -88,6 +106,7 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return ret;
   }
 
+
   getColumnHeaderTemplate(columnName: string) {
     const ret = this.getColumn(columnName);
     if (ret && ret.headerTemplate) 
@@ -112,5 +131,13 @@ export class DataGridComponent implements OnInit, OnDestroy {
     return this.getColumnCellTemplate(columnName) ? true :false;
   }
 
+  hasFilterTemplate(columnName: string) {
+    return this.getFilterTemplate(columnName) ? true :false;
+  }
+
+  hasSortingTemplate(columnName: string) {
+    return this.getSortingTemplate(columnName) ? true :false;
+  }
+
 
 }

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col-sort.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+  selector: '[psDataGridColSort]'
+})
+export class DataGridColSortDirective {
+
+  constructor(public template: TemplateRef<any>) { }
+
+}

projects/poweredsoft/ngx-cdk-ui/src/lib/data-grid/directives/data-grid-col.directive.ts

@@ -1,6 +1,9 @@
-import { Directive, Input, ContentChild } from '@angular/core';
+import { Directive, Input, ContentChild, ContentChildren } from '@angular/core';
 import { DataGridColHeaderDirective } from './data-grid-col-header.directive';
 import { DataGridCellDirective } from './data-grid-cell.directive';
+import { DataGridCellFilterDirective } from './data-grid-cell-filter.directive';
+import { DataGridColSortDirective } from './data-grid-col-sort.directive';
+
 
 @Directive({
   selector: '[psDataGridCol]'
@@ -10,6 +13,8 @@ export class DataGridColDirective {
   @Input('psDataGridCol') columnName:string;
   @ContentChild(DataGridColHeaderDirective) headerTemplate:DataGridColHeaderDirective;
   @ContentChild(DataGridCellDirective) cellTemplate:DataGridCellDirective;  
+  @ContentChild(DataGridCellFilterDirective) filterTemplate: DataGridCellFilterDirective;
+  @ContentChild(DataGridColSortDirective) sortTemplate: DataGridColSortDirective;
 
   constructor() { }
 

projects/poweredsoft/ngx-cdk-ui/src/public-api.ts

@@ -10,4 +10,5 @@ export * from './lib/data-grid/directives/data-grid-col-header.directive';
 export * from './lib/data-grid/directives/data-grid-header.directive';
 export * from './lib/data-grid/directives/data-grid-footer.directive';
 export * from './lib/data-grid/directives/data-grid-loader.directive';
-export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
+export * from './lib/data-grid/directives/data-grid-cell-filter.directive';
+export * from './lib/data-grid/directives/data-grid-col-sort.directive';

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();
-  }
 }