Setting maxLength for details grid inline edit field

[Shawn]

I have a page that contains a parent grid and a child details grid.  The parent grid uses popup editing and I can control the maxLength of the edit fields on the dialog.  However, the child details grid allows inline editing and one of the fields ("Code") can only be a length of 3 digits.

I have seen other posts and examples using the .attr to set the element's maxlength, but this does not seems to work.

So, within my details grid there is a column called 'Code'.  Inspecting the element while viewing the page in Chrome, shows the edit field to be an <input> element with and Id = 'Code' and Name = 'Code'.  I have tried the following jquery within the DataBound event of the details grid.  I also tried this in the document.ready function.

 

$("#Code").attr('maxlength', '3');

and

$("input[name='code']").attr('maxlength', '3');

 

Any chance of getting this as part of the grid declaration, possibly along with the column.Bound()?

 

Thanks,

Shawn

[Georgi]

Hello Shawn,

You can use DataAnnotation attributes.The Kendo UI Validator creates validation rules based on the unobtrusive HTML attributes. Those unobtrusive attributes are generated by ASP.NET MVC, based on the DataAnnotation attributes applied to the Model properties.

You can find more information about Kendo validation in the following article:

• http://docs.telerik.com/aspnet-mvc/getting-started/validation

I have assembled (max-length-child-grid.zip) a sample where one of the columns of child grid is restricted to be 3 characters using StringLength attribute.


Regards,
Georgi
Progress Telerik

[Shawn]

Georgi,

I downloaded and ran your example and it did not limit the input to just 3 digits as shown in the attached screen shot.  It did display a validation message however.

Regards,

Shawn

 

[Georgi]

Hello Shawn,

In order to limit the input to 3 digits, I suggest using the Kendo MaskedTextBox widget as editor template.

I have modified the sample (max-length-child-grid.zip) from the previous sample to limit the input to 3 digits using the aforementioned approach

Regards,
Georgi
Progress Telerik

[Shawn]

Georgi,

Thanks for the replies. I nearly have this working.  The MaskedEditor is now limiting the input to 3 digits, however, if there are less than 3 digits, there is this prompt character that shows up in the edit box.  (See attached screenshot)

How do I get rid of this so just the digits appear when less than the length of the mask?  I tried the setting the ClearPromptChar to true, but this did nothing.  I also tried setting PromptChar(""), but this did nothing.

Regards,

Shawn

[Georgi]

Hello Shawn,

The described behavior is expected since clearPromtChar clears the prompt char on the blur event of the input.

A possible solution is to set the prompt char to empty char:

.PromptChar(" ")

I have updated the demo (max-length-child-grid.zip) from previous message to apply the aforementioned approach.


Regards,
Georgi
Progress Telerik

[Shawn]

Georgi,

That looks fine now.  Thanks for all your help.

Shawn

[Heiko]

I have the same issue here. [StringLength(x)] attribute is some sort of solution, but not very satisfying because it is still possible for the user to enter more than x characters. It's like "hey, I told you not to enter more characters" just after the characters are entered. It is much more usefull and comfortable just to stop the input at x characters.

Is it really so hard for Telerik to put a simple "maxlength=x" attribute on an html input field if the underlying field has a [MaxLength(x)] attribute? At least that would be a logical link.

[Georgi]

Hello Heiko,

You could create an editor for that field and set the maxLength attribute as required.

e.g.

// column configuration
columns.Bound(x => x.Field).EditorTemplateName("LimitLength");


// editor view

@Html.Kendo().TextBoxFor(x=> x).HtmlAttributes(new { maxLength = 3 })

By design the validation has to notify the user that his input is not valid and not allow him to submit it until the data is not valid - not limit the user.

For your convenience I am attaching a small sample which demonstrates the above approach.


Regards,
Georgi
Progress Telerik

[Heiko]

Hello Georgi,

with your approach I have to create dozens of editors for every maxLength that I need. Btw my philosophy is to prevent invalid input before notifying the user that his input is not valid.

Thanks anyway for your help.

Regards
Heiko

[Georgi]

Hello Heiko,

A possible solution to omit creating many editors is to pass the max length value through the editor view data.

e.g.

// max length value
columns.Bound(x => x.FirstName).EditorTemplateName("LimitLength").EditorViewData(new { maxLength = 3});

// editor

@Html.Kendo().TextBoxFor(x=> x).HtmlAttributes(new { maxLength = ViewData["maxLength"] })

Regards,
Georgi
Progress Telerik