diff --git a/package-lock.json b/package-lock.json
index c5e468b..ed812a3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1676,9 +1676,9 @@
       }
     },
     "@poweredsoft/data": {
-      "version": "0.0.26",
-      "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.26.tgz",
-      "integrity": "sha512-JogKJQ01w4hTQr4EDSoYp2KfJzBbzC8trc7iHCxw7tjF6kB9nqWxu8gvRxX5pqzDK6ORz0Ieuw7i0hEZusW+ww==",
+      "version": "0.0.30",
+      "resolved": "https://registry.npmjs.org/@poweredsoft/data/-/data-0.0.30.tgz",
+      "integrity": "sha512-lKojW+yCKPSrdohqhuoEUTo196Z1cHs+SkOZ9N43N7MUcbIR0SA6Uz6k4QZtbmbXmR5AvDKPrDp37nqPXGZFYA==",
       "requires": {
         "tslib": "^1.9.0"
       }
@@ -1692,9 +1692,9 @@
       }
     },
     "@poweredsoft/ngx-data-apollo": {
-      "version": "0.0.8",
-      "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.8.tgz",
-      "integrity": "sha512-8nIlvHTnbLyG9aNxkSYOHIbNBBSjj92v0BeFTq4xkttp3UmYzhOO7lkgo1cEIDUuYo+ITAYoZbKwrd4CbnBgcA==",
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/@poweredsoft/ngx-data-apollo/-/ngx-data-apollo-0.0.10.tgz",
+      "integrity": "sha512-0HjJthjXstNXS/T9u6t9VTWtQO/LUzGsbT/m0tjj8y0YuivMzfK76EyQldvjGXDYGfIL12kEhsKEbiOPXyCXcA==",
       "requires": {
         "tslib": "^1.9.0"
       }
diff --git a/package.json b/package.json
index f1107d3..03cac8b 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,9 @@
     "@angular/platform-browser-dynamic": "~9.1.4",
     "@angular/router": "~9.1.4",
     "@ng-select/ng-select": "^4.0.1",
-    "@poweredsoft/data": "0.0.27",
+    "@poweredsoft/data": "0.0.30",
     "@poweredsoft/ngx-data": "0.0.13",
-    "@poweredsoft/ngx-data-apollo": "0.0.8",
+    "@poweredsoft/ngx-data-apollo": "0.0.10",
     "apollo-angular": "^1.8.0",
     "apollo-angular-link-http": "^1.9.0",
     "apollo-cache-inmemory": "^1.6.0",
diff --git a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
index a3502c2..971ed6b 100644
--- a/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
+++ b/projects/poweredsoft/ng-select/src/lib/ps-ng-select/ng-select/ng-select.component.ts
@@ -49,6 +49,18 @@ export class NgSelectComponent implements OnInit,OnDestroy {
     this.trackFn = this.trackBy.bind(this);
   
   }
+
+  ngOnInit(): void {
+    this.dataFetching();    
+    this.detectLoading();
+
+    if(this.serverFiltering){
+      this.searchOnServer();
+    }else{
+      this.refreshDataSource();
+    }
+  }
+
  
   valueChanged(event) {
     this.changeEvent.emit(event);
@@ -76,16 +88,6 @@ export class NgSelectComponent implements OnInit,OnDestroy {
     this._loadingSubscription.unsubscribe();
   }
 
-  ngOnInit(): void {
-    this.dataFetching();    
-    this.detectLoading();
-
-    if(this.serverFiltering){
-      this.searchOnServer();
-    }else{
-      this.refreshDataSource();
-    }
-  }
 
   dataFetching(){
     this.data$ = this.dataSource.data$.pipe(
diff --git a/projects/poweredsoft/ngx-bootstrap/package.json b/projects/poweredsoft/ngx-bootstrap/package.json
index a3c3207..88b066b 100644
--- a/projects/poweredsoft/ngx-bootstrap/package.json
+++ b/projects/poweredsoft/ngx-bootstrap/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poweredsoft/ngx-bootstrap",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^9.1.9",
     "@angular/core": "^9.1.9",
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
index 9e7a508..0913396 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.html
@@ -1,5 +1,5 @@
 <ng-template #popTemplate>
-  <form (ngSubmit)="applyFilter(pop)" novalidate>
+  <form (ngSubmit)="applyFilter()" novalidate>
     <div class="container" >
       <div class="row">
         <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
@@ -7,7 +7,7 @@
         </select>    
     </div>
       <div class="row mt-1 mb-1">
-          <input *ngIf="filterType !='Range'" 
+          <input *ngIf="!isRangeFilter" 
                  type="text"
                  placeholder="Datepicker"
                  class="form-control"
@@ -15,7 +15,7 @@
       </div>
       
       <div class="row mt-1 mb-1">
-        <input *ngIf="filterType =='Range'" type="text"
+        <input *ngIf="isRangeFilter" type="text"
         placeholder="Daterangepicker"
         class="form-control"
         bsDaterangepicker [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">       
@@ -29,33 +29,7 @@
   </div>
   </form>
 
-  <!-- <div class="container" >
-    <div class="row">
-      <select class="custom-select" title="Choose one of the following..." >
-          <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
-      </select>    
-  </div>
-    <div class="row mt-1 mb-1">
-        <input *ngIf="filterType !='Range'" 
-               type="text"
-               placeholder="Datepicker"
-               class="form-control"
-               bsDatepicker [(ngModel)]="filterValue" > 
-    </div>
-    
-    <div class="row mt-1 mb-1">
-      <input *ngIf="filterType =='Range'" type="text"
-      placeholder="Daterangepicker"
-      class="form-control"
-      bsDaterangepicker [(ngModel)]="filterValue">       
-  </div>
   
-    <div class="row mt-2">
-      <button class="btn btn-primary mr-1" type="submit" (click)="applyFilter()">Filter</button>
-      <button type="button" class="btn btn-warning" *ngIf="!isFiltering" (click)="pop.hide()">Hide</button>
-      <button type="button" class="btn btn-dark" *ngIf="isFiltering" (click)="clearFilter()">Clear</button>
-    </div>
-</div> -->
 </ng-template>
 
 <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterPopUpOpened" [outsideClick]="true" #pop="bs-popover">
diff --git a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts
index 956f04a..bc096f6 100644
--- a/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts
+++ b/projects/poweredsoft/ngx-bootstrap/src/lib/data-source-filter/datetime-filter/data-source-datetime-filter.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter } from '@poweredsoft/data';
-import { PopoverDirective } from 'ngx-bootstrap/popover';
+import { IDataSource, ISimpleFilter, ICompositeFilter, IFilter,FilterType } from '@poweredsoft/data';
+
+
 
 @Component({
   selector: 'psbx-ds-datetime-filter',
@@ -23,7 +24,7 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     {key:'Less Than', value: 'LessThan'},    
     {key:'Greater Than Equal', value: 'GreaterThanOrEqual'},
     {key:'Less Than Equal', value: 'LessThanOrEqual'},    
-    {key:'Range', value: 'Range' }
+    {key:'Range', value: FilterType.COMPOSITE }
   ];
 
 
@@ -35,6 +36,11 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     this.maxDate.setDate(this.maxDate.getDate() + 7);
     this.bsInlineRangeValue = [this.bsInlineValue, this.maxDate];
   }
+
+  get isRangeFilter() {
+    return this.filterType == FilterType.COMPOSITE;
+  }
+
   ngOnInit(): void {
     if (!this.filterType)
       this.filterType = 'Equal';
@@ -43,17 +49,27 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     return "Filter by "+ this.path;
   }
   clearFilter() {
+    
     this.filterValue = null;
     this.isFiltering = false;
-    const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
+    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)
       })
     }
+    
+    if (this.isRangeFilter){
+     
+      let existingFilter2 = this.dataSource.filters.find(t=> t.type == 'Composite');
+      this.dataSource.query({
+        page: 1,
+        filters: this.dataSource.filters.filter(t => t != existingFilter2)
+      })
+    }
   }
-  applyFilter(pop: PopoverDirective = null){
+  applyFilter(){
 
     this.isFiltering = true;
     const filters = this.dataSource.filters;
@@ -61,17 +77,18 @@ export class DataSourceDatetimeFilterComponent implements OnInit {
     let freshFilter: ISimpleFilter = null;
     let startDate:Date;
     let endDate:Date;
-debugger;
-    if(Array.isArray(this.filterValue)){
+
+    // TODO create filter here.
+    if(Array.isArray(this.filterValue)){ //check if it's a dateRange value 
       startDate = this.filterValue[0];
       endDate = this.filterValue[1];
       compositeF = {
-        type: 'Composite',
+        type: FilterType.COMPOSITE,
         filters: [
           {
             path: this.path,
             type: 'GREATERTHANOREQUAL',
-            value: startDate, // check if this string works
+            value: startDate, 
           },
           {
             and: true,
@@ -89,19 +106,15 @@ debugger;
         path: this.path,
         value: this.filterValue
       }
-
-      if (pop) 
-      pop.hide();
     }
 
     // TODO???
     // set this for gql better handling of variant.
     //(freshFilter as IGraphQLFilter).__gqlVariantType = 'DATETIME';
 
-    // TODO create filter here.
     
     const existingFilterIndex = filters.findIndex(t => {
-        if (t.type == 'Composite') {
+        if (t.type == 'COMPOSITE') {
           const compositeFilter = t as ICompositeFilter;
           return compositeFilter.filters && compositeFilter.filters.length 
             && compositeFilter[0].path == this.path;
diff --git a/projects/poweredsoft/ngx-cdk-ui/package.json b/projects/poweredsoft/ngx-cdk-ui/package.json
index f048475..b6e56ab 100644
--- a/projects/poweredsoft/ngx-cdk-ui/package.json
+++ b/projects/poweredsoft/ngx-cdk-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@poweredsoft/ngx-cdk-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "peerDependencies": {
     "@angular/common": "^9.1.9",
     "@angular/core": "^9.1.9"
diff --git a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
index cd52241..fe3c3d3 100644
--- a/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
+++ b/src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.ts
@@ -15,12 +15,14 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
   columns = ['id','name', 'address', 'commands']
   merchantDataSource: IDataSource<IMerchant>;  
   private _dataSubscription: Subscription;
+  private _loading: Subscription;
   constructor(private  merchantService: MerchantService){
     this.merchantDataSource = this.createDataSource();
 
   }
   ngOnDestroy(): void {
     this._dataSubscription.unsubscribe();
+    this._loading.unsubscribe();
   }
 
   
@@ -46,7 +48,7 @@ export class DataGridDemoHomeComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.merchantDataSource.loading$.subscribe(isLoading => {
+    this._loading = this.merchantDataSource.loading$.subscribe(isLoading => {
       console.log('merchant data source event loading', isLoading);
     });