How to build an input for Units ?

4 posts, 0 answers
  1. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 01 Dec 2009 Link to this post

    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
  3. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 02 Dec 2009 Link to this post

    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.
  5. CSurieux
    CSurieux avatar
    465 posts
    Member since:
    Jan 2007

    Posted 02 Dec 2009 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 02 Dec 2009 Link to this post

    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.
Back to Top