We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

extending MultiSelect size and customize text depending on count

Thread ID:

Created:

Updated:

Platform:

Replies:

147768 Sep 23,2019 03:10 PM UTC Nov 25,2019 09:47 AM UTC Angular - EJ 2 3
loading
Tags: MultiSelectDropdown
Michael Hertlein
Asked On September 23, 2019 03:10 PM UTC

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 [Syncfusion]
Replied On September 24, 2019 09:09 AM UTC

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 .." 
            } 
 
        } 
    }); 
} 
 
 
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
Replied On November 23, 2019 02:58 PM UTC

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 [Syncfusion]
Replied On November 25, 2019 09:47 AM UTC

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. 



Regards, 
Sevvandhi N 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon