Skip to content

Commit 95709b8

Browse files
xristianstefanovxristianstefanov
authored andcommitted
chore(NumericTextBox): apply comments suggestions
1 parent fd53af2 commit 95709b8

File tree

1 file changed

+13
-11
lines changed

1 file changed

+13
-11
lines changed

knowledge-base/numerictextbox-disable-arrows.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Disabling NumericTextBox Arrows at Min or Max Value in Blazor
2+
title: Disable NumericTextBox Arrows at Min or Max Value in Blazor
33
description: Learn how to programmatically disable the increase or decrease arrows of a NumericTextBox in Blazor when the value reaches its minimum or maximum limit.
44
type: how-to
55
page_title: How to Disable NumericTextBox Arrows on Min or Max Value in Blazor
@@ -22,7 +22,7 @@ ticketid: 1665216
2222

2323
## Description
2424

25-
When using the NumericTextBox with arrows enabled, I want to disable the down arrow programmatically at the component's minimum value to prevent looping to the maximum value.
25+
In a NumericTextBox with enabled arrows, I want to disable the down arrow programmatically at the component's minimum value to prevent looping to the maximum value.
2626

2727
This KB article answers the following questions:
2828

@@ -31,10 +31,12 @@ This KB article answers the following questions:
3131

3232
## Solution
3333

34-
To prevent the increase/decrease arrows of the NumericTextBox from being used when the numeric value reaches its minimum or maximum, apply a conditional CSS class to disable the buttons.
34+
To prevent your end users from looping through the minimum and maximum values with the icnrease/decrease arrows of the NumericTextBox, apply a conditional CSS class to disable the buttons.
3535

3636
The example below demonstrates how to conditionally render CSS styles to disable the increase or decrease arrows based on the current value of the NumericTextBox.
3737

38+
>caption The Min and Max values should not match the default minimum and maximum values of the Value type.
39+
3840
````CSHTML
3941
<style>
4042
.disable-increase .k-spinner-increase,
@@ -44,19 +46,19 @@ The example below demonstrates how to conditionally render CSS styles to disable
4446
}
4547
</style>
4648
47-
<TelerikNumericTextBox @bind-Value="@theValue"
48-
Min="@minValue"
49-
Max="@maxValue"
50-
Class="@numericClass"
49+
<TelerikNumericTextBox @bind-Value="@NumericValue"
50+
Min="@MinValue"
51+
Max="@MaxValue"
52+
Class="@NumericClass"
5153
Width="300px">
5254
</TelerikNumericTextBox>
5355
5456
@code {
55-
private int theValue { get; set; } = 3;
56-
private int minValue { get; set; } = 1;
57-
private int maxValue { get; set; } = 10;
57+
private int NumericValue { get; set; } = 3;
58+
private int MinValue { get; set; } = 1;
59+
private int MaxValue { get; set; } = 10;
5860
59-
private string numericClass => $"disable-arrows {(theValue == maxValue ? "disable-increase" : "")} {(theValue == minValue ? "disable-decrease" : "")}";
61+
private string NumericClass => $"{(NumericValue == MaxValue ? "disable-increase" : "")} {(NumericValue == MinValue ? "disable-decrease" : "")}";
6062
}
6163
````
6264

0 commit comments

Comments
 (0)