radmaskedtextbox mousewheel changes data

[Shif]

Hi!
The mouse wheel  changes the data in the RadMaskedTextBox  I would like to disable the mouse wheel to change it.
does anybody have an idea?
<telerik:RadMaskedTextBox ID="datatxtIn1" runat="server" CssClass="editorTime" SelectionOnFocus="SelectAll"  
                                                             PromptChar="_" Width="30px" BorderStyle="None" RoundNumericRanges="false">
                                               <ClientEvents OnValueChanged="InOut_ValueChanges" OnFocus="InOut_OnFocus" /> 
                                   </telerik:RadMaskedTextBox>

Thank's
Shif

[Rick Aberle]

Same problem here. Does anyone from telerik team knows if there is a setting or a workaround.

Thanks,
Binyam

[Vasil]

Hello,

Set onmousewheel="preventDefault(event)" in the markup of your MaskedTextBox
And define such JavaScript function:

function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;
}

Regards,
Vasil
the Telerik team

[Rick Aberle]

Thanks Vasil.
But the suggested solution doesn't work. The event is already subscribed in the telerik client side javascript object representation of the control and only works for subsequent evnets fired from the radmasked text box and failed to prevent the mousewheel event the first time.
I have also tried to cancel the event from the clientevents section of the radmasked text box with no luck:

 function cancelEvent(source, eventArgs) {
            eventArgs.set_cancel(true);
        }

<telerik:RadMaskedTextBox runat="server" ID="radTxtBoxMaskedValue" >

<ClientEvents OnMoveUp="cancelEvent" OnMoveDown="cancelEvent" ></ClientEvents>

</telerik:RadMaskedTextBox>


I think this needs to be implemented the same way as the radnumerictextbox incrementsettings. Which works perfectly.
<IncrementSettings InterceptMouseWheel="False"></IncrementSettings>

Thanks,
Binyam

[Vasil]

Hello Binyam,

You can override the mousewheel handler of the masked text box to do nothing. Just add this JavaScript under the declaration of your script manager.

if (Telerik.Web.UI.RadMaskedTextBox)
{
Telerik.Web.UI.RadMaskedTextBox.prototype._onTextBoxMouseWheelHandler = function (e)
{
    return;
}

}

All the best,
Vasil
the Telerik team

[Eli Avni]

It Works,

Thanks

[Rick Aberle]

Thanks. overrinding of the mousewheel handler of the masked text box with an empty function solved our problem.

[Alvaro]

Hi Vasil:

How this would work in a RadGrid with a Template Column? Because i tried with that function, and it only works if i have the RadMaskedTextBoxes loaded in the RadGrid.

Thanks.

[Vasil]

Hi Alvaro,

This would work for all RadMaskedTextBoxes in your page. It will not matter if they are in grid or not.

I am not sure that I understand your question correctly. If you still have any troubles, please explain in further details what exactly is the case, and give us some examples.

Regards,
Vasil
Telerik

[Alvaro]

Hi Vasil:

Thanks for your quickly reply.

Basically, I have a register form. In edit mode (an existent record) it loads the RadGrid with data in the RadMaskedTextBox in the template column and the mouse wheel event is disabled. But when in create a new record, the RadGrid is empty until I select some filters. Then,  when the RadGrid is filled (the RadMaskedTextBox), the mouse wheel event is enabled. 

I don't know if this is associated with the DataBound event.

I used the javascript function mentioned above:

    $(document).ready(function () {
if (Telerik.Web.UI.RadMaskedTextBox) {
Telerik.Web.UI.RadMaskedTextBox.prototype._onTextBoxMouseWheelHandler = function (e) {
                return;
}
    }
});

Note: The mask used in the RadMaskedTextBox is a TimeSpan input  (  00:00 =>  Mask="<0..8>:<0..59>" )

Regards.

[Vasil]

Hello Alvaro,

Handle the pageLoad instead of $(document).ready. Because if you execute the script too early, the Telerik.Web.UI.RadMaskedTextBox will not be defined, so you will not override its function.

function pageLoad()
{
   if (Telerik.Web.UI.RadMaskedTextBox) {
    Telerik.Web.UI.RadMaskedTextBox.prototype._onTextBoxMouseWheelHandler = function (e)
      {
          return;
      }
    }
}

Regards,
Vasil
Telerik

[Alvaro]

After some time, I finally found a way to block the mousewheel event, so I want to share the solution (that it worked for me):

Javascript:

function BlockMouseWheel(e) {
    //jQuery
    $('#' + e.id).val(e._oldValue);
}

Markup:

<telerik:RadMaskedTextBox onmousewheel="BlockMouseWheel(this)" ....

Regards.