RadNumericTextBox Input Type Incorrect on Dynamically Generated Controls

6 posts, 0 answers
  1. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 23 Dec 2014 Link to this post

    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?
  2. Eyup
    Admin
    Eyup avatar
    3006 posts

    Posted 26 Dec 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 02 Jan 2015 in reply to Eyup Link to this post

    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.
  5. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 03 Jan 2015 Link to this post

    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?
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1794 posts

    Posted 06 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Matt
    Matt avatar
    78 posts
    Member since:
    Mar 2009

    Posted 06 Jan 2015 in reply to Konstantin Dikov Link to this post

    Thanks.  I understand the intent w/ the type in that it's only for how the display is masked.

    Regardless, this issue turned out to be a style sheet / skin conflict.  A default skin was defined for the RadNumericTextBox which causes the settings I defined in the control definition to be ignored (as expected).  Even after defining a skin with ShowSpinButtons="false" and with the correct type, it still took the default skin.  It wasn't until I *also* set the CSSClass to be the same as the SkinId did the control work as expected, as shown below:
     
    <telerik:RadNumericTextBox ID="txtMaskNumericExample" Runat="server" Width="250px" SkinID="CurrencyMaskNoSpinButtons" CSSClass="CurrencyMaskNoSpinButtons" SelectionOnFocus="None" />

    And the skin definition:

    <telerik:RadNumericTextBox SkinId="CurrencyMaskNoSpinButtons" runat="server" ShowSpinButtons="false" Type="Currency"   />

    Not sure why both are required, but hopefully this will help others overcome the same issue.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017