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

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

5 Answers 684 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Junius
Top achievements
Rank 2
Junius asked on 08 Apr 2020, 04:44 AM

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

5 Answers, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 09 Apr 2020, 01:36 PM

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:

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Junius
Top achievements
Rank 2
answered on 16 Apr 2020, 01:27 AM

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

0
Nikolay
Telerik team
answered on 17 Apr 2020, 02:02 PM

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:

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Junius
Top achievements
Rank 2
answered on 17 Apr 2020, 10:39 PM

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

0
Nikolay
Telerik team
answered on 21 Apr 2020, 03:52 PM

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:

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
NumericTextBox
Asked by
Junius
Top achievements
Rank 2
Answers by
Nikolay
Telerik team
Junius
Top achievements
Rank 2
Share this question
or