Clear icon for text field

Radzen.Blazor Components
1

To make easier for user i want to add icon in text field to clear. How can this be done or can you add as feature in the future?

2

You can leverage the browser <input type=search> like this:

<RadzenTextBox type="search" />

image
image1188×608 29.9 KB

3

I tested and this works on Chrome and Edge on Windows. This setting does not work on iOS (iphone safari). You can fix on iOS using this:

input[type="search"]::-webkit-search-cancel-button {

  /* Remove default */
  -webkit-appearance: none;

  /* Now your own custom styles */
   height: 14px;
   width: 14px;
   display: block;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC);
  /* setup all the background tweaks for our custom icon */
  background-repeat: no-repeat;

  /* icon size */
  background-size: 14px;

}

I think a native solution would be more reliable.

4

I wonder how to trigger an event on Clear Icon click?

5

It is the same: DropDownDataGrid Clear Function - #2 by enchev

6

Thanks for the Swift reply. It is <RadzenTextBox type="search" . I will be doing autocomplete search and data will be bind in RadzenGrid. On clear icon click of RadzenTextBox, I have to Reset a Griddata. For this to happen I have to trigger an event on clear icon click of RadzenTextBox

image
image690×353 19.8 KB

7

Does this trick still work in the latest version? Doesn't seem to even on the editable demo pages here:

8

Yes, it should work.
text-clear

9

Ah, thanks. I didn't realize it needs to have a value to show up

10

Hello,
Is it possible to achieve the clear icon btn on RadzenAutoComplete component too?

What i tried:

  • type="search"
  • Attributes="@(new Dictionary<string,object>(){ { "type", "search" }})"
  • InputAttributes="@(new Dictionary<string,object>(){ { "type", "search" }})"

Thanks!
I should have opened another topic?

11

Not sure what you are referring. You can check the code of the component to know details what, where is applied.

12

Use the InputType parameter:

<RadzenAutoComplete InputType="search" ... />
1 Like
13

Hi is it possible to add a custom event to the clear text button ? I would like to call a function onclick but i cannot find the element.

14

There isn't a specific event fired when this clear icon is clicked. You can try with the Change event - it should probably still fire.

15

It doesn't seem to be working right now. Am I right?