Issues using WebControlAdapter on RadNumericTextBox

3 posts, 0 answers
  1. Chris
    Chris avatar
    3 posts
    Member since:
    Dec 2015

    Posted 03 Mar 2016 Link to this post

    Hello Telerik,

    I have been trying to add mobile support for your RadNumericTextBox Control. What I mean by that is when a user using a smartphone focuses on the control, a keyboard with only numbers will appear. This is easily achieved by changing the type of input from "text" to "tel". I also have js code to validate that the control has a valid value. I decided that I would use a WebControlAdapter to change the type. 

    Here is that code:

    01.using System;
    02.using System.IO;
    03.using System.Web.UI.Adapters;
    04.using System.Web.UI.WebControls;
    05.using System.Web.UI;
    06.using System.Web.UI.WebControls.Adapters;
    07.using System.Reflection;
    08.using Telerik.Web.UI;
    10.namespace LogicData.ControlAdapters
    12.    public class RadNumericTextBoxAdapter : WebControlAdapter
    13.    {
    14.        protected override void RenderContents(HtmlTextWriter writer)
    15.        {
    16.            HtmlTextWriter w = new HtmlTextWriter(new StringWriter());
    18.            base.RenderContents(w);
    20.            writer.Write(w.InnerWriter.ToString()
    21.                .Replace("type=\"text\"", "type=\"tel\""));
    22.        }
    23.    }

    And here is the browser file:

    2.  <browser refID="Default">
    3.    <controlAdapters>
    4.        <adapter controlType="Telerik.Web.UI.RadNumericTextBox"
    5.             adapterType="LogicData.ControlAdapters.RadNumericTextBoxAdapter" />
    6.    </controlAdapters>
    7.  </browser>


    Super simple nothing complicated about it and works perfectly:

    HTML Output:

    1.<input id="long_id" name="long_name" class="riTextBox riEnabled" onblur="big_function" type="tel">

    (I simplified the some of it to make it easier to read)


    However, my validation no longer worked. I inspected this and I found that the Telerik JS function $find() is no longer finding the control. (See js_output.png) When I compare the DOM Element of the changed control to the original I notice there are a few attributes missing. (See control_original.png and control_modified.png) From what I can tell the browser (Chrome in this case) isn't recognizing it as a "RadNumericTextBox" control anymore. I tried having the WebControlAdapter with nothing in it except an empty constructor and it still removed these attributes.


    So after all of this explanation and assuming, what I would like to know is:

        1. Why is the WebControlAdapter causing this?

        2. Is the missing attributes the reason the $find() function is returning null for my control?


    Thank you,



  2. Konstantin Dikov
    Konstantin Dikov avatar
    2466 posts

    Posted 08 Mar 2016 Link to this post

    Hello Chris,

    Although that this is not a supported scenario, you could achieve the desired result with ControlAdapter instead:
    public class RadNumericTextBoxAdapter : ControlAdapter
        protected override void Render(HtmlTextWriter writer)
            HtmlTextWriter w = new HtmlTextWriter(new StringWriter());
               .Replace("type=\"text\"", "type=\"tel\""));

    Hope this helps.

    Konstantin Dikov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Chris
    Chris avatar
    3 posts
    Member since:
    Dec 2015

    Posted 11 Mar 2016 in reply to Konstantin Dikov Link to this post

    Thank you!

    This is exactly what I was looking for.


Back to Top