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

Setting maxLength for details grid inline edit field

10 Answers 1633 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 20 Jul 2017, 10:42 AM

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

10 Answers, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 24 Jul 2017, 09:28 AM
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:


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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Shawn
Top achievements
Rank 1
answered on 28 Jul 2017, 12:02 PM

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

 

0
Georgi
Telerik team
answered on 31 Jul 2017, 08:48 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Shawn
Top achievements
Rank 1
answered on 31 Jul 2017, 11:18 AM

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

0
Georgi
Telerik team
answered on 02 Aug 2017, 08:10 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Shawn
Top achievements
Rank 1
answered on 02 Aug 2017, 09:11 AM

Georgi,

That looks fine now.  Thanks for all your help.

Shawn

0
Heiko
Top achievements
Rank 1
answered on 28 Sep 2018, 11:04 AM

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.

0
Georgi
Telerik team
answered on 02 Oct 2018, 06:48 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Heiko
Top achievements
Rank 1
answered on 09 Oct 2018, 01:24 PM

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

0
Georgi
Telerik team
answered on 11 Oct 2018, 09:35 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Shawn
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Shawn
Top achievements
Rank 1
Heiko
Top achievements
Rank 1
Share this question
or