operator now has a illustration

src/app/grid-filter/number-range-filter/number-range-filter.component.html

@@ -4,12 +4,17 @@
                         [data]="availableOperators" textField="op" look="bare"
                         (itemClick)="onOperatorClick($event)">
     {{operator.op}}
+    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
+      <span>{{ dataItem.op }}</span>&nbsp;
+      <span>{{ dataItem.description }}</span>
+    </ng-template>
   </kendo-dropdownbutton>
     <kendo-textbox #single class="full" [ngClass]="{'with-padding': showOperatorChoice}"
                     [(ngModel)]="valueFrom" (valueChange)="onChangeFrom($event)"
                     [ngModelOptions]="{standalone: true}"
                     [showErrorIcon]="!valueFromValid"
                     [required]="required"
+                    format="{0:c}"
                     (inputFocus)="onFromTouched()"
     ></kendo-textbox>
   </div>
@@ -28,12 +33,17 @@
                             [data]="availableOperators" textField="op"
                             look="bare" (itemClick)="onOperatorClick($event)">
       {{operator.op}}
+      <ng-template kendoDropDownButtonItemTemplate let-dataItem>
+        <span>{{ dataItem.op }}</span>
+        <span>{{ dataItem.description }}</span>
+      </ng-template>
+
     </kendo-dropdownbutton>
     <kendo-textbox #rangeTo class="second-half"
                     [required]="required"
                     [showErrorIcon]="!valueToValid"
                     [(ngModel)]="valueTo"
-                   (inputFocus)="onToTouched()"
+                    (inputFocus)="onToTouched()"
                     [ngModelOptions]="{standalone: true}"
                     (valueChange)="onChangeTo($event)"></kendo-textbox>
   </div>

src/app/grid-filter/number-range-filter/number-range-filter.component.ts

@@ -7,7 +7,7 @@ import {TextBoxComponent} from '@progress/kendo-angular-inputs';
 
 
 
-class Operator { op: string; value: string; }
+class Operator { op: string; value: string; description: string; }
 
 @Component({
   selector: 'app-number-range-filter',
@@ -23,23 +23,23 @@ export class NumberRangeFilterComponent extends BaseFilterCellComponent implemen
   @Input() public max = -1;
   @Input() public required = false;
   @Input() public fieldName = '';
-  @Input() public options = ['=', '≠', '>', '≥', '<', '≤', '⇩'];
+  @Input() public options = ['eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'range'];
   // ngModel control
   @ViewChild('single') ctlSingle: TextBoxComponent;
   @ViewChild('rangeFrom') ctlRangeFrom: TextBoxComponent;
   @ViewChild('rangeTo') ctlRangeTo: TextBoxComponent;
 
-  public operator: Operator = {op: '=', value: 'eq'};
-  private defaultOperator: Operator = {op: '=', value: 'eq'};
+  public operator: Operator = {op: '=', value: 'eq', description: 'equal'};
+  private defaultOperator: Operator = {op: '=', value: 'eq', description: 'equal'};
   public availableOperators: Operator[] = [];
   private AllOperatorMap = [
-    {op: '=', value: 'eq'},
-    {op: '≠', value: 'neq'},
-    {op: '>', value: 'gt'},
-    {op: '≥', value: 'gte'},
-    {op: '<', value: 'lt'},
-    {op: '≤', value: 'lte'},
-    {op: '⇩', value: 'range'}
+    {op: '=', value: 'eq', description: 'equal to'},
+    {op: '≠', value: 'neq',  description: 'not equal to '},
+    {op: '>', value: 'gt',  description: 'greater than'},
+    {op: '≥', value: 'gte',  description: 'greater than or equal to'},
+    {op: '<', value: 'lt',  description: 'less than'},
+    {op: '≤', value: 'lte',  description: 'less than or equal to'},
+    {op: '⇩', value: 'range',  description: 'range'}
   ];
 
   public singleMode = true;
@@ -85,7 +85,10 @@ export class NumberRangeFilterComponent extends BaseFilterCellComponent implemen
   }
 
   private initAvailableOperators(): void {
-    this.availableOperators = this.AllOperatorMap.filter(  v => this.options.indexOf(v.value) !== -1 );
+    this.availableOperators = this.AllOperatorMap.filter(  v => {
+      console.log(v, this.options.indexOf(v.value), this.options);
+      return this.options.indexOf(v.value) !== -1;
+    } );
     if ( this.availableOperators.length === 0) {
       this.availableOperators = [this.defaultOperator];
       this.operator = this.defaultOperator;

src/app/pay-in/pay-in.component.html

@@ -56,8 +56,7 @@
   <kendo-grid-column field="Id" title="Id" width="100" editable="false">
     <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
         <app-number-range-filter [filter]="filter" [fieldName]="'Id'"
-                                 [options]="['eq', 'lt', 'gte',  'range' ]" [min]=1 [max]="20"
-                                 [required]="true"
+                                 [min]=1
         >
         </app-number-range-filter>
     </ng-template>