How to add custom icon ( not in the values )

[Guillaume]

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 :  

• The + icon can be used for adding a new item in the list if not already exit
• The other icon can be use to present a herarchical selection view 

Thanks for your help

[Sureshkumar P]

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

Attachment: dropdown_e3c158dd.zip