RadNumericTextBox with HTML5

[Jeffrey]

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.

[SamJ]

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

[Brian]

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

[Brian]

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. 

[Jeffrey]

Yes, serious oversight.  I had to drop rad controls all together.

[Brian]

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

[Mark]

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);

    });
}

[Mark]

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{

}

[Mark]

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.