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. Image for the cookie policy date

ITemtemplate

Hello!
I Want to Achieve a custom multiselect dropdown with (Image, LastName, FirstName, Speciality) in blazor as show bellow can I have an example because I haven't see anything online, 

 
This is my actual code (for now i just put an icon for testing but it will be image at the end)

Thanks !!
<EjsMultiSelect TValue="string[]" ModelType="@ressource" Placeholder="Select a Doctor" DataSource="@ressourceList">
<MultiSelectTemplates>
<ItemTemplate>
<span>
<span class='img'><img src="https://img.icons8.com/color/48/000000/user.png" height="20" width="20"/></span>
<span class='nom'>@((context as Ressource).Nom)</span>
<span class='prenom'>@((context as Ressource).Prenom)</span>
<span class='prenom'>@((context as Ressource).Role)</span>
</span>
</ItemTemplate>
</MultiSelectTemplates>
<MultiSelectFieldSettings Text="Nom" Value="IdRessource"></MultiSelectFieldSettings>
</EjsMultiSelect>

7 Replies

GG Gopi Govindasamy Syncfusion Team August 26, 2019 04:05 AM

Hi NKOUAMBIA,  

We are glad to know that you have achieved a multiselect template in your application. The shared code block displays the icon and content in a template format. We have documented the template support and published it online. Please refer to this link. 
  
  
We are working on including the template demo in our online sample browser. The sample will be published in the first week of September 2019.  

Regards, 
Gopi G. 



NC NKOUAMBIA CHIMENE May 15, 2020 08:08 AM

Hello Team!

how to have this Layout 

with my multiselect dropdown, what is the css class to apply? 
?

Thanks
Chimène NK!



SP Sureshkumar P Syncfusion Team May 19, 2020 04:01 AM

Hi NKOUAMBIA, 
 
Thanks for your update.  
 
Based on your shared information we suspect that you want to render the component with bootstrap UI. We suggest you change the theme file in your _Host.cshtml page.  
 
Kindly check the below code example.  
<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.1.53/styles/bootstrap4.css" rel="stylesheet" /> 
 
 
 
We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelectSelectAll977995394  
 
Could you please check the above sample and let us know whether this is fulfilling your requirement or get back to us if you need further assistance. 
 
Regards, 
Sureshkumar P 



NC NKOUAMBIA CHIMENE May 19, 2020 04:42 AM

Hello Team!

Even your giving example doesn't show the combobox layout as i ask, this is your example running

I want my combobox to look like this 

Thanks,
Chimène NK.



SP Sureshkumar P Syncfusion Team May 19, 2020 10:12 PM

Hi NKOUAMBIA, 
 
Thanks for your update.  
 
As per our previous update. You can change the bootstrap4 theme CDN link to _Host.cshtml page to achieve your requirement.  
 
We have modified the previously attached sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/MultiSelectSelectAll-2100713490  
 
Regards, 
Sureshkumar P 



NC NKOUAMBIA CHIMENE May 21, 2020 05:16 AM

Hello Team!

I have the problem if i use only bootstrap.css without the material.css all my font break even if the combobox look like i need, how can i preserve my website font and have my dropdownlist like i want ?

_host.cshtml
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/18.1.52/bootstrap4.css" rel="stylesheet" />
    <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/18.1.52/material.css" rel="stylesheet" />

_host.cshtml
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/18.1.52/bootstrap4.css" rel="stylesheet" />
    

Thanks,
chimène Nk.


SP Sureshkumar P Syncfusion Team May 21, 2020 10:42 PM

Hi NKOUAMBIA, 
 
Thanks for your update.  
 
Based on your shared screen shots with details, we suspect that you have different fonts in label text. We would like to say this our component bootstrap theme does not change the browser text font style. We suggest you check once again your application with label text font style changes.  
If still you have facing the issue, then please share your razor page with _host.cshtml page of your dropdownlist component application. That will help us to provide exact solution as earlier as possible.  
 
Regards, 
Sureshkumar P 


Loader.
Live Chat Icon For mobile
Up arrow icon