[Solved] ClearValue in a Numeric Textbox

[Han]

Hello,

 

I'm creating a Numeric Textbox that should be able to accept Empty.  How do I add a ClearValue button in a Numeric Textbox?

[Hetali]

Hi Han,

In order to add a clear button in the Kendo UI NumericTextBox, add an Icon Button as a Suffix Adornment. For example:

<kendo-numerictextbox [(value)]="value">
  <ng-template kendoSuffixTemplate>
    <button kendoButton 
      fillMode="clear" 
      [svgIcon]="svgClear" 
      title="Clear" 
      (click)="clear()"> 
    </button>
  </ng-template>
</kendo-numerictextbox>

public svgClear: SVGIcon = xIcon;
public value: number;

public clear() {
  this.value = null;
}

Output:

In this StackBlitz example, I have added an icon button in the NumericTextBox as a suffix adornment that clears the value.

I hope this helps. Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik