How to disable (readonly) numeric textbox user input but allow the spinner?

[Junius]

Hi there,

I'm struggling to make a kendo numeric textbox control make the user input as readonly but allow the user to use the spinner.  The readonly method makes the control not usable entirely.  I want only the user input box to be disabled, but the spinner should be working as is.

Is there any method or configuration that I can use? or does this feature is not supported on the current version?

 

 

Regards,

Junius

[Nikolay]

Hello Junius,

This functionality is not coming out of the box, however it could be achieved programmatically. Here is the approach I would go for:

Add class k-state-disabled and set the opacity to 1 so the value does not fade:

$(".k-input").addClass("k-state-disabled")
...
<style>
.k-state-disabled {
  opacity: 1;
}
</style>

Here is a Dojo demonstrating the above:

• https://dojo.telerik.com/EJIVezeV

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[Junius]

Hi Nikolay,

Thank you for your response.  The dojo that you have provided looks great but, that doesn't solve my problem.

I wanted the input text box to be disabled totally.  User can't input anything on it, it will be just the spinner to increment/decrements value in the input box.

I hope this feature will be available in the next release of Kendo UI.

 

 

Cheers,

Junius

[Nikolay]

Hello Junius,

Thank you for the provided feedback.

The approach I have provided does not allow user input unless the arrows are used. Here is another Dojo applying it:

• https://dojo.telerik.com/oROPibOt

If you would like I can convert this forum thread into a feature request where it can be reviewed by the Product Management. The requests that are reasonable and receive lots of popularity are usually included in the RoadMap.

Regards,
Nikolay
Progress Telerik

[Junius]

Hi Nikolay,

Thank you for your response.

Unfortunately the Dojo that you have provided still doesn't work.  I can still use (input random numbers) the input box.

However, I found a way to solve the problem.  But I think, it's not a clean approach, there must be a better way to solve it.

The trick is, I add a "readonly" property in the input element.  Refer to Dojo link below.

https://dojo.telerik.com/oROPibOt/2

Please convert this forum into a feature request.

Use case:

As a user, I would like to use numeric text box as input of calendar days.

Business case:

If numeric text box is used as input for calendar days.  The user control should be able to limit the maximum number of days based on a given month.

For example:

If I will select a month of January, numeric text box should only allow to input a maximum of 31 (days).  On the other hand, If I will select February, numeric text box should only allow 28 or 29 - if its a leap year.

If only the numeric text box input element can be configured to readonly, then user will use the spinner to change its value rather than using the input box.

 

Thank you,

Junius

[Nikolay]

Hello Junius,

Thank you for giving further details about the use-case.

Indeed, my approach allows typing when the spinner is clicked. Sorry for missing that. However, setting the input readonly does the job.

By design, the NumericTextBox is made to provide users with input for different types of units as numbers and not to choose a date. The respective widget for dates is DateInput and we recommend sticking to it.

Still, the NumericTextBox can be restricted to a certain max by setting max to the input and later based on a condition (month length) this can be dynamically updated. Below I am posting a StackOverflow article discussing how to change the max value for input type number with JavaScript:

• https://stackoverflow.com/questions/13613937/how-to-change-the-max-value-for-input-type-number-on-html5-with-javascript

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik