Show SpinButton only when focused

[Arthur Butler]

Hi.  Is it possible to only show the SpinButton on the Numeric Textbox when the Numeric Textbox has the focus?

Thanks,

Arthur

[Ponmani Murugaiyan]

Hello Arthur, 

Greetings from Syncfusion support. 

Based on your requirement, we have prepared the stackblitz sample using the showSpinButton property. Please find the code snippet and sample below for reference. 

[app.component.html] 

<ejs-numerictextbox #default value="10" (focus)=focusHandler($event) (blur)=blurHandler($event) [showSpinButton]="false" ></ejs-numerictextbox> 

[app.component.ts] 

 

 

export class AppComponent { 

    @ViewChild('default') 

      public numericObj: NumericTextBoxComponent; 

      public focusHandler(args: any) :void { 

        this.numericObj.showSpinButton = true; 

        this.numericObj.dataBind(); 

      } 

      public blurHandler(args: any) :void { 

         this.numericObj.showSpinButton = false; 

         this.numericObj.dataBind(); 

      } 

  } 

Sample: https://stackblitz.com/edit/angular-fcttpb-wkunjl?file=app.component.ts 

 

API Reference: https://ej2.syncfusion.com/documentation/api/numerictextbox/#showspinbutton 

 

Regards, 

Ponmani M 

[Arthur Butler]

Thank you for the response.  However, when I convert this to Blazor code, it does not work.

Regards,

Arthur

[Ponmani Murugaiyan]

Hello Arthur, 

 

As per your requirement, we have prepared sample in Blazor. Pleas find the code snippet below for reference.  

 

[Index.razor] 

 

<SfNumericTextBox TValue="int?" Value=10 ShowSpinButton="@numericValue"> 

    <NumericTextBoxEvents TValue="int?" Focus="FocusHandler" Blur="BlurHandler"></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

@code{ 

 

    public bool numericValue { get; set; } = false; 

 

    public void FocusHandler(Syncfusion.Blazor.Inputs.NumericFocusEventArgs args) 

    { 

        this.numericValue = true; 

    } 

    public void BlurHandler(Syncfusion.Blazor.Inputs.NumericBlurEventArgs args) 

    { 

        this.numericValue = false; 

    } 

} 

 

Kindly check with the above provided code. If you need further assistances, please get back us. 

 

Regards, 

Ponmani M 

[Arthur Butler]

I have done as you have suggested in a Blazor Web Assembly app - see attachment.  For the attached example, I have implemented this for the Monday control.  Click in that field to show the SpinButton.  Click in Tuesday should hide the SpinButton.  However, what happens is that SpinButtons just keep get added to the Monday control and the SpinButtons are never hidden.

Attachment: SfNumericTextBox_Simple_b62aaf06.zip

[Ponmani Murugaiyan]

Hi Arthur, 

  

We confirmed the reported issue "Dynamically changing spinButton throws console error and spin button added multiple times" as a bug in our end and the fix will be available in our upcoming Volume 1 SP 1 release which is expected to be rolled out at mid of May 2020 . You can track the status of the bug in the below feedback link.   

  

Feedback link: https://www.syncfusion.com/feedback/13931 

  

Regards, 

Ponmani M 

[Arthur Butler]

Thank you.  This works well now.

[Ponmani Murugaiyan]

Hi Arthur,  

Thanks for your update.  

We have glad to hear that the issue has been resolved to achieving your requirement.  

Please get back to us if you need further assistance.  

Regards,  

Ponmani M