diff --git a/component-package/controls/dropdown-multiselect/dropdown-multiselect.component.html b/component-package/controls/dropdown-multiselect/dropdown-multiselect.component.html
index 703386d43..50b3b21ca 100644
--- a/component-package/controls/dropdown-multiselect/dropdown-multiselect.component.html
+++ b/component-package/controls/dropdown-multiselect/dropdown-multiselect.component.html
@@ -42,7 +42,7 @@
 <ng-template #readonlyTemplate>
   <div class="dropdown__multiselect-readonlylist">
     <ul>
-      <li *ngFor="let selectedItem of selectedItems">{{selectedItem | dropdownItemToSelectedText}}</li>
+      <li *ngFor="let selectedItem of selectedItems">{{selectedItem | dropdownItemToSelectedText:readonly}}</li>
     </ul>
   </div>
 </ng-template>
diff --git a/component-package/controls/dropdown/dropdown.component.html b/component-package/controls/dropdown/dropdown.component.html
index 59a548c14..00d55c11e 100644
--- a/component-package/controls/dropdown/dropdown.component.html
+++ b/component-package/controls/dropdown/dropdown.component.html
@@ -1,7 +1,7 @@
 <div class="validation">
   <div class="dropdown" [ngClass]="{'dropdown--open' : expanded, 'dropdown--filter-visible' : filterVisible, 'dropdown--scroll-visible' : scrollVisible}"
     (mousedown)="onDropdownMouseDown($event)" (focusout)="onLeave()" (focusin)="onEnter()" tabindex="{{disabled ? -1 : 0}}">
-    <span tabIndex="0" *ngIf="selectedItem" title="{{selectedItem.displayName}}">{{selectedItem | dropdownItemToSelectedText | truncate:14 }}</span>
+    <span tabIndex="0" *ngIf="selectedItem" title="{{selectedItem.displayName}}">{{selectedItem | dropdownItemToSelectedText:readonly | truncate:14 }}</span>
     <span tabIndex="0" *ngIf="!selectedItem" title="{{noItemSelectedLabel}}">{{noItemSelectedLabel | truncate:14 }}</span>
     <div class="dropdown__menu">
       <vgr-filter-textbox class="dropdown__filterTextbox" (valueChanged)="filterItems($event)"></vgr-filter-textbox>
@@ -26,4 +26,4 @@
     <div class="validation__status__icon"></div>
     <div class="validation__status__message">{{validationErrorMessage | truncate:50}}</div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/component-package/pipes/dropdownItemToSelectedTextPipe.ts b/component-package/pipes/dropdownItemToSelectedTextPipe.ts
index 7bf2d024a..65af5b359 100644
--- a/component-package/pipes/dropdownItemToSelectedTextPipe.ts
+++ b/component-package/pipes/dropdownItemToSelectedTextPipe.ts
@@ -6,8 +6,7 @@ import { IDropdownItem } from '../models/dropdownItem.model';
 })
 
 export class DropdownItemToSelectedTextPipe implements PipeTransform {
-    transform(item: IDropdownItem): string {
-
-        return item.displayNameWhenSelected ? item.displayNameWhenSelected : item.displayName ? item.displayName : '';
+    transform(item: IDropdownItem, isReadonly?: boolean): string {
+        return isReadonly ? item.displayName : item.displayNameWhenSelected ? item.displayNameWhenSelected : item.displayName ? item.displayName : '';
     }
-}
+}
\ No newline at end of file
diff --git a/tests/pipes/dropdownItemToSelectedTextPipe.spec.ts b/tests/pipes/dropdownItemToSelectedTextPipe.spec.ts
index 11e4e9049..3b2e238c5 100644
--- a/tests/pipes/dropdownItemToSelectedTextPipe.spec.ts
+++ b/tests/pipes/dropdownItemToSelectedTextPipe.spec.ts
@@ -3,6 +3,23 @@ import { IDropdownItem } from '../../component-package/models/dropdownItem.model
 
 describe('DropdownItemToSelectedTextPipe', () => {
     const dropdownPipe = new DropdownItemToSelectedTextPipe();
+    describe('When readonly is true', () => {
+        it('display name is returned', () => {
+            const result = dropdownPipe.transform(
+                { displayName: 'DisplayName', displayNameWhenSelected: 'DisplayNameWhenSelected' } as IDropdownItem
+                , true);
+            expect(result).toBe('DisplayName');
+        });
+    });
+    describe('When readonly is false', () => {
+        it('display name is returned', () => {
+            const result = dropdownPipe.transform(
+                { displayName: 'DisplayName', displayNameWhenSelected: 'DisplayNameWhenSelected' } as IDropdownItem
+                , false);
+
+            expect(result).toBe('DisplayNameWhenSelected');
+        });
+    });
     describe('When displayNameWhenSelected is undefined', () => {
         it('display name is returned', () => {
             const result = dropdownPipe.transform(