We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to add custom icon ( not in the values )

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

1 Reply

SP Sureshkumar P Syncfusion Team January 30, 2023 11:05 AM UTC

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

Loader.
Up arrow icon