DropDownListFieldSettings IconCss with custom format

[Dušan]

Hello,

I'm trying to use SfDropDownList with list items displaying both text and an icon.

My objects have .Icon property on them, but the issue is that the icon contains only a name of the icon.

For the proper style to be applied, you need to add the style name in front of them (for instance, for "oi-list", the style needs to be "oi oi-list").

So far my attempts have been along the lines of:

<SfDropDownList ... Context="MyContext">

     <DropDownListFieldSettings Text="Name" Icon="oi @((MyContext as MyObjectType).Icon)"></DropDownListFieldSettings>

</SfDropDownList>

but no luck as of yet.

Any help would be appretiated, thank you all.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Dušan, 

Greetings from Syncfusion support. 

We have validated your query of displaying icons in the li items of the popup. We would like to inform you that icon for the li elements can be added using IconCss property. We have made sample for your convenience.

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdownlist1105857351

Screenshot: 

 

 

Kindly check the sample and integrate the provided solution with your application and get back to us if you need any further assistance on this. 

Regards, 

Jeyanth. 

[Dušan]

Thank you Jeyanth for your reply and the sample, however, this does not solve my problem completely.

I'm aware of the default method how to set icons via the IconCss tag, but my question is whether you can put some dynamic code into this IconCss tag.

Something like in my original post:

IconCss="oi @((MyContext as MyObjectType).Icon)"

Thank you for your help, D.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Dušan, 

Thanks for your brief elaboration.

We have validated the reported query. We would like to aware you that properties of DropownFieldSettings tag work based on the properties provided in the model class i.e., type of the datasource. Therefore, adding dynamic content to the IconCss property causes field mismatch with the model class will lead to the failure of adding the respective class to the list items. However, we can overcome this scenario using ItemTemplate where we can apply the dynamic content to the li items. Please find the sample below.

Code Snippet:


 

<SfDropDownList TValue="string" TItem="SocialMedia" Placeholder="Select a social media" DataSource="@IconData"> 

    <DropDownListFieldSettings Text="SocialMediaName"  Value="Id"></DropDownListFieldSettings> 

    <DropDownListTemplates TItem="SocialMedia"> 

        <ItemTemplate> 

            <div> 

                <span class="e-list-icon oi @(context.Class)"></span> 

                <span class="social-media">@context.SocialMediaName</span> 

            </div> 

        </ItemTemplate> 

    </DropDownListTemplates> 

</SfDropDownList> 

Screenshot:


 

 

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdownlist918775176 

Please let us know if you need any further assistance. 

Regards, 

Jeyanth. 

[Dušan]

Thank you, this is exactly what I needed.

Everything works as expected now.

Hope you have a nice day, D.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hello Dušan, 

We are glad to know that your issue has been resolved. Please let us know if you need any other assistance on this. 

Regards, 

Jeyanth.