Merge pull request #8764 from IgniteUI/mtsvyatkova/fix-8697-10.2.x

Inputs respect column formatter

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -108,7 +108,13 @@ <h6 class="igx-filter-empty__title">
                         {{ getConditionFriendlyName(expressionItem.expression.condition.name) }}
                     </span>
                     <span igxSuffix *ngIf="!expressionItem.expression.condition.isUnary">
-                        {{ isDate(expressionItem.expression.searchVal) ? (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale) : expressionItem.expression.searchVal }}
+                        {{
+                            isDate(expressionItem.expression.searchVal)
+                            ? getFormatter(expressionItem.expression.fieldName)
+                                ? (expressionItem.expression.searchVal | columnFormatter:getFormatter(expressionItem.expression.fieldName))
+                                : (expressionItem.expression.searchVal | date:getFormat(expressionItem.expression.fieldName):undefined:grid.locale)
+                            : expressionItem.expression.searchVal
+                        }}
                     </span>
                 </igx-chip>
                 <div class="igx-filter-tree__expression-actions"
@@ -191,7 +197,11 @@ <h6 class="igx-filter-empty__title">
                                     (click)="openDialog(dropDownTarget.element.nativeElement)"
                                     [placeholder]="grid.resourceStrings.igx_grid_filter_row_date_placeholder"
                                     autocomplete="off"
-                                    [value]="value | date:selectedColumn.pipeArgs.format:undefined:grid.locale"
+                                    [value]="
+                                        selectedColumn.formatter
+                                        ? (value | columnFormatter:selectedColumn.formatter)
+                                        : (value | date:selectedColumn.pipeArgs.format:undefined:grid.locale)
+                                    "
                                     [readonly]="true"
                                     [disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"/>
                         </igx-input-group>

projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -1038,6 +1038,13 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         this._overlayComponentId = overlayComponentId;
     }
 
+    /**
+     * @hidden @internal
+     */
+    public getFormatter(field: string) {
+        return this.grid.getColumnByName(field).formatter;
+    }
+
     /**
      * @hidden @internal
      */

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

@@ -65,7 +65,11 @@
                        (click)="expression.condition.isUnary ? noop() : openDialog(inputGroup.element.nativeElement)"
                        [placeholder]="placeholder"
                        autocomplete="off"
-                       [value]="value | date:column.pipeArgs.format:undefined:filteringService.grid.locale"
+                       [value]="
+                            column.formatter
+                            ? (value | columnFormatter:column.formatter)
+                            : (value | date:column.pipeArgs.format:undefined:filteringService.grid.locale)
+                        "
                        [readonly]="true"
                        (keydown)="onInputKeyDown($event)"/>
                 <igx-suffix *ngIf="value">

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -23,7 +23,11 @@
                     (click)="openDialog(dropDownTarget.element.nativeElement)"
                     [placeholder]="inputDatePlaceholder"
                     autocomplete="off"
-                    [value]="value | date:column.pipeArgs.format:undefined:grid.locale"
+                    [value]="
+                        column.formatter
+                        ? (value | columnFormatter:column.formatter)
+                        : (value | date:column.pipeArgs.format:undefined:grid.locale)
+                    "
                     [readonly]="true"
                     [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"/>
         </igx-input-group>

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -409,7 +409,12 @@ export class IgxFilteringService implements OnDestroy {
         if (expression.condition.isUnary) {
             return this.grid.resourceStrings[`igx_grid_filter_${expression.condition.name}`] || expression.condition.name;
         } else if (expression.searchVal instanceof Date) {
-            const pipeArgs = this.grid.getColumnByName(expression.fieldName).pipeArgs;
+            const column = this.grid.getColumnByName(expression.fieldName);
+            const formatter = column.formatter;
+            if (formatter) {
+                return formatter(expression.searchVal);
+            }
+            const pipeArgs = column.pipeArgs;
             return this.grid.datePipe.transform(expression.searchVal, pipeArgs.format, undefined, this.grid.locale);
         } else {
             return expression.searchVal;

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -4506,8 +4506,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             const inputText = column.formatter(filteredDate);
             const cellText = column.formatter(filteredDate);
             expect(cell.innerText).toMatch(cellText);
-            // TODO https://github.com/IgniteUI/igniteui-angular/issues/8697
-            // expect(datePickerInput.value).toMatch(inputText);
+            expect(datePickerInput.value).toMatch(inputText);
             expect(grid.filteredData.length).toEqual(1);
         }));