ITemtemplate

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>

Reply | Reply with quote

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.

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.

Reply | Reply with quote

NKOUAMBIA CHIMENE

Replied On May 15, 2020 04:08 PM UTC

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!

Reply | Reply with quote

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.

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

Reply | Reply with quote

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.

Reply | Reply with quote

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

Reply | Reply with quote

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

_host.cshtml

Thanks,

chimène Nk.

Reply | Reply with quote

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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
146891	Aug 23,2019 07:16 PM UTC	May 22,2020 06:42 AM UTC	Blazor	7

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US