Progress® Kendo UI® for Angular Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 02 Sep 2021 18:11 by ADMIN
Alexandre
Created on: 27 Mar 2020 18:30
Category: NumericTextBox
Type: Feature Request
7
Create a property to enable or disable mouse wheel support on numeric textbox (#881)
The feature created in #881 is very good, but in some cases it doesn't help the use of the page, só it would be nice to have the option to disable this feature.
6 comments
ADMIN
Svet
Posted on: 10 Aug 2021 15:42

Hi Mike,

I checked the suggested example by Dimiter. Running it I see that the value of the NumericTextBox isn't changed when the default behavior of the wheel event is prevented. Also if the page has a scrollbar and the wheel default behavior is prevented for the NumericTextBox, then using the wheel does scroll the page. Please find an updated example at the following link:

https://stackblitz.com/edit/angular-cwdb82-rdztmr?file=app/app.component.ts

In case further assistance is required for this case please open a separate private support thread so that we can continue the discussion with any further details. Thanks.

Regards,
Svet
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

mike
Posted on: 04 Aug 2021 19:00
The workarounds provided are not sufficient for my use case as I still want the scroll event to scroll the page. I just do not want the numeric textbox to change value. Are there any alternative solutions to disable this?
mike
Posted on: 04 Aug 2021 18:54
Dimiter, the example you provided does not stop the wheel from changing the value. Is there an update to this?
ADMIN
Dimiter Topalov
Posted on: 12 Mar 2021 11:46

Hello Diego,

Thank you for sharing this solution. Another more generic one that comes to mind is to create a custom directive which takes a boolean input indicating whether the wheel event should be stopped. To apply the directive to all NumericTextBox components automatically, it may have the same selector.

Here is a sample implementation of the described approach:

https://stackblitz.com/edit/angular-cwdb82-kf4kzm?file=app/app.component.ts

Regards,
Dimiter Topalov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Diego
Posted on: 09 Mar 2021 11:18

Waiting for official support....i attach a more precise and angular style workaround to use on single components using numeric textbox:

 this.wheelRemoveListenerFn = this.renderer.listen(this.numericTextBoxComponent.numericInput.nativeElement, 'wheel', (event) => {
public ngAfterViewInit() {
    // Disable wheel function
    // TODO: wait for https://feedback.telerik.com/kendo-angular-ui/1459512-create-a-property-to-enable-or-disable-mouse-wheel-support-on-numeric-textbox-881
    this.wheelRemoveListenerFn = this.renderer.listen(this.numericTextBoxComponent.numericInput.nativeElement, 'wheel', (event) => {
      event.stopImmediatePropagation();
    });
  }
  public ngOnDestroy(){
    if (this.wheelRemoveListenerFn) {
      this.wheelRemoveListenerFn();
    }
  }
ADMIN
Svet
Posted on: 03 Apr 2020 09:44

Hi Alexandre,

Thank you for the logged feature request.

We will track the demand for this feature and plan accordingly our future development plans.

What could be done as a workaround until the feature is released is to use some custom JavaScript in order to handle the generic (wheel) event of the input element used by the NumericTextBox and stop its propagation. Please check the following example demonstrating such approach:

https://stackblitz.com/edit/angular-5lbaf4-e4tgdj?file=app/app.component.ts

Thank you for the provided feedback once again.


Regards,


Svetlin
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Create an account Log In
View
Type
Status
Category