How to build an input for Units ?

[CSurieux]

Hello,

I am looking for an input allowing to enter units values for all css admitted units, like 10px,50%,5em etc.

Could we do this with Telerik, I found nothing in library ?
Seems the only way is to create a composite control with a RadMaskedTextBox and a radCombobox ?


Thanks for ideas.
CS

[Dimo]

Hello Christian,

You can achieve the desired functionality with RadInputManager with an appropriate regular expression setting.

http://www.telerik.com/help/aspnet-ajax/using_radinputmanager.html

http://demos.telerik.com/aspnet-ajax/input/examples/radinputmanager/firstlook/defaultcs.aspx

In this case the users will type the unit inside the textbox. If you want them to select the unit from some kind of a dropdown, then you need two controls anyway, for example RadNumericTextbox and RadComboBox.

Kind regards,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[CSurieux]

Hello Dimo,

Thanks for answer.

I tried using MaskedTextBox, but I have a problem.

When user is in px unit, I want an input with 4 digits
When in % unit, I need to reset the range to 0-100

Here is my code (the mak is initialized in load with px )

<script language = "javascript" type = "text/javascript" >
 function EnumerationChanged(source, eventArgs)
 {
     if (eventArgs.get_oldValue() != eventArgs.get_newValue() &&
            (( eventArgs.get_newValue() == "%" )|| (eventArgs.get_newValue() == "px")|| (eventArgs.get_newValue() == "em")) ) {
         alert(eventArgs.get_newValue()+" at " + eventArgs.get_currentPart().offset);
         var mask;
         var val = source.get_textBoxValue().substring(0, eventArgs.get_currentPart().offset);
         alert('['+val+']');
         if (eventArgs.get_newValue() == "%") {
            var nr =   new Telerik.Web.UI.RadNumericRangeMaskPart(0,100,true,true);
            var literalPart = new Telerik.Web.UI.RadLiteralMaskPart(" ");
            var  enumPartItems= ["px","%","em"];
            var enumPart = new Telerik.Web.UI.RadEnumerationMaskPart(enumPartItems);
            mask= [
                    nr,
                    literalPart,
                    enumPart
                    ];
            valval = val + "%";
           }
           else {
               var literalPart = new Telerik.Web.UI.RadLiteralMaskPart(" ");
               var enumPartItems = ["px", "%", "em"];
               var enumPart = new Telerik.Web.UI.RadEnumerationMaskPart(enumPartItems);
               mask = [
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        new Telerik.Web.UI.RadDigitMaskPart(),
                        literalPart,
                        enumPart];
               valval = val + "px";
           }
           source._setMask(mask);
           alert('[' + val + ']');
           source.set_value(val);
     }
 }
</script >
    <div>
    <telerik:RadMaskedTextBox ID="RadMaskedTextBox1" Runat="server" >
    <ClientEvents OnEnumerationChanged="EnumerationChanged" />
    </telerik:RadMaskedTextBox><br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /><br />
    <telerik:RadTextBox ID="RadTextBox1" Runat="server">
    </telerik:RadTextBox>

The error occurs on set_value.

Anyway I will have a look on your suggestions.

Regards
CS

[Dimo]

Hi Christian,

The provided code snippet is incomplete, but anyway, switching masks all the time is definitely an overhead. I recommend you to use an alternative approach, e.g. the ones suggested earlier.

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.