demo commit

package.json

@@ -24,7 +24,7 @@
     "@angular/platform-browser-dynamic": "~9.1.4",
     "@angular/router": "~9.1.4",
     "@ng-select/ng-select": "^4.0.1",
-    "@poweredsoft/data": "0.0.26",
+    "@poweredsoft/data": "0.0.27",
     "@poweredsoft/ngx-data": "0.0.13",
     "@poweredsoft/ngx-data-apollo": "0.0.8",
     "apollo-angular": "^1.8.0",

projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/ng-select/ng-select.component.html

@@ -23,5 +23,14 @@
                  index: index       
                  }"></ng-container>
             </ng-template>
+            </ng-container>
+
+        <ng-container *ngIf="hasNotFoundTemplate">
+            <ng-template ng-notfound-tmp let-searchTerm="searchTerm">
+                <ng-container [ngTemplateOutlet]="selectNotFoundTemplate"
+                [ngTemplateOutletContext]="{
+                $implicit: searchTerm                    
+                }"></ng-container>
+            </ng-template>
         </ng-container>
 </ng-select>

projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/ng-select/ng-select.component.ts

@@ -6,6 +6,7 @@ import { map, distinctUntilChanged, debounceTime } from 'rxjs/operators';
 import { NgSelectComponent as SelectComponent } from '@ng-select/ng-select';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SelectOptionTemplateDirective } from '../select-option-template.directive';
+import { NotFoundTemplateDirective } from '../not-found-template.directive';
 
 
 @Component({
@@ -22,6 +23,8 @@ export class NgSelectComponent implements OnInit {
 
   @ContentChild(SelectOptionTemplateDirective) optionTemplate: SelectOptionTemplateDirective;
   @ContentChild(SelectLabelTemplateDirective) labelTemplate: SelectLabelTemplateDirective;
+  @ContentChild(NotFoundTemplateDirective) notFoundTemplate: NotFoundTemplateDirective;
+
 
   
   @ViewChild(SelectComponent, { static: true }) selectComponent: SelectComponent;
@@ -154,4 +157,14 @@ export class NgSelectComponent implements OnInit {
       return this.labelTemplate.template;
     return null;
   }
+
+  get hasNotFoundTemplate() {
+    return this.notFoundTemplate ? true : false;
+  }
+
+  get selectNotFoundTemplate(){
+    if(this.notFoundTemplate)
+      return this.notFoundTemplate.template;
+    return null;
+  }
 }

projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/not-found-template.directive.ts

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

projects/poweredsoft/ng-select/src/lib/ps-ng-selectors/ps-ng-selectors.module.ts

@@ -6,11 +6,12 @@ import { FormsModule } from '@angular/forms';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { SelectLabelTemplateDirective } from './select-label-template.directive';
 import { SelectOptionTemplateDirective } from './select-option-template.directive';
+import { NotFoundTemplateDirective } from './not-found-template.directive';
 
 
 
 @NgModule({
-  declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective],
+  declarations: [NgSelectComponent, MultiSelectComponent, SelectLabelTemplateDirective, SelectOptionTemplateDirective, NotFoundTemplateDirective],
   imports: [
     CommonModule,
     FormsModule,
@@ -20,7 +21,8 @@ import { SelectOptionTemplateDirective } from './select-option-template.directiv
     NgSelectComponent,
     MultiSelectComponent,
     SelectLabelTemplateDirective,
-    SelectOptionTemplateDirective
+    SelectOptionTemplateDirective,
+    NotFoundTemplateDirective
   ]
 })
-export class PsNgSelectorsModule { }
+export class PsNgSelectorsModule { }//NGSELECT

projects/poweredsoft/ng-select/src/public-api.ts

@@ -6,7 +6,8 @@ export * from './lib/ps-ng-selectors/ps-ng-selectors.module';
 export * from './lib/ps-ng-selectors/ng-select/ng-select.component';
 export * from './lib/ps-ng-selectors/multi-select/multi-select.component';
 export * from './lib/ps-ng-selectors/select-label-template.directive';
-export * from './lib/ps-ng-selectors/select-option-template.directive'
+export * from './lib/ps-ng-selectors/select-option-template.directive';
+export * from './lib/ps-ng-selectors/not-found-template.directive';
 
 
 

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

@@ -24,4 +24,4 @@ import { TooltipModule } from 'ngx-bootstrap/tooltip';
   ],
   exports: [TextFilterComponent, NumberFilterComponent,DatetimeFilterComponent]
 })
-export class GridFilterModule { }
+export class GridFilterModule { } //DS Filter

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

@@ -0,0 +1,64 @@
+<ng-template #popTemplate>
+    <form (ngSubmit)="applyFilter()">
+        <div class="container" >
+            <div class="row">
+                <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
+                    <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+                </select>    
+            </div>
+           
+            <div class="row mt-1 mb-1">
+                <input type="number" class="form-control" placeholder="column value" aria-label="number"
+            aria-describedby="basic-addon1" [(ngModel)]="filterValue" [ngModelOptions]="{standalone: true}">
+            </div>
+            
+            <button class="btn btn-primary mr-1">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>
+    </form>
+</ng-template>
+
+<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned"  [outsideClick]="true" #pop="bs-popover">
+    <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" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
+<g>
+	<g>
+		<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.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.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
+	</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>

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

@@ -3,7 +3,7 @@ import { IDataSource,IFilter } from '@poweredsoft/data';
 import { ISimpleFilter } from '../../models/IFilter';
 
 @Component({
-  selector: 'psbx-number-filter',
+  selector: 'psbx-ds-number-filter',
   templateUrl: './number-filter.component.html',
   styleUrls: ['./number-filter.component.scss']
 })
@@ -32,6 +32,7 @@ export class NumberFilterComponent implements OnInit {
   }
 
   clearFilter() {
+    this.filterValue = 0;
     this.isFiltering = false;
     const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
     if (existingFilter) {

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

@@ -1,21 +1,25 @@
 <ng-template #popTemplate>
-    <div class="container" >
+
-        <div class="row">
+    <form (ngSubmit)="applyFilter(pop)">
-            <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
+        
-                <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+        <div class="container" >
-            </select>    
+            <div class="row">
+                <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType" [ngModelOptions]="{standalone: true}">
+                    <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
+                </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" [ngModelOptions]="{standalone: true}" >
+            </div>
+            
+            <button class="btn btn-primary mr-1" type="submit">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>
-       
+    </form>
-        <div class="row mt-1 mb-1">
-            <input type="number" class="form-control" placeholder="column value" aria-label="number"
-        aria-describedby="basic-addon1" [(ngModel)]="filterValue">
-        </div>
-        
-        <button class="btn btn-primary mr-1" (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>
 </ng-template>
 
 <button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned"  [outsideClick]="true" #pop="bs-popover">

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

@@ -1,6 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { IDataSource} from '@poweredsoft/data';
 import { ISimpleFilter } from '../../models/IFilter';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
 
 
 @Component({
@@ -32,6 +33,7 @@ export class TextFilterComponent implements OnInit {
   }
 
   clearFilter() {
+    this.filterValue = '';
     this.isFiltering = false;
     const existingFilter = this.dataSource.filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
     if (existingFilter) {
@@ -42,7 +44,7 @@ export class TextFilterComponent implements OnInit {
     }
   }
 
-  applyFilter(){
+  applyFilter(pop: PopoverDirective = null){
     this.isFiltering = true;
     const filters = this.dataSource.filters;
     const existingFilter = filters.find(t => (t as ISimpleFilter).path == this.path) as ISimpleFilter;
@@ -62,6 +64,9 @@ export class TextFilterComponent implements OnInit {
       filters: filters,
       page: 1
     })
+
+    if (pop) 
+      pop.hide();
   }
 
   showTooltip(){

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

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

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

@@ -2,11 +2,11 @@ import { Component, OnInit, Input } from '@angular/core';
 import { IDataSource } from '@poweredsoft/data';
 
 @Component({
-  selector: 'psbx-grid-sorting',
+  selector: 'psbx-ds-sorting',
-  templateUrl: './grid-sorting.component.html',
+  templateUrl: './ds-sorting.component.html',
-  styleUrls: ['./grid-sorting.component.scss']
+  styleUrls: ['./ds-sorting.component.scss']
 })
-export class GridSortingComponent implements OnInit {
+export class DataSourceSortingComponent implements OnInit {
 
   @Input() dataSource : IDataSource<any>;
   @Input() path:string; 

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

@@ -1,62 +0,0 @@
-<ng-template #popTemplate>
-    <div class="container" >
-        <div class="row">
-            <select class="custom-select" title="Choose one of the following..." [(ngModel)]="filterType">
-                <option *ngFor="let filter of filterTypes" [value]="filter.value">{{filter.key}}</option>
-            </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">
-        </div>
-        
-        <button class="btn btn-primary mr-1" (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>
-</ng-template>
-
-<button [popover]="popTemplate" class="btn btn-default" [(isOpen)]="filterIsOpenned" [outsideClick]="true" #pop="bs-popover">
-    <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" fill-opacity="0.5" [tooltip]="showTooltip()" [tooltipEnable]="!filterIsOpenned" width="13px" height="13px" [ngStyle]="{'fill': isFiltering ? 'red': 'black', 'fill-opacity': isFiltering ? '1': '0.5'}">
-<g>
-	<g>
-		<path d="M460.804,0H17.071C7.645,0,0.004,7.641,0.004,17.067V102.4c-0.004,4.842,2.05,9.458,5.649,12.698l165.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.612l165.018-148.48c3.608-3.247,5.662-7.878,5.649-12.732V17.067C477.871,7.641,470.23,0,460.804,0z"/>
-	</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>

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

@@ -13,9 +13,9 @@ export * from './lib/confirm-modal/confirm-modal.service';
 export * from './lib/confirm-modal/confirm-modal.directive';
 export * from './lib/spinner/spinner.module';
 export * from './lib/spinner/spinner/spinner.component';
-export * from './lib/grid-filter/grid-filter.module';
+export * from './lib/dataSource-filter/grid-filter.module';
-export * from './lib/grid-filter/text-filter/text-filter.component';
+export * from './lib/dataSource-filter/text-filter/text-filter.component';
-export * from './lib/grid-filter/number-filter/number-filter.component';
+export * from './lib/dataSource-filter/number-filter/number-filter.component';
-export * from './lib/grid-filter/datetime-filter/datetime-filter.component';
+export * from './lib/dataSource-filter/datetime-filter/datetime-filter.component';
-export * from './lib/grid-sorting/grid-sorting.module';
+export * from './lib/dataSource-sorting/ds-sorting.module';
-export * from './lib/grid-sorting/grid-sorting/grid-sorting.component';
+export * from './lib/dataSource-sorting/ds-sorting/ds-sorting.component';

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

@@ -2,8 +2,8 @@
 
 <table [ngClass]="tableClasses" style="min-height: 300px;">
   <thead>
-    <tr>
+    <tr *ngFor="let header of gridHeaders" >
-      <th *ngFor="let header of gridHeaders" [attr.colspan]="columns.length">
+      <th [attr.colspan]="columns.length">
         <ng-container [ngTemplateOutlet]="header.template"></ng-container>
       </th>
     </tr>

src/app/command-modal-demo/command-modal-demo/command-modal-demo.component.html

@@ -4,8 +4,10 @@
 <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns"
     tableClasses="table table-sm table-dark table-striped table-bordered">
     <ng-container *psDataGridHeader>
-        <button class="btn-primary btn" psbxCommandModal commandTitle="Adding a new merchant" commandText="Add"
+        <button class="btn-primary btn" psbxCommandModal 
-            [dataSource]="merchantDataSource" command="addMerchant" [template]="theModal">Create a new record</button>
+        commandTitle="Adding a new merchant" commandText="Add"
+            [dataSource]="merchantDataSource" command="addMerchant" 
+            [template]="theModal">Create a new record</button>
 
     </ng-container>
     <ng-container psDataGridCol="id">
@@ -51,6 +53,8 @@
         <input type="text" required [disabled]="loading" name="name" [(ngModel)]="command.name"  placeholder="Enter a merchant name" class="form-control" >
         Address
         <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
+        Date
+        <input type="text" required [disabled]="loading" name="address" [(ngModel)]="command.address"  placeholder="Enter the merchant's address" class="form-control" >        
     </form>
     
 </ng-template>

src/app/data-grid-demo/data-grid-demo-home/data-grid-demo-home.component.html

@@ -2,15 +2,9 @@
     This is a demo for a grid.
 </h1>
 
-    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" tableClasses="table table-sm table-bordered" >
+    <ps-data-grid [dataSource]="merchantDataSource" [(columns)]="columns" 
+    tableClasses="table table-sm table-bordered" >
 
-        <!-- <ng-container *psDataGridHeader>
-            <h1>Hey! </h1>
-            <p>Welcome to my Grid!</p>
-            <label>New merchant name</label>
-            <input class="form-control" #newMerchantName/>
-            <button class="btn btn-primary btn-sm" (click)="newMerchant(newMerchantName.value)">Add</button>
-        </ng-container> -->
         <ng-container *psDataGridHeader>
             Some header
         </ng-container>

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

@@ -13,27 +13,14 @@
     <ng-container psDataGridCol="id">
         <ng-container *psDataGridColHeader>ID</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="id"></psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="id"></psbx-ds-sorting>
         <ng-container *psDataGridCell="let model">{{model.id}}</ng-container>      
-        <!--<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>  -->
-
-        <!-- <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource"></psbx-ds-text-filter>
-        <psdb-ds-date-filter *psDataGridCellFilter></psdb-ds-date-filter>
-        <psdb-ds-date-range-filter *psDataGridCellFilter></psdb-ds-date-range-filter>
-        <psbx-ds-number-filter *psDataGridCellFilter></psbx-ds-number-filter>
-        <psbx-ds-multi-select-filter [dataSource]="merchantDataSource" [selectDataSource]="selectDataSource" [valueField]="id">
-            <ng-container *psSelectOption="let option">{{ option.name }}</ng-container>
-        </psbx-ds-multi-select-filter> -->
     </ng-container>
 
     <ng-container psDataGridCol="name">
         <ng-container *psDataGridColHeader>Name</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="name"></psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="name"></psbx-ds-sorting>
         <ng-container *psDataGridCell="let model">{{model.name}}</ng-container>
     </ng-container>
 
@@ -42,15 +29,15 @@
         <ng-container *psDataGridCell="let model">{{model.address}}</ng-container>
         <psbx-ds-text-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="address">
         </psbx-ds-text-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="address"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="ordering">
         <ng-container *psDataGridColHeader>Priority</ng-container>
         <ng-container *psDataGridCell="let model">{{model.ordering}}</ng-container>
-        <psbx-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
+        <psbx-ds-number-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="ordering">
-        </psbx-number-filter>
+        </psbx-ds-number-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="ordering"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="openDate">
@@ -58,7 +45,7 @@
         <ng-container *psDataGridCell="let model">{{model.openDate}}</ng-container>
         <psbx-datetime-filter *psDataGridCellFilter [dataSource]="merchantDataSource" path="openDate">
         </psbx-datetime-filter>
-        <psbx-grid-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-grid-sorting>
+        <psbx-ds-sorting *psDataGridColSort [dataSource]="merchantDataSource" path="openDate"></psbx-ds-sorting>
     </ng-container>
 
     <ng-container psDataGridCol="commands">

src/app/ng-select-demo/ng-select-demo/ng-select-demo.component.html

@@ -11,21 +11,34 @@ selected: {{ myValue | json }}
 <form #form [formGroup]="myForm">
     <ps-ng-select [dataSource]="merchantDataSource2" bindLabel="name" bindValue="id" formControlName="merchantId" [serverFiltering]="true">
         <div *psNgSelectOption="let item">
-            {{ item.name }} - {{ item.address }}
+           <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
         </div>
     </ps-ng-select>
 </form>
-
 selected:  {{ myForm.value | json }}
 
 <h2>Single Select Demo | label Template</h2>
 <ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue3" [serverFiltering]="true">
+    <div *psNgSelectOption="let item">
+        <span>Merchant:</span>  {{ item.name }} - <span>Address: </span>{{ item.address }}
+     </div>
+    
     <div  *psNgSelectLabel="let item">
         <img src="assets/32x32-blue.png"><span>Name: </span>{{ item.name }} - <span> Address: </span>{{item.address }}
     </div>
 </ps-ng-select>
 selected: {{ myValue3 | json }} 
 
+<h2>Single Select Demo | notFound Template</h2>
+<ps-ng-select [dataSource]="merchantDataSource3" bindLabel="name" bindValue="id" [(ngModel)]="myValue2" [serverFiltering]="true">
+    <div  *psNgNotFoundTemplate="let searchTerm">
+        <div class="ng-option disabled">
+            No data found for "{{searchTerm}}" <button class="btn btn-success">Create New {{searchTerm}}</button>
+        </div>
+    </div>
+</ps-ng-select>
+selected: {{ myValue2 | json }} 
+
  <h2>Multi-Select Demo</h2>
 <ps-ng-multi-select [dataSource]="merchantDataSource4" bindLabel="name" bindValue="id"  [serverFiltering]="true" [(ngModel)]="myValue4" >
     <div   *psNgSelectOption="let item">