RadNumericTextBox Input Type Incorrect on Dynamically Generated Controls

[Matt]

We generate most of our controls dynamically based on admin preferences in designing their input forms.  When we create the RadNumericTextBox control, the HTML that we generate it looks like this:

<telerik:RadNumericTextBox ID="txtMaskNumericExample" Runat="server" Width="250px" ShowButton="False" ShowSpinButtons="False" 
                    SkinID="OverrideRadDefaultSkinWithNonExistantSkin" Type="Currency" visible="false" SelectionOnFocus="None" /> 

However, when it's generated and displayed in the browser, the type is ignored and replaced with Type="text".  The view source for the control shows as follows:

<input id="ctl00_EPDetailBodyPlaceHolder_FieldProperties_txtMaskNumericExample" name="ctl00$EPDetailBodyPlaceHolder$FieldProperties$txtMaskNumericExample" class="riTextBox riEnabled" value="$14.20" type="text" /><input id="ctl00_EPDetailBodyPlaceHolder_FieldProperties_txtMaskNumericExample_ClientState" name="ctl00_EPDetailBodyPlaceHolder_FieldProperties_txtMaskNumericExample_ClientState" type="hidden" />

In order to see what the difference was between a dynamically generated control and a static control, I added the RadNumericTextBox directly to the page.  It looks like the second code block above, but appears as desired.  I put it on another page and again, it appears as the second code block above, but this time, it doesn't work as desired (e.g., Currency shows up as text).

What am I missing here?

[Eyup]

Hi Matt,

Can you please verify that you are creating and adding the dynamic controls in the Page_Init event handler?

Looking forward to your reply.

Regards,
Eyup
Telerik

 

 

[Matt]

Where they're created doesn't appear to be the issue.  I went ahead and added a control in designer and the result is the same.  Here's the code definition (.aspx file):

<td colspan="4">
    <telerik:RadNumericTextBox ID="txtMasked" runat="server" Type="Currency" ShowButton="false"
        ShowSpinButtons="false" Value="14.20" />
</td>

And here's how it looks after the page has been loaded:

 <span id="ctl00_EPDetailBodyPlaceHolder_txtMasked_wrapper" class="riSingle  riContSpinButtons RadInput RadInput_Office2007" style="width:160px;"><input id="ctl00_EPDetailBodyPlaceHolder_txtMasked" name="ctl00$EPDetailBodyPlaceHolder$txtMasked" class="riTextBox riEnabled" value="14.20" type="text" /><a class="riUp" href="javascript:void(0)" id="ctl00_EPDetailBodyPlaceHolder_txtMasked_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="ctl00_EPDetailBodyPlaceHolder_txtMasked_SpinDownButton"><span>Spin Down</span></a><input id="ctl00_EPDetailBodyPlaceHolder_txtMasked_ClientState" name="ctl00_EPDetailBodyPlaceHolder_txtMasked_ClientState" type="hidden" /></span>

Again, the currency Type declaration is ignored, as is the directive to hide the spin buttons.

[Matt]

Still trying to troubleshoot this.  This time I simply added a new page to our project that simply contains three RadNumericTextBox controls (one of each type) as follows::

<table>
    <tr>
        <td>
            <asp:Label ID="lblNumber" Text="Number:" runat="server"/>
        </td>
        <td >
            <telerik:RadNumericTextBox ID="txtNumberMask" runat="server" Type="Number" ShowButton="false" ShowSpinButtons="false" value ="123.45"/>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblMask" Text="Currency:" runat="server"/>
        </td>
        <td >
            <telerik:RadNumericTextBox ID="txtCurrencyMask" runat="server" Type="Currency" ShowButton="false" ShowSpinButtons="false" value ="678.90"/>
        </td>
    </tr>
    <tr>
        <td>
            <asp:Label ID="lblPercent" Text="Percent:" runat="server"/>
        </td>
        <td >
            <telerik:RadNumericTextBox ID="txtPercentMask" runat="server" Type="Percent" ShowButton="false" ShowSpinButtons="false" value ="234.56"/>
        </td>
    </tr>
</table>

Here's what the view source looks like:

<table>
    <tr>
        <td>
            <span id="lblNumber" style="color:Black;font-family:Tahoma,Arial,Helvetica,Verdana;font-size:Small;text-align: left;">Number:</span>
        </td>
        <td >
            <!-- 2014.2.618.45 --><span id="txtNumberMask_wrapper" class="riSingle  riContSpinButtons RadInput RadInput_Office2007" style="width:160px;"><input id="txtNumberMask" name="txtNumberMask" class="riTextBox riEnabled" value="123.45" type="text" /><a class="riUp" href="javascript:void(0)" id="txtNumberMask_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="txtNumberMask_SpinDownButton"><span>Spin Down</span></a><input id="txtNumberMask_ClientState" name="txtNumberMask_ClientState" type="hidden" /></span>
        </td>
    </tr>
    <tr>
        <td>
            <span id="lblMask" style="color:Black;font-family:Tahoma,Arial,Helvetica,Verdana;font-size:Small;text-align: left;">Currency:</span>
        </td>
        <td >
            <span id="txtCurrencyMask_wrapper" class="riSingle  riContSpinButtons RadInput RadInput_Office2007" style="width:160px;"><input id="txtCurrencyMask" name="txtCurrencyMask" class="riTextBox riEnabled" value="678.90" type="text" /><a class="riUp" href="javascript:void(0)" id="txtCurrencyMask_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="txtCurrencyMask_SpinDownButton"><span>Spin Down</span></a><input id="txtCurrencyMask_ClientState" name="txtCurrencyMask_ClientState" type="hidden" /></span>
        </td>
    </tr>
    <tr>
        <td>
            <span id="lblPercent" style="color:Black;font-family:Tahoma,Arial,Helvetica,Verdana;font-size:Small;text-align: left;">Percent:</span>
        </td>
        <td >
            <span id="txtPercentMask_wrapper" class="riSingle  riContSpinButtons RadInput RadInput_Office2007" style="width:160px;"><input id="txtPercentMask" name="txtPercentMask" class="riTextBox riEnabled" value="234.56" type="text" /><a class="riUp" href="javascript:void(0)" id="txtPercentMask_SpinUpButton"><span>Spin Up</span></a><a class="riDown" href="javascript:void(0)" id="txtPercentMask_SpinDownButton"><span>Spin Down</span></a><input id="txtPercentMask_ClientState" name="txtPercentMask_ClientState" type="hidden" /></span>
        </td>
    </tr>
</table>

I'm stumped.  Suggestions?

[Konstantin Dikov]

Hello Matt,

I have tested the code snippet from your last post, and the RadNumericTextBox controls are working as expected and the percentage and the currency values are displayed correctly (refer to the attached screenshot).

I have to say that the Type property of the RadNumericTextBox will not change the type of the generated input element. That property is related to the way that the input will handle and display the values (as number, percentage or currency).

The type of the generated input element could be changed only with standard RadTextBox:

<telerik:RadTextBox InputType="Number" runat="server"></telerik:RadTextBox>

In the context of RadNumericTextBox, since the entire logic is handled by the control, changing the input type to "Number" will interfere with the browsers logic and that is why there is no InputType property for the RadNumericTextBox.

Hope this helps.


Regards,
Konstantin Dikov
Telerik