Hi,
I try to change the look of the Dropdown List Component but all the result i try are not working.
What i am trying is to add anothers icons button in dropdown list component ? like this exemple below :
Hi Guillaume,
You can achieve your requirement by using the JSIntrop. Find the code example below:
<h2>Dropdown List</h2> <SfDropDownList @ref=ddl ID="DDL" TItem="GameFields" CssClass="customIcon" TValue="string" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games"> <DropDownListEvents TItem="GameFields" TValue="string" Created="@oncreate"></DropDownListEvents> <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> </SfDropDownList>
@code { [Inject] protected IJSRuntime JsRuntime { get; set; }
SfDropDownList<string, GameFields> ddl; public class GameFields { public string ID { get; set; } public string Text { get; set; } }
private List<GameFields> Games = new List<GameFields>() { new GameFields(){ ID= "Game1", Text= "American Football" }, new GameFields(){ ID= "Game2", Text= "Badminton" }, new GameFields(){ ID= "Game3", Text= "Basketball" }, new GameFields(){ ID= "Game4", Text= "Cricket" }, new GameFields(){ ID= "Game5", Text= "Football" }, new GameFields(){ ID= "Game6", Text= "Golf" }, new GameFields(){ ID= "Game7", Text= "Hockey" }, new GameFields(){ ID= "Game8", Text= "Rugby"}, new GameFields(){ ID= "Game9", Text= "Snooker" }, new GameFields(){ ID= "Game10", Text= "Tennis"}, new GameFields(){ ID= "Game11", Text= "Ten"}, }; void oncreate() { JsRuntime.InvokeVoidAsync("onCreated", "DDL"); } }
<style> body { touch-action: none; }
span.e-search, span.e-e-user-defined { position: relative; align-items: center; justify-content: center; line-height: 2; min-width: 28px; height: 30px; text-align: center; border-radius: 4px 0 0 4px; font-size: 14px; margin-left: 0px; margin-top: 0px; }
.customIcon .e-icons.e-plus, .customIcon .e-user-defined { line-height: 2; }
.e-ddl.e-input-group.e-control-wrapper input.e-input { text-indent: 20px !important; }
span.e-plus:before { content: '\e823'; }
span.e-user-defined:before { content: '\e663'; } </style> |
[addicon.js]
window.onCreated = (id) => { var ddlobj = document.getElementById(id); // Create the span element for insert plus icon var span = document.createElement('span'); // Add the phone icon class to the span element span.setAttribute('class', 'e-icons e-plus'); span.setAttribute('id', 'customIcon'); // append the span element after the input wrapper ddlobj.parentElement .querySelector('.e-ddl-icon') .insertAdjacentElement('beforebegin', span); var span1 = document.createElement('span'); // Add the phone icon class to the span element span1.setAttribute('class', 'e-icons e-user-defined'); span1.setAttribute('id', 'customIcon1'); ddlobj.parentElement .querySelector('.e-plus') .insertAdjacentElement('beforebegin', span1);
document.getElementById("customIcon").addEventListener("click", function () { console.log("plus icons"); })
document.getElementById("customIcon1").addEventListener("click", function () { console.log("USer tree icon"); }) }
|
Find the screenshot here:
|
Find the sample in the attachment:
Regards,
Sureshkumar P