How to disable mouse wheel?

[Alexsandro]

How to disable mouse wheel on SfNumericTextBox?

Sometimes I want to scroll the page with the mouse and without wanting to change the values of the control.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Alexsandro, 

Thanks for contacting Syncfusion support. 

We checked your query of disabling wheel event to prevent changing value while scrolling the mouse wheel. We can prevent this by binding mousewheel event to the input element in the client side which can be invoked in the Created event. Please find the sample in the below link.

Sample Link       : https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNumericTextbox-805593499 

[Server End] 

<SfNumericTextBox ID="numeric" TValue="double?"> 

    <NumericTextBoxEvents TValue="double?" Created='() => { onCreated("numeric"); }'></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

@code { 

    public async Task onCreated(string id) 

    { 

        await JsRuntime.InvokeVoidAsync("create", id); 

    } 

 } 

[Client End] 

window.create = (id) => { 

  document.getElementById(id).addEventListener("mousewheel", function (e) { 

      e.stopImmediatePropagation(); 

  }) 

} 

Please let us know if you would require any further assistance on this. 

Regards, 

Jeyanth. 

[Alexsandro]

The example they sent works, but when I added the codes to my system, it remains the same, with no visible change.

Attachment: prints_a644aa37.zip

[Berly Christopher]

Hi Alexsandro, 

  

While checking the shared screenshot, you have rendered the NumericTextBox component inside the CustomColFormRadzen tag helper. So, please share the details about the custom component which is used in the application else share any simple issue reproducing sample that will help us to investigate further from our end. 

  

Regards, 

Berly B.C 

[Alexsandro]

CustomColFormRadzen.razor:

<div class="@colCssClass" style="@colstyle">

    <div class="@labelDivCssClass">

       @* <Label Text="@labelCaption" />*@

    </div>

    <div class="@childDivCssClass">

        @ChildContent

    </div>

</div>

@code {

    [Parameter]

    public RenderFragment ChildContent { get; set; }

    [Parameter]

    public string colCssClass { get; set; }

    [Parameter]

    public string colstyle { get; set; }

    [Parameter]

    public string labelDivCssClass { get; set; }

    [Parameter]

    public string labelCaption { get; set; }

    [Parameter]

    public string childDivCssClass { get; set; }

}

[Sevvandhi Nagulan]

Hi Alexsandro, 

We checked your query. We made the sample using given code example and ensured the reported issue. But the reported scenario works as expected at our end. For you reference we have attached the sample below. 

 

<CustomColFormRadzen labelCaption="+ Metragem:" colCssClass="c0l-md-12 col-lg-3" colstyle="margin-bottom: 20px" labelDivCssClass="align-items-center d-flex"></CustomColFormRadzen> 

<SfNumericTextBox ID="numeric" @bind-Value="@KmMragem" TValue="int" Min="0" Format="n0" ShowSpinButton="false"> 

    <NumericTextBoxEvents TValue="int" Created='() => { onCreated("numeric"); }'></NumericTextBoxEvents> 

</SfNumericTextBox> 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfNumericTextbox-470340230 

Please check the above sample and modify the attached sample to replicate the issue. It would be helpful to investigate the issue further at our end. 

Regards, 

Sevvandhi N 

[Yunus]

Hi,
This solution is working good, thanks.
Is it possible to add a property to NumericTextBox like "AllowChangeByScroll"?

Regards

[Kokila Poovendran]

Hi Alexsandro,

We have logged your requirement as a uncertain feature request at our end. This support will be included in any one of our upcoming releases. Please track the status of the reported issue from the below feedback.

 

Feedback Link: https://www.syncfusion.com/feedback/45728/need-to-provide-support-to-disable-the-mouse-wheel-on-sfnumerictextbox