I have added a RadMaskedTextBox to a form. My layout uses bootstrap. All of my other controls have the label at the top, but when I add the RadMaskedTextBox , the label goes to the left. This happens whether I use the asp label or the built in label for the control.

 <telerik:RadMaskedTextBox ID="rmtPhone" runat="server" RenderMode="Auto" Mask="+1 (###) ###-####"  Label="Phone"></telerik:RadMaskedTextBox>

Does anyone have a solution to move the label to the top?

I am using a masked text box to allow my users to enter text that also has literal text in the box for example the text box has a the literal text of "My name is : " and I want the user to enter text of a date.  Since every name is a different length  I added the small loop below.  Have not had anybody need more space.  I also set the RadMaskedTextBox to always selectAll when the field is entered.

Here are the issues I am having

1) The FreeMaskPart does not show any mask space holders.  This is good for the most part. when the user first enters the box and types there name all is good.  For example they enter the name "Paul"
2)  If the user leaves the text box and then re-enters it all text is selected.  The issue keeps coming where the user enters the textbox then clicks to the last char in this example the "l".  The reality is they clicked the end but they are not on the "l" they are at the end of the mask or in this example 36 charectors past the "l" 40 char of the mask - 4 char in "paul".  If they hit the backspace or the left arrow key it appears that nothing is happening even though they are moving back along the mask.   As stated in "1" above the "FreeMaskPart" option does not show any actual mask chars.

So what I need to be able to do is this:
1) not limit the mask to 40 chars but make is any lenght
2) when they re-enter the masked box and click the end of the box not have to hit the backspace or left arrow key 36 times from the example above 
3) least favorite option show an underline for the masked character. When using "New Telerik.Web.UI.FreeMaskPart()" there is no masked text indication so they at least see where the cursor is in the box

Any help on this would be greatly appreciated

Thanks
Paul

In Old Telerik Version, RangeValidator  triggers server side validation on Keypress.

But, in the latest Telerik version RangeValidator  triggers server side validation on Lostfocus (onBlur).

My Requirement is to trigger server side validation on KeyPress

Can you guide me how I can accomplish this with the latest Telerik Version. 

This is the current code:

                                RangeValidator rng = new RangeValidator();
rng.ControlToValidate = sControlID;
rng.CssClass = "val";
rng.Display = ValidatorDisplay.Dynamic;
rng.EnableClientScript = true;
rng.ErrorMessage = RangeErrorMessage;
rng.MaximumValue = RangeMaxVal;
rng.MinimumValue = RangeMinVal;
rng.EnableClientScript = true;//Add the validator
TextControl.Parent.Controls.Add(rng);
Page.Validators.Add(rng);

Thanks in Advance.

Hello,

We have a zip code entry text box that utilizes radmasktextbox to require entry of zipcode in us format. We'd like to support international postal code standards. I have created some JavaScript that in theory should switch the text box on client side to allow up to 10 of any characters when the nation isn't USA, but its simply not totally changing the text entry formatting. It can get to the point where it prints your characters in the box when you type, but when you blur it will strip out any chars that violate the old rules (US, 5+4). 

Not permitting changing of the mask in clientside easily seems to be a fantastically big oversite. how does one do this? 

code to  change the mask:

       funciton changeFormat(sender, args) {
            var unitedStates = ['US', 'USA', 'UNITED STATES', 'UNITED STATES OF AMERICA'];
            var i = 0;

            var mask = [];
            if (unitedStates.indexOf($find(countryControlId).get_value().toUpperCase()) < 0) {
                for (i = 0; i < 10; i++) {
                    mask[mask.length] = new Telerik.Web.UI.RadFreeMaskPart();
                }
            } else {
                for (i = 0; i < 5; i++) {
                    mask[mask.length] = new Telerik.Web.UI.RadDigitMaskPart();
                }
                mask[mask.length] = new Telerik.Web.UI.RadLiteralMaskPart('-');
                for (i = 0; i < 4; i++) {
                    mask[mask.length] = new Telerik.Web.UI.RadDigitMaskPart();
                }

            }

            $find(zipControlId).set__initialDisplayMasks(mask);
            $find(zipControlId).set__initialMasks(mask);
            $find(zipControlId)._setDisplayMask(mask);
            $find(zipControlId)._setMask(mask);
            $find(zipControlId)._length = 0;
            $find(zipControlId).clear();
}

Hi,

When I try to use client side validation on RadMaskedTextbox as follows, the validation still takes place after a postback. is this a bug?

I try to follow your demo https://demos.telerik.com/aspnet-ajax/textbox/functionality/validation/defaultvb.aspx

    <asp:TextBox ID="batch" runat="server" Width="60%"></asp:TextBox>
     <asp:RequiredFieldValidator ErrorMessage="Mandatory" ValidationGroup="Contact" Enabled="True" id="batchReq" ControlToValidate="batch" CssClass="text-danger small" display="dynamic" runat=server />
    <br />



      <telerik:RadMaskedTextBox RenderMode="Lightweight" EnableEmbeddedSkins="false" Skin="MetroTouchNeutral" ValidationGroup="Contact" ID="rmt_tijd" visible="true" runat="server" Mask="<0..24>:<0..59>" Width="30%"></telerik:RadMaskedTextBox>




                            <asp:RequiredFieldValidator EnableClientScript="true" ErrorMessage="Mandatory" ValidationGroup="Contact" Enabled="true" InitialValue="00:00"  id="RequiredFieldValidator3" ControlToValidate="rmt_tijd" CssClass="text-danger small" display="dynamic" runat=server />

    <br />
    <asp:Button ID="Button1" runat="server" Text="Button" ValidationGroup="Contact"  />

Thanks for your help, stay safe

Marc

Hey everyone,

Recently we have upgraded Telerik controls in our application to latest version and run into a few bugs with RadMaskedTextBox that can be reproduced on latest version of MS Edge.

I provided Telerik demo web-page instead of source code.

Case 1:  Cursor changes position after entered letter

1. Focus on 'Phone' field
2. Enter any letter

Expected result: cursor doesn't change position as it works in Chrome or Firefox.
Actual result: cursor change position and moves to right side.

Case 2: Page freezes while entering value

1. Focus on 'Phone' field
2. Enter '1234' repeatedly and press Home button in the end of the field and enter value again

Expected result: new value is replacing the old one
Actual result: at some point page freezes, user unable to do anything on the current page

Last case can be reproduced only on latest MS Edge:
Microsoft Edge 41.16299.15.0
Microsoft EdgeHTML 16.16299

Do you have any ideas how to fix these issues? Any help is appreciated.

Thank you!

Team Telerik,

I've encountered what appears to be a bug with the RadMaskedTextBox.set_value() method in ASPNet UI 2015.1.401.45

When called, the RadMaskedTextbox doesn't reflect the new value until you mouse click into the field.

Work Around:

Call RadMaskedTextbox.focus() immediately after RadMaskedTextbox.set_value(). It's a little tacky, but it works.

Can you guys fix this for 2015 Q2? That'd be great. Thanks.

- Jonathan

Hi, I want to show Suggention List with MaskedTextBox at Client Side. I have achieved this using JQuery UI Plugin by storing items in cookie and escaping underscore(_) and hyphen (-) in searching. Below is the code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <title></title>
 
</head>
<body>
    <form id="form1" runat="server">
     <div>
        <table>
            <tr>
                <td>
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
                    <telerik:RadMaskedTextBox ID="TextBox1" CssClass="txtNIN" runat="server" Mask="######-####"></telerik:RadMaskedTextBox>

                </td>
            </tr>
                        <tr>
                <td>
                    <asp:Button runat="server" ID="asd" Text="submit" OnClientClick="add()" />

                </td>
            </tr>
        </table>
 

    </div>
       <%-- <div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags"/>
</div>--%>
    </form>
</body>
</html>
    <script type="text/javascript">
        var arr = [];
        $(function () {
            var myCookie = getCookie("SSNKey");
            if (myCookie == null || myCookie == "") {
                arr = [];
                var json_str = JSON.stringify(arr);
                createCookie('SSNKey', json_str);
            }
            else {
                var json_str = getCookie('SSNKey');
                arr = JSON.parse(json_str);
            }
            $("#TextBox1").autocomplete({
                minLength: 0,
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term.replace(/_/g, "").replace("-", "")), "i");

                    var matching = $.grep(arr, function (value) {
                        return matcher.test(value);
                    });
                    response(matching);
                },
                select: function (event, ui) {
                    event.preventDefault();
                    var selectedObj = ui.item;
                    var y = ["_", "_", "_", "_", "_", "_", "-", "_", "_", "", "_"];
                    for (var i = 0; i < selectedObj.value.length; i++) {
                        y[i] = selectedObj.value.charAt(i);
                    }
                    $find("<%= TextBox1.ClientID %>").set_value(y.toString().replace(/,/g, ""));
                }
            })
                .focus(function () {
                $(this).autocomplete("search", "");
            });
        });
        function createCookie(name, value, days) {
            if (days) {
                var date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                var expires = "; expires=" + date.toGMTString();
            }
            else var expires = "";
            document.cookie = name + "=" + value + expires + "; path=/";
        }
        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }
        function add() {
            var x = document.getElementById('TextBox1').value.replace(/_/g, "").replace("-","");
            if (arr.indexOf(x) == -1) {
                arr.unshift(x)
                if (arr.length > 5) {
                    arr.pop();
                }
                var json_str = JSON.stringify(arr);
                createCookie('SSNKey', json_str);
            }
        }

</script>

I'm using a Telerik maskedtextbox.  Let say the mask is '#####'.
I can enter 1-5 digits and all is good.

If I add a RegularExpressionValidator to the field, it will always fail unless I enter exactly the amount of digits specified in the mask.

ex.
just the maskedtextbox with mask '#####', I can enter 1, 11, 111, 1111, 11111 and all is good.
If I add a RegularExpressionValidator, it fails unless the input is 11111.