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

ITemtemplate

Thread ID:

Created:

Updated:

Platform:

Replies:

146891 Aug 23,2019 07:16 PM UTC May 22,2020 06:42 AM UTC Blazor 7
loading
Tags: MultiSelect Dropdown
NKOUAMBIA CHIMENE
Asked On August 23, 2019 07:16 PM UTC

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>

Gopi Govindasamy [Syncfusion]
Replied On August 26, 2019 12:05 PM UTC

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. 


NKOUAMBIA CHIMENE
Replied On May 15, 2020 04:08 PM UTC

Hello Team!

how to have this Layout 

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

Thanks
Chimène NK!


Sureshkumar P [Syncfusion]
Replied On May 19, 2020 12:01 PM UTC

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 


NKOUAMBIA CHIMENE
Replied On May 19, 2020 12:42 PM UTC

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.


Sureshkumar P [Syncfusion]
Replied On May 20, 2020 06:12 AM UTC

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 


NKOUAMBIA CHIMENE
Replied On May 21, 2020 01:16 PM UTC

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.

Sureshkumar P [Syncfusion]
Replied On May 22, 2020 06:42 AM UTC

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 


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