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

Icon with ejs-textbox

Hi, 

I am new to Syncfusion and have 2 questions:

1. According to the documentation, I see that using Syncfusion TextBox for ASP.NET core can be performed in at least 2 ways. First is to use <ejs-textbox> tag helper, and second one is to use regular html tags with proper classes. Is there preferable way to use the control since as I can see that for same effect to be achieved <ejs-textbox> encapsulates some styles and scripts (for example ripple effect) while if using html tags this script must be included too?

2. Can I use icons (font awsome or other) with Syncfusion TextBox more easily then in the documentation example, where icons are added through custom style and script without using <ejs-textbox> tag helper? I don't see that <ejs-textbox> has it implemented.

1 Reply

SP Sureshkumar P Syncfusion Team February 7, 2020 10:49 AM UTC

Hi Miloš, 
 
Greetings from Syncfusion support. 
 
Query 1: Which is preferable<ejs-textbox> tag helper, and second one is to use regular html tags with proper classes. 
 
You can prefer the <ejs-textbox> tag helper. The reason is in case if you need floating label, need to add required attribute in the html tags and the manual processing has to be made. So, in order to avoid this complexity, you can prefer the tag helper <ejs-textbox>. 
 
Query 2: Can I use icons with Syncfusion TextBox more easily then in the documentation example. 
 
Yes, now you can add the icon for textbox using the public method addIcon. As like below code snippet. 
 
<div class="control-section"> 
    <div class="control_wrapper accordion-control-section"> 
        <ejs-textbox id="default" placeholder="Enter date" created="onCreateIcon"></ejs-textbox> 
    </div> 
</div> 
 
<script> 
    function onCreateIcon() { 
        var textboxObj = document.getElementById("default"); 
        textboxObj.ej2_instances[0].addIcon("append""e-date-icon"); 
    } 
</script> 
 
 
Please find the sample link below: 
 
 
Regards, 
Sureshkumar P 


Loader.
Up arrow icon