From b6ea2ff764d3dba6995bd28afcacd39c8b4d2439 Mon Sep 17 00:00:00 2001
From: MKirova <MKirova@DEV-MKIROVA>
Date: Thu, 17 Feb 2022 17:10:55 +0200
Subject: [PATCH] fix(igxPivotSelector): Show display name if one is set for
 values.

---
 .../lib/grids/pivot-grid/pivot-data-selector.component.html   | 4 ++--
 .../src/lib/grids/pivot-grid/pivot-data-selector.component.ts | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html
index 7634c23234d..7504a8c65c4 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html
@@ -38,7 +38,7 @@
                 [checked]="item.enabled"
                 (click)="toggleItem(item)"
             ></igx-checkbox>
-            <span>{{ item.member }}</span>
+            <span>{{ item.displayName || item.member }}</span>
         </igx-list-item>
     </igx-list>
 </div>
@@ -105,7 +105,7 @@ <h6 class="igx-pivot-data-selector__header-title">
                                     item.aggregate.key
                                 }}</span>
                                 <span *ngIf="panel.type === null">(</span>
-                                <span>{{ item[panel.itemKey] }}</span>
+                                <span>{{ item[panel.displayKey] || item[panel.itemKey] }}</span>
                                 <span *ngIf="panel.type === null">)</span>
                             </div>
                             <igx-icon
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
index 311ef3d7d49..f78b38ce452 100644
--- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
+++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts
@@ -45,6 +45,7 @@ interface IDataSelectorPanel {
     dataKey: string;
     icon: string;
     itemKey: string;
+    displayKey?: string;
     sortable: boolean;
     dragChannels: string[];
 }
@@ -145,6 +146,7 @@ export class IgxPivotDataSelectorComponent {
             dataKey: "values",
             icon: "functions",
             itemKey: "member",
+            displayKey: 'displayName',
             sortable: false,
             dragChannels: ["Values"],
         },