From fd53af2ba75ed61b65b92e5a0a5c4dbf71efbdb8 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Sun, 29 Sep 2024 20:40:19 +0000 Subject: [PATCH 1/2] Added new kb article numerictextbox-disable-arrows --- .../numerictextbox-disable-arrows.md | 66 +++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 knowledge-base/numerictextbox-disable-arrows.md diff --git a/knowledge-base/numerictextbox-disable-arrows.md b/knowledge-base/numerictextbox-disable-arrows.md new file mode 100644 index 0000000000..25f1b5e59f --- /dev/null +++ b/knowledge-base/numerictextbox-disable-arrows.md @@ -0,0 +1,66 @@ +--- +title: Disabling NumericTextBox Arrows at Min or Max Value in Blazor +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. +type: how-to +page_title: How to Disable NumericTextBox Arrows on Min or Max Value in Blazor +slug: numerictextbox-disable-arrows +tags: numerictextbox, blazor, disable arrows, conditional styling +res_type: kb +ticketid: 1665216 +--- + +## Environment + + + + + + + + +
ProductNumericTextBox for Blazor
+ +## Description + +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. + +This KB article answers the following questions: + +- How can I disable the NumericTextBox increment and decrement buttons based on the value? +- How can I conditionally disable the NumericTextBox arrows when reaching specified value limits? + +## Solution + +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. + +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. + +````CSHTML + + + + + +@code { + private int theValue { get; set; } = 3; + private int minValue { get; set; } = 1; + private int maxValue { get; set; } = 10; + + private string numericClass => $"disable-arrows {(theValue == maxValue ? "disable-increase" : "")} {(theValue == minValue ? "disable-decrease" : "")}"; +} +```` + +## See Also + +* [NumericTextBox Overview](https://docs.telerik.com/blazor-ui/components/numerictextbox/overview) +* [Override the Theme or Apply Custom CSS Styles]({%slug themes-override%}) From 95709b8449ab36d56da1b4ea135f77a35f84c2ad Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 4 Oct 2024 17:10:20 +0300 Subject: [PATCH 2/2] chore(NumericTextBox): apply comments suggestions --- .../numerictextbox-disable-arrows.md | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/knowledge-base/numerictextbox-disable-arrows.md b/knowledge-base/numerictextbox-disable-arrows.md index 25f1b5e59f..b386ecd683 100644 --- a/knowledge-base/numerictextbox-disable-arrows.md +++ b/knowledge-base/numerictextbox-disable-arrows.md @@ -1,5 +1,5 @@ --- -title: Disabling NumericTextBox Arrows at Min or Max Value in Blazor +title: Disable NumericTextBox Arrows at Min or Max Value in Blazor 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. type: how-to page_title: How to Disable NumericTextBox Arrows on Min or Max Value in Blazor @@ -22,7 +22,7 @@ ticketid: 1665216 ## Description -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. +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. This KB article answers the following questions: @@ -31,10 +31,12 @@ This KB article answers the following questions: ## Solution -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. +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. 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. +>caption The Min and Max values should not match the default minimum and maximum values of the Value type. + ````CSHTML - @code { - private int theValue { get; set; } = 3; - private int minValue { get; set; } = 1; - private int maxValue { get; set; } = 10; + private int NumericValue { get; set; } = 3; + private int MinValue { get; set; } = 1; + private int MaxValue { get; set; } = 10; - private string numericClass => $"disable-arrows {(theValue == maxValue ? "disable-increase" : "")} {(theValue == minValue ? "disable-decrease" : "")}"; + private string NumericClass => $"{(NumericValue == MaxValue ? "disable-increase" : "")} {(NumericValue == MinValue ? "disable-decrease" : "")}"; } ````