Setting Mask with Javascript

[Lynda Lafreniere]

Hi,

is anyone knows if it's possible to change the mask of a radmaskedtextbox with javascript ??

Thanks !

[Vlad]

Hello Lynda,

Here is an example how to built desired mask on client. Let's say an IP mask:

        function pageLoad()
        {
            var masks = [
                new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true),
                new Telerik.Web.UI.RadLiteralMaskPart('.'),
                new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true),
                new Telerik.Web.UI.RadLiteralMaskPart('.'),
                new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true),
                new Telerik.Web.UI.RadLiteralMaskPart('.'),
                new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true)
                ];

            $find("RadMaskedTextBox1")._setMask(masks);
        }

Greetings,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Lynda Lafreniere]

Hi Vlad,

I've tried the code you gave me and it does'nt work well in my situation.

Here's my situation : I want that when I check a checkbox (input), the mask of a RadMaskedTextBox change. I want to do it client-side so I will not be forced to have à loadingPanel. I want the mask "###-###".

I've tried this (I know that it's not the good mask, but I'm not sure how to set the good one client-side) :

<script type="text/javascript">
    function Bali(c_checkbox, c_textbox)
    {
        var checkbox = $get(c_checkbox.id);
        var textbox = $find(c_textbox.id);

        var masks;

        if (checkbox.checked)
        {
            masks = [
                        new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true),
                        new Telerik.Web.UI.RadLiteralMaskPart('.'),
                        new Telerik.Web.UI.RadNumericRangeMaskPart(0, 255, false, true),
                    ];

            textbox._setMask(masks);
        }
    }
</script>

and server-side, I've put that code : international.Attributes.Add("onclick", "Bali(" + international.ClientID + ", " + masked.ClientID + ");");

For now, when I check the checkbox, the mask is updated only when I click in the textbox and I can't enter values in the field (on FireFox3).
On IE7, I get an error : "Microsoft JScript runtime error: 'undefined' is null or not an object" on the line (in visual studio debugger) "_b5.PromptChar=_b4;" because _b3.length does'nt seems to return the good value (I don't know if this can help ...).

Do I misunderstood something ?

Thanks !

[Vlad]

Hello Lynda,

There are two problems with your code:

1) You need refer the textbox ClientID as a string for the arguments in your function

2) You have comma at the end of masks array variable which will create an array with 4 elements

I have attached small example application which demonstrates how to achieve this.

All the best,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Lynda Lafreniere]

Hello Vlad,

thanks for the corrections (they was copy/paste errors).

They correct the javascript error messages, but I still have my first problem : when I click on the checkbox, the mask is updated only when I write something in the textbox and I can't enter good values in it (it's always 255 or 0 or the numbers and not written at the good place).

I've tried with the example you gave me and it does the same thing.

Do your example works well on your side ?

Thanks for your patience !

[Vlad]

Hi Lynda,

I've attached a screenshot how this looks like on my end. I can enter only values according to the specified mask.

Kind regards,
Vlad
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Lynda Lafreniere]

Hi again Vlad !

After some tests, here's the results :
First, to get the mask to be updated, I have to do "textbox.set_value('');". This way, I get the good mask.

Now, the problem is when I try to change the mask another time.

Here's the modified script of your example :

<script type="text/javascript">
        function Bali(sender, e, id) {

            var textbox = $find(id);
            var masks;
            if (sender.checked) {
                //###-###-####
                masks = [
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadLiteralMaskPart('-'),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadLiteralMaskPart('-'),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart()
                    ];
            }
            else
            {
                masks = [
                        new Telerik.Web.UI.RadLiteralMaskPart('0'),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(),
                        new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart(), new Telerik.Web.UI.RadFreeMaskPart()
                    ];
            }

            textbox._setMask(masks);
            textbox.set_value('');
        }
    </script>

The first time we check the box, the mask is set as it should. The next times, I cannot insert characters anymore. It seems to be a problem with the old mask because the cursor skip the places where there was literalMaskPart on the old mask.

Can you check if you have the same problem on your side ?

Thanks a lot !

[Missing User]

Hello Lynda,

You should set the _length field to 0. Please find attached a sample web application that demonstrates the needed approach.

Greetings,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Lynda Lafreniere]

Hello !

We're getting closer !

Next problem : now, I able to change the mask of the control client-side (it visualy change and I able to enter the text I want). But when I want to get the value of the maskedbox server-side, the mask have'nt changed so the ".Text" property is not good.

Is there a way to "commit" the changes made to the box client-side ?

Thanks again !

[Missing User]

Hi Lynda,



Please find attached modified project so that now the Text property is valid on the server. Download it and give it a try.

Sincerely yours,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Lynda Lafreniere]

Hi Plamen,

I finaly found a way to make it works by using two hiddenfields : one for the mask and one for the value (our project is a little more complex than the one we shared hehe).

I think it could be usefull to have a simple way to change the mask of a radmaskedtextbox by the client-side API. Maybe in the next release ? :)

Thanks for your help !

[Missing User]

Hi Lynda,


I am glad to hear you have found a solution. Do not hesitate to contact us if you need any further assistance!


Sincerely yours,
Plamen
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.