Issues using WebControlAdapter on RadNumericTextBox

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

    Posted 03 Mar 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;
    09. 
    10.namespace LogicData.ControlAdapters
    11.{
    12.    public class RadNumericTextBoxAdapter : WebControlAdapter
    13.    {
    14.        protected override void RenderContents(HtmlTextWriter writer)
    15.        {
    16.            HtmlTextWriter w = new HtmlTextWriter(new StringWriter());
    17. 
    18.            base.RenderContents(w);
    19. 
    20.            writer.Write(w.InnerWriter.ToString()
    21.                .Replace("type=\"text\"", "type=\"tel\""));
    22.        }
    23.    }
    24.}

    And here is the browser file:

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

     

    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,

    -Chris

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 08 Mar 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());
            base.Render(w);
            writer.Write(w.InnerWriter.ToString()
               .Replace("type=\"text\"", "type=\"tel\""));
        }
    }

    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
    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. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris
    Chris avatar
    3 posts
    Member since:
    Dec 2015

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

    Thank you!

    This is exactly what I was looking for.

    -Chris

Back to Top