This is a migrated thread and some comments may be shown as answers.

NumericTextBox and IntegerTextBox - MaxLength attribute is not working

10 Answers 243 Views

NumericTextBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Paul asked on 28 Aug 2010, 01:13 AM

I tried the suggestion of Greg Hendee in his post here (http://www.telerik.com/community/forums/aspnet-mvc/numericinput/limit-number-of-characters-entered.aspx) but it doesn't solve my problem. Looking at the raw html i notice there are actually 3 controls that come into play for the NumericTextBox or IntegerTextBox. It is a div and two input tags inside the div.

I will describe what I'm doing and what I'm observing is happening in the event that I'm doing it incorrectly:

I noticed that when I add an attribute to the .HtmlAttribute() method it puts said attribute on the div described above.
I also noticed that when I add an attribute to the .InputHtmlAttribute() method it sometimes puts the attribute on both input controls and sometimes doesn't. This is where my problem is.

I am using the following code to set some attributes on my NumericTextBox and IntegerTextBox (I used both in the hopes that one would work):

<%: Html.Telerik().NumericTextBox()

.Name("TestNumeric")

.Value(3)

.MinValue(1)

.MaxValue(99)

.DecimalDigits(0)

.Spinners(false)

.InputHtmlAttributes(new { maxlength = "2", style="width: 25px;" })

.HtmlAttributes(new { maxlength = "2",style="width: 25px;" })

.ClientEvents(events => {events.OnChange("numericTextBoxChange");})

%>

<br />

<%: Html.Telerik().IntegerTextBox()

.Name("TestInteger")

.Value(3)

.MinValue(1)

.MaxValue(99)

.Spinners(false)

.InputHtmlAttributes(new { maxlength = "2", style="width: 25px;" })

.HtmlAttributes(new { maxlength = "2",style="width: 25px;" })

.ClientEvents(events => {events.OnChange("integerTextBoxChange");})

%>

The problem is as you can see I'm specifying both the style attribute and the maxlength attribute but only the style attribute is put on both the input tags that are included in the div. It is putting the maxlength attribute on the input control that is set to display: none and I'm not sure how to set the other input tag with this attribute. Since it works for the style attribute, I assumed it would work for the maxlength attribute.

What am I doing wrong?

Thanks,
Paul

10 Answers, 1 is accepted

answered on 30 Aug 2010, 02:22 PM

Hello Paul,

Indeed, this is a bug and we logged it for fixing. Until we do that, you can use the following work-around:

remove the maxlength from the InputHtmlAttributes
use the following script on the page:
    <script type="text/javascript">
        function initMaxWidth() {
            $('#TestNumeric,#TestInteger')
                .each(function() {
                    $(this).find('.t-input:first').attr('maxlength', 2);
                });
        }
    </script>

    <% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {%>initMaxWidth();<%}); %>

The issue will be addressed this week.

Greetings,
Alex Gyoshev
the Telerik team

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 Public Issue Tracking system and vote to affect the priority of the items

answered on 30 Aug 2010, 08:28 PM

I have it working now with the OnLoad client event of the control but I'd love to be able to pass in a value to the method so I didn't have to hardcode the maxlength in the JavaScript. I have a few controls that have different lengths and I hate to create a separate JavaScript method based on the maxlength value. Any suggestions on how to accomplish this?

Here's the code I'm using...

JavaScript:

<script type="text/javascript">

    function initMaxWidth(e) {

        var children = $(e.currentTarget).children('.t-input');

        $(children).each(function () {

            $(this).attr('maxlength', 2);

        });

    }

</script>

Control Definition:

<%: Html.Telerik().NumericTextBox()

        .Name("TestNumeric")

        .Value(3)

        .MinValue(1)

        .MaxValue(99)

        .DecimalDigits(0)

        .Spinners(false)

        .InputHtmlAttributes(new { style="width: 25px;" })

        .HtmlAttributes(new { style="width: 25px;" })

        .ClientEvents(events => {events.OnLoad("initMaxWidth");})

%>

<br />

<%: Html.Telerik().IntegerTextBox()

        .Name("TestInteger")

        .Value(3)

        .MinValue(1)

        .MaxValue(99)

        .Spinners(false)

        .InputHtmlAttributes(new { style="width: 25px;" })

        .HtmlAttributes(new { style="width: 25px;" })

        .ClientEvents(events => {events.OnLoad("initMaxWidth");})

%>

Accepted

answered on 31 Aug 2010, 09:47 AM

Hello Paul,

In telerik.textbox.js, find the following code (line 34):
        $('<input>', {
            id: input.attr('id') + "-text",
            name: input.attr('name') + "-text",
            value: (inputValue || this.text),
            'class': input.attr('class'),
            style: input.attr('style')
        })
... and add the maxlength attribute like this:
        $('<input>', {
            id: input.attr('id') + "-text",
            name: input.attr('name') + "-text",
            value: (inputValue || this.text),
            'class': input.attr('class'),
            style: input.attr('style'),
            maxlength: input.attr('maxlength')
        })

This should allow you to set the maxlength through the InputHtmlAttributes. It will be included in upcoming releases.

Kind regards,
Alex Gyoshev
the Telerik team

answered on 10 Feb 2011, 04:25 PM

I hope you don't make too deep changres in rendering .... or I'm sure you'll break my code... today I found one thing that has changed an made misbehave some of my grids.

Before this last version you used 't-grid-action' + 't-grid-edit/delete/whatever' for the grid buttons.

From this last update, the 't-grid-action' class is no more on the grid buttons... so all my $(this).closest('.t-grid-action') stopped working :(

This are the type changes on rendering you are planning for next version?... if so, please document them very well so I can fix my code to work with the newest versions...