RadNumericTextBox with HTML5

8 posts, 0 answers
  1. Jeffrey
    Jeffrey avatar
    2 posts
    Member since:
    Mar 2012

    Posted 30 Mar 2012 Link to this post

    Is it possible to have a RadNumericTextbox that ends up with the HTML5 "type" field set to "numeric"?  As it is right now, when i click into my numerictextbox using an Ipad, it brings up the letter keyboard instead of the numeric one.
  2. SamJ
    SamJ avatar
    101 posts
    Member since:
    Jul 2008

    Posted 30 Mar 2012 Link to this post

    As far as I know this is not possible for the RadNumericTextBox.
    But you could set "numeric" HTMLType for RadTextBox and use it instead:
    http://demos.telerik.com/aspnet-ajax/input/examples/common/html5support/defaultcs.aspx

    SamJ
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian
    Brian avatar
    3 posts
    Member since:
    Feb 2012

    Posted 11 Sep 2012 Link to this post

    This seems like a serious oversight?

    There's no way to use the nice validation/formatting of this field and have it popup a 'number pad' on touch devices instead of the full keyboard.

    Is there any way to force the RadNumericTextBox at all or suggestions?

    Brian
  5. Brian
    Brian avatar
    3 posts
    Member since:
    Feb 2012

    Posted 11 Sep 2012 Link to this post

    Are there any methods I can overload (if I extend the RadNumbericRadBox)  that will set the input type of the textbox control to number?
    .. just started, so going to investigate the child controls etc. 
  6. Jeffrey
    Jeffrey avatar
    2 posts
    Member since:
    Mar 2012

    Posted 11 Sep 2012 Link to this post

    Yes, serious oversight.  I had to drop rad controls all together.
  7. Brian
    Brian avatar
    3 posts
    Member since:
    Feb 2012

    Posted 11 Sep 2012 Link to this post

    I await criticism on how I've implemented this .. it's a hack, I know and understand .. but having it in a seperate class will allow me quickly revert or change my tac later if needed .. I'm not a C# developer so please take this into consideration

    I've implemented a custom tag that overrides the RadNumericTextBox and overwrites the Render method.. basically, I'm letting the Rad Designer create the html, then I'll manipulate it as I want, and fire it out..

    in my App_Code ->

    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.Text;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    namespace MyApp.Web.Controls
    {
        public partial class FPRadNumericTextBox : Telerik.Web.UI.RadNumericTextBox
        {
            public FPRadNumericTextBox()
                : base()
            {
            }
     
            protected override void Render(HtmlTextWriter output)
            {
                System.IO.StringWriter stringWriter = new System.IO.StringWriter();
                HtmlTextWriter tempOutput = new HtmlTextWriter(stringWriter);
                base.Render(tempOutput);
     
                string html = stringWriter.ToString();
                html = html.Replace("type=\"text\"", "type=\"number\"");
                output.Write(html);
            }
        }
    }

    and inside the aspx

    <%@ Register Assembly="App_Code" Namespace="MyApp.Web.Controls" TagPrefix="fp" %>
     
    ......
     
    <fp:FPRadNumericTextBox NumberFormat-DecimalDigits="2" MaxLength="10" ID="MyNumberField" Width="100px" runat="server" />

    currently the only other 'type=' the base render returns is 'hidden' .. 

    I'm not sure how performant or resource intense this might be, but for my purposes, I don't expect it should be an issue

    I don't want to have to invest time and effort in remaking the RadNumericTexBox using the RadTextBox and validators/patterns/javascript etc .. I'm also hoping that Telerik will 'fix' this, so I can simply revert my changes

    Brian

  8. Mark Meikle
    Mark Meikle avatar
    16 posts
    Member since:
    Mar 2010

    Posted 18 Nov in reply to Brian Link to this post

    Here's a jQuery and Javascript solution I wrote:

    //On page ready
    $(document).ready(fixRadNumericTextBoxes);

     

    //Fixes radnumeric textboxes HTML5 type by changing it from "type=text" to "type=number" for mobile keyboard compatibility
    function fixRadNumericTextBoxes(){
     
        //For each radnumerictextbox
        $('.eslo-radnumerictextbox').each(function () {
     
            //Get html
            var myHTML = $(this).html();
            alert(myHTML);
     
            //Replace type=text with type=number
            myHTML = myHTML.replace('type=\"text\"', 'type=\"number\"');
     
            //Re-write the html
            $(this).html(myHTML);
     
        });
    }
  9. Mark Meikle
    Mark Meikle avatar
    16 posts
    Member since:
    Mar 2010

    Posted 18 Nov in reply to Mark Meikle Link to this post

    I forgot to mention that I added a dummy selector class to my CSS file for finding all radnumeric textboxes on the page, since I didn't see a common telerik class they use. This makes it nice and easy. Simply add this class to any container div or span around the RadNumericTextbox you want to affect.

    /* used only to find and fix radnumerictextboxes HTML input type from type=text to type=number. Done with jquery on page load. See fixRadNumericTextBoxes() function in master.js.
        IMPORTANT! must go on container div surrounding radnumerictextbox, not the control itself
    */
    .eslo-radnumerictextbox{
     
    }
  10. Mark Meikle
    Mark Meikle avatar
    16 posts
    Member since:
    Mar 2010

    Posted 18 Nov in reply to Mark Meikle Link to this post

    Markup would look something like this...

    <div class="input-group input-group-lg input-group-eslx eslo-radnumerictextbox">
        <telerik:RadNumericTextBox ID="TextBoxQuantityCompactDiscs" runat="server"
            DataType="System.Int32"
            MaxLength="8" MaxValue="1000000"
            MinValue="25" TabIndex="74"
            Type="Number" ValidationGroup="ReleaseInfo" Width="100%" RenderMode="Lightweight" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False">
            <IncrementSettings InterceptMouseWheel="False" Step="10" />
            <NumberFormat DecimalDigits="0" />
        </telerik:RadNumericTextBox>
        <span class="input-group-addon" role="button" tabindex="-1" data-toggle="popover" data-trigger="focus" data-placement="top" aria-hidden="true" title="How many compact discs?" data-content="License the number you will actually make. Licensing is required for every unit made, even copies you plan to give away for free."><span class="fa fa-question-circle color-logo-lighttext-eslx" aria-hidden="true"></span></span>
    </div>

     

    Note: you can disregard the type="Number" in the markup here. It's irrelevant since RadNumericTextBox ignores it anyway (changes it to type="text", and the whole purpose of my jQuery code is to fix the issue.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017