SfTextbox with attached button

[Mark de Leeuw]

Hi SyncFusion,

I would like to create a SfTextBox (with a floating label) and attach one or more buttons to the end of the textbox that visually  look like the calender button at the end of the SfDateTimePicker control.

How would i be able to do that?

Greetings

Mark

[Ponmani Murugaiyan]

Hi Mark,

We can append the calendar icon in TextBox component using AddIcon method in the created event as mentioned below to mee your requiremnent.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Server-2123014792

<div id="container">

    <div class="content-wrapper">

        <div class="row">

            <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">

                <SfTextBox @ref="person" Width="250px" Placeholder="Enter a date" FloatLabelType="FloatLabelType.Auto" Created="@onPersonCreated"></SfTextBox>

            </div>

        </div>

        </div>

</div>

        @code{

            SfTextBox person;

 

            public void onPersonCreated()

            {

                this.person.AddIcon("append", "fa fa-calendar");

            }

        }

Regards,

Ponmani M

[Mark de Leeuw]

Hi Syncfusion, 

Thanks for the response. But this is an icon where i needed a button.

How can i detect it being clicked so i can add some action to it.

Greetings,

Mark

[Prince Oliver]

Hi Mark,

We can bind event handlers to the icons to detect it being clicked. Kindly refer to the following documentation link for further information.

https://blazor.syncfusion.com/documentation/textbox/groups#binding-events-to-icons

Regards,

Prince

[Mark de Leeuw]

Hi Syncfusion, 

Again thanx for the response. 

I am using latest version of blazor but i don't have a method AddIcon. Only AddIconAsync and that method does not accept three parameter to register event handlers.

Attachment: AccountingEditTextBox_50444d14.zip

[Vinitha Jeyakumar]

Hi Mark,

We have created a sample as per your requirement to use AddIcon method for binding events to the Textbox icons in latest version. please check the code below,

Code snippet:

@using Syncfusion.Blazor.Inputs

<label>Single Event</label>

<SfTextBox @ref="@TextBoxSearchObj" Created="@OnCreateSearch"></SfTextBox>

<label>Multiple Events</label>

<SfTextBox @ref="@TextBoxDateObj" Created="@OnCreateDate"></SfTextBox>

@code {

SfTextBox TextBoxSearchObj;

SfTextBox TextBoxDateObj;

public async Task OnCreateSearch()

{

// Event creation with event handler

var Click = EventCallback.Factory.Create<MouseEventArgs>(this, SearchClick);

await TextBoxSearchObj.AddIcon("append", "e-search-icon", new Dictionary<string, object>() { { "onclick", Click } });

}

public void SearchClick()

{

// Icon Click event triggered

}

public async Task OnCreateDate()

{

// Event creation with event handler

var MouseDown = EventCallback.Factory.Create<MouseEventArgs>(this, DateMouseDown);

var MouseUp = EventCallback.Factory.Create<MouseEventArgs>(this, DateMouseUp);

await TextBoxDateObj.AddIcon("prepend", "e-date-icon", new Dictionary<string, object>() { { "onmouseup", MouseUp }, { "onmousedown", MouseDown } });

}

public void DateMouseDown()

{

// Icon mouse down event triggered

}

public void DateMouseUp()

{

// Icon mouse up event triggered

}

}

<style>

.e-search-icon::before {

content: '\e724';

font-family: e-icons;

}

    .e-date-icon::before {

content: '\e901';

font-family: e-icons;

}

</style>

Please refer to the attached sample for further reference,

Regards,

Vinitha

Attachment: TextboxServer_8018baa9.zip

[Roy]

The developer does not always need an icon with the functionality of a button, many times a button is needed as well, since apart from having the click event, it can have a spinner and also a text, so it is very necessary for developers to have this functionality, as devexpress has for example. I show an example of how you could see it.

[Yohapuja Selvakumaran]

Hi Roy,

Thank you for reaching out to us.

 

To add a custom button inside the TextBox component and display a spinner with "Validating" text upon clicking, we have created a sample implementation. Please find the code snippet and sample link attached for your reference.

<div class="custom-textbox-container">    <SfTextBox CssClass="e-outline custom-textbox"               Placeholder="Outlined"               FloatLabelType="@FloatLabelType.Auto">    </SfTextBox>    <SfButton CssClass="validator-button" @onclick="ValidateInput">        @if (IsValidating)        {            <span class="spinner"></span>            <span>Validating</span>        }        else        {            <span>Validate</span>        }    </SfButton> </div> <style>    .custom-textbox-container {        position: relative;        display: inline-block;    }    .custom-textbox {        padding-right: 100px; /* Adjust based on button width */    }    .validator-button {        position: absolute;        right: 1px; /* Adjust right,top,bottom if needed */        top: 1px;        bottom: 1px;        height: 38px;        z-index: 1;    }    .spinner {        display: inline-block;        width: 20px;        height: 20px;        border: 2px solid #f3f3f3;        border-top: 2px solid #3498db;        border-radius: 50%;        animation: spin 1s linear infinite;        margin-right: 5px;    }    @@keyframes spin {        0% { transform: rotate(0deg); }        100% { transform: rotate(360deg); }    } </style> @code {    private bool IsValidating { get; set; } = false;    private async Task ValidateInput()    {        IsValidating = true;        await Task.Delay(2000); // Simulating validation process        IsValidating = false;        // Add your actual validation logic here    } }

This implementation does the following:

 

• We've wrapped the SfTextBox and a new SfButton in a container div for proper positioning.
• The SfButton is added as a validator button within the textbox.
• When the button is clicked, it triggers the ValidateInput method, which simulates a validation process.
• During validation, the button shows a spinner and "Validating" text.
• CSS is used to position the button within the textbox and style the spinner.

 

Sample: Syncfusion Blazor Playground: Write, Edit, Compile & Share Code for Blazor Components

 

 

Regards,

Yohapuja S