diff --git a/components/multiselect/multiselect.ts b/components/multiselect/multiselect.ts index 2f20efad838..8d88b58a991 100644 --- a/components/multiselect/multiselect.ts +++ b/components/multiselect/multiselect.ts @@ -93,6 +93,12 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterViewChecked,DoChec @Input() dataKey: string; + @Input() displaySelectedLabel: boolean = true; + + @Input() maxItems: number = 3; + + @Input() selectedItemsLabel: string = '{0} items selected'; + @ViewChild('container') containerViewChild: ElementRef; @ViewChild('panel') panelViewChild: ElementRef; @@ -295,7 +301,7 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterViewChecked,DoChec } updateLabel() { - if(this.value && this.value.length) { + if(this.value && this.value.length && this.displaySelectedLabel) { let label = ''; for(let i = 0; i < this.value.length; i++) { if(i != 0) { @@ -303,7 +309,15 @@ export class MultiSelect implements OnInit,AfterViewInit,AfterViewChecked,DoChec } label = label + this.findLabelByValue(this.value[i]); } - this.valuesAsString = label; + + if(this.value.length <= this.maxItems) { + this.valuesAsString = label; + } + else { + let pattern = /{(.*?)}/, + newSelectedItemsLabel = this.selectedItemsLabel.replace(this.selectedItemsLabel.match(pattern)[0], this.value.length + ''); + this.valuesAsString = newSelectedItemsLabel; + } } else { this.valuesAsString = this.defaultLabel; diff --git a/showcase/demo/multiselect/multiselectdemo.html b/showcase/demo/multiselect/multiselectdemo.html index 1e1cabd0b7d..0ceb7414f92 100644 --- a/showcase/demo/multiselect/multiselectdemo.html +++ b/showcase/demo/multiselect/multiselectdemo.html @@ -90,6 +90,12 @@

Attributes

Choose Label to display when there are no selections. + + displaySelectedLabel + boolean + true + Specifies the visibility of the selected labels in container. + appendTo any @@ -138,6 +144,18 @@

Attributes

null Identifier of the focus input to match a label defined for the component. + + maxItems + number + 3 + Decides how many items to show in container. + + + selectedItemsLabel + string + {0} items selected + After reaching maxItems, it decides label message to show in container.(It replaces {0} with the length of selected items using regexp) +