[Solved] Issues using WebControlAdapter on RadNumericTextBox

[Chris]

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

 

[Konstantin Dikov]

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

[Chris]

Thank you!

This is exactly what I was looking for.

-Chris