extending MultiSelect size and customize text depending on count

[Michael Hertlein]

Hello,

I would like to always show all selected values after leaving the MuliSelectDropdown? If the field is not large enough, it should be extended the same way as if the control has the focus. I would like to keep multiple lines.

I know that the component can be localized with e.g. overflowCountTemplate or totalCountTemplate.

Is it possible to set different translations for 1 or more selected items respectively 1 or more additionally (overflow) items?

In my case I'm selecting doctors. In german, the singular is "Arzt" and plural is "Ärzte". So I can't just set the last "e" in parentheses as I would normally do, because the first letter is also different.

Kind regards,

Michael

[Vinoth Kumar Sundara Moorthy]

Hi Michael, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: Create a sample to show all selected values after leaving the MuliSelectDropdown? If the field is not large enough, it should be extended the same way as if the control has the focus.  

 

We have prepared a sample based on your requirement and changed the display style of view wrapper and delimiter wrapper through blur and focus event of MultiSelect. Please refer to the below code snippet, 

 

Code Snippet 

public onBlur(args){ 

    (this.mulObj as any).viewWrapper.style.display = "none"; 

    (this.mulObj as any).delimiterWrapper.style.display = ""; 

} 

 

public onFocus(args){ 

    (this.mulObj as any).delimiterWrapper.style.display = "none"; 

} 

 

Now the selected values will be displayed as shown below, 

 

 

Query 2: Is it possible to set different translations for 1 or more selected items respectively 1 or more additionally (overflow) items? 

 

We have localized the given text (Ärzte) using overflowCountTemplate in German culture. Please refer the below code, 

 

Code Snippet 

ngOnInit(): void { 

    L10n.load({ 

        "de": { 

            'dropdowns': { 

                'overflowCountTemplate': "+ ${count} Ärzte .." 

            } 

 

        } 

    }); 

} 

 

Sample Link: https://stackblitz.com/edit/angular-b3stxk?file=app.component.ts 

 

Could you please check the above details and get back to us with more information if we misunderstood your requirement or you need any further assistance on this?  

 

Regards, 

Vinoth Kumar S 

[Michael Hertlein]

Sorry for my late answer,

The second query doesn't answer my question.

What I would need in German language is a different template for one item an another template for 2 or more items.

For one item it would be "1 Arzt". For 2 or more i need "5 Ärzte".

In this case it is not possible to just write something like "5 Arzt(e)", because the first character is not "A", but "Ä".

Thank you,

Michael

[Sevvandhi Nagulan]

Hi Michael, 

We have checked the reported requirement. There is no possibilities to achieve the localization based on the condition. So we have achieved your requirement in the change event. Please refer the below code, 

       public onChange(args, multiselectObj){ 

        setTimeout(function () { 

            if (multiselectObj.value.length === 2) { 

                if (multiselectObj.viewWrapper.querySelector('.e-remain')) 

                    multiselectObj.viewWrapper.querySelector('.e-remain').innerHTML = "+1 Arzt.." 

            } 

        }, 10) 

Note: We have triggered the change event while selecting the value for customizing the innerHTML text. For that we have disabled the changeOnBlur property. 

<ejs-multiselect #sample id='sample-list1' [dataSource]='sportsData' [mode]='mode' [fields]='fields' [locale]='locale' [placeholder]='waterMark' (change)="onChange($event,sample)" [changeOnBlur]='false'></ejs-multiselect> 

The property is available from the below mentioned version. 

Release Notes: https://ej2.syncfusion.com/angular/documentation/release-notes/17.3.17/#multiselect 

Sample Link: https://stackblitz.com/edit/angular-b3stxk?file=app.component.ts 

Regards, 

Sevvandhi N