This closes #2548, closes #2585, closes 2586, closes 2587

primefaces · Apr 24, 2017 · 36f406d · 36f406d
1 parent 9a2d37c
commit 36f406d
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git 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,15 +301,23 @@ 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) {
                     label = label + ', ';
                 }
                 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
@@ -90,6 +90,12 @@ <h3>Attributes</h3>
                             <td>Choose</td>
                             <td>Label to display when there are no selections.</td>
                         </tr>
+                        <tr>
+                            <td>displaySelectedLabel</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Specifies the visibility of the selected labels in container.</td>
+                        </tr>
                         <tr>
                             <td>appendTo</td>
                             <td>any</td>
@@ -138,6 +144,18 @@ <h3>Attributes</h3>
                             <td>null</td>
                             <td>Identifier of the focus input to match a label defined for the component.</td>
                         </tr>
+                        <tr>
+                            <td>maxItems</td>
+                            <td>number</td>
+                            <td>3</td>
+                            <td>Decides how many items to show in container.</td>
+                        </tr>
+                        <tr>
+                            <td>selectedItemsLabel</td>
+                            <td>string</td>
+                            <td>&#123;0&#125; items selected</td>
+                            <td>After reaching maxItems, it decides label message to show in container.(It replaces &#123;0&#125; with the length of selected items using regexp)</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>