ITemtemplate

[NKOUAMBIA CHIMENE]

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]

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. 

  

https://ej2.syncfusion.com/blazor/documentation/multiselect/templates/#item-template  

  

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]

Hello Team!

how to have this Layout 

https://blazor.syncfusion.com/demos/multiselect-dropdown/checkbox?_ga=2.2185650.32918512.1589555237-305247882.1579031652

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

?

Thanks

Chimène NK!

[Sureshkumar P]

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]

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]

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]

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]

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