How can I handle the event when an icon added by AddIcon is clicked in SfTextBox?

[Seil]

Hello.

I want to do a specific action when clicking an icon added to the SfTextBox.

I know how to register a click event on SfTextrBox itself.

How do I get a specific event to fire when clicking on an icon area added via AddIcon?

Thank you.

[Ponmani Murugaiyan]

Hi Seil,  

Greetings from Syncfusion support.  

We have validated the requested requirement and considering “Provide support for event handling on added icon using addIcon method” as a feature in our end. This support will be included in any one of our upcoming releases.    

    

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link.   

    

Feedback Link: https://www.syncfusion.com/feedback/14748/ 

Regards, 

Ponmani M

[Mike]

would be a nice feature to add.   the workaround i use now is JS to move a clickable icon now (embedded in a span) into the target textbox control ... but the JS rendering is visible to the user in the browser so it appears clunky (the icon jumps around)

[Sureshkumar P]

 

 

Code example: 

<SfTextBox @ref="@TouchIcon" Created="@onCreateTouchIcon"></SfTextBox> 

@code { 

    SfTextBox TouchIcon; 

    public async Task onCreateTouchIcon() 

    { 

        var eventdoubleClick = EventCallback.Factory.Create<MouseEventArgs>(this, iconDoubleClick); 

        var touchHover = EventCallback.Factory.Create<MouseEventArgs>(this, touchIconMouseHover); 

        var touchLeave = EventCallback.Factory.Create<MouseEventArgs>(this, touchIconLeave); 

        var touchMouseDown = EventCallback.Factory.Create<MouseEventArgs>(this, touchIconMouseDown); 

        var touchMouseUp = EventCallback.Factory.Create<MouseEventArgs>(this, touchIconMouseUp); 

        // Event creation with event handler  

        var touchStart = EventCallback.Factory.Create<TouchEventArgs>(this, touchIconStart); 

        await TouchIcon.AddIcon("prepend", "e-icon-pan", new Dictionary<string, object>() { { "ontouchstart", touchStart } }); 

        await TouchIcon.AddIcon("append", "e-date-icon", new Dictionary<string, object>() { { "ondblclick", eventdoubleClick } }); 

        await TouchIcon.AddIcon("append", "e-search-icon", new Dictionary<string, object>() { { "onmouseup", touchMouseUp } }); 

        await TouchIcon.AddIcon("prepend", "e-search-icon", new Dictionary<string, object>() { { "onmouseover", touchHover }, { "onmouseleave", touchLeave }, { "onmousedown", touchMouseDown } }); 

    } 

    public void touchIconMouseUp() 

    { 

        this.value += "Icon mouse up Event triggered \n"; 

    } 

    public void touchIconStart() 

    { 

        this.value += "Icon touch start Event triggered \n"; 

    } 

    public void iconDoubleClick() 

    { 

        this.value += "Icon double Click Event triggered \n"; 

    } 

    public void touchIconMouseHover() 

    { 

        this.value += "Icon mouse hover Event triggered \n"; 

    } 

    public void touchIconLeave() 

    { 

        this.value += "Icon mouse leave Event triggered \n"; 

    } 

    public void touchIconMouseDown() 

    { 

        this.value += "Icon mouse down Event triggered \n"; 

    } 

} 

<style> 

    .e-search-icon::before { 

        content: '\e724'; 

        font-family: e-icons; 

    } 

    .e-icon-pan::before { 

        content: '\e711'; 

        font-family: e-icons; 

    } 

    td{ 

        padding-left: 50px; 

    } 

</style> 

 

 

 

Please let us know if you need any further assistance on this.  

Feedback: https://www.syncfusion.com/feedback/14748/  

 

Regards, 

Sureshkumar p