Skip to content

Commit b4f1ea9

Browse files
github-actions[bot]dimodi
github-actions[bot]
and
dimodi
authored
docs(numerictextbox): Add missing parameters and improve Reference info (#1157)
Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
1 parent 41f1d42 commit b4f1ea9

File tree

1 file changed

+37
-26
lines changed

1 file changed

+37
-26
lines changed

‎components/numerictextbox/overview.md

+37-26
Original file line numberDiff line numberDiff line change
@@ -72,49 +72,60 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu
7272
}
7373
````
7474

75-
## Parameters
75+
## Numeric Textbox Parameters
7676

7777
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
7878

79-
| Attribute | Type and Default Value | Description |
80-
|-----------|------|-------------|
81-
| `Arrows` | `bool`<br /> (`true`) | Whether to show the up/down spinner arrows (buttons). |
82-
|`DebounceDelay` | `int` <br/> 150 | Time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries.
83-
|`Decimals`|`int`|Specifies how many decimal places will be allowed while the user is typing a new value. Takes effect only while the input is focused. The default value is set from the specified culture.|
84-
|`Format`|`string`|The format with which the number is presented when the input is not focused. Read more in the [Standard Numeric Format Strings in .NET](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) article.|
85-
|`Id`|`string`|renders as the `id` attribute on the `<input />` element.|
86-
|`Max`|Numeric data type|the maximum decimal value the input can take. Must be of the same type as the `Value`.|
87-
|`Min`|Numeric data type|The minimum decimal value the input can take. Must be of the same type as the `Value`.|
88-
|`Placeholder`|`string`|maps to the `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to **nullable** value type and there is no value set. |
89-
|`Step`|Numeric data type|the decimal value of the step with which the value changes when the arrows are used. Must be of the same type as the `Value`.|
90-
|`Value`|`T` - expects numeric data type|Get/set the value of the input.|
91-
|`TabIndex`|`int?`|maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key.|
92-
|`ValidateOn`|`ValidationEvent` enum <br/> `ValidationEvent.Input` |Configures the event that will trigger validation (if validation is enabled). Read more at [Validastion Modes for Simple Inputs]({%slug common-features/input-validation%}#validation-modes-for-simple-inputs).|
79+
| Attribute | Type and Default&nbsp;Value | Description |
80+
| --- | --- | --- |
81+
| `Arrows` | `bool` <br /> (`true`) | Controls the display of the up/down spinner arrows (buttons). |
82+
| `Autocomplete` | `string` | The [`autocomplete` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) on the `<input />` element. |
83+
| `DebounceDelay` | `int` <br /> (`150`) | The time in milliseconds between the last typed symbol and the value update. Use it to balance between client-side performance and number of database queries. |
84+
| `Decimals` | `int` | The number of allowed decimal places during typing. Takes effect only while the input is focused. The default value depends on the culture. |
85+
| `Format` | `string` | The number format when the input is not focused. Read more at [Standard Numeric Format Strings in .NET](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings) |
86+
| `Id` | `string` | The `id` attribute on the `<input />` element. |
87+
| `InputMode` | `string` | The [`inputmode` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) on the `<input />` element. |
88+
| `Max` | numeric type | The maximum value the input can accept. Must match the `Value` type. |
89+
| `Min` | numeric type | The minimum value the input can accept. Must match the `Value` type. |
90+
| `Placeholder` | `string` | The `placeholder` attribute of the HTML element. The placeholder will appear if the component is bound to a **nullable** value type and there is no value set. |
91+
| `Step` | numeric type | The decimal value with which the value changes when using the arrows. Must maatch the `Value` type. |
92+
| `Value` | numeric type | The component value. |
93+
| `TabIndex` | `int?` | The `tabindex` attribute of the `<input />` element. Use it to customize the tabbing order on your page. |
94+
| `ValidateOn` | `ValidationEvent` enum <br/> (`Input`) | The event that will trigger validation (if validation is enabled). Read more at [Validastion Modes for Simple Inputs]({%slug common-features/input-validation%}#validation-modes-for-simple-inputs). |
9395

9496
### Styling and Appearance
9597

9698
The following parameters enable you to customize the appearance of the Blazor Numeric TextBox:
9799

98100
| Attribute | Type and Default Value | Description |
99-
|----------|----------|----------|
100-
|`Class`| `string` |The CSS class that will be rendered on the topmost wrapping elementof teh component.|
101-
|`Width`|`string`|the width of the component. See the [Dimensions]({%slug common-features/dimensions%}) article.|
101+
| --- | --- | --- |
102+
| `Class` | `string` | The CSS class that will be rendered on the `<span class="k-numerictextbox">` element. |
103+
| `Width` | `string` | The width of the component in [any supported CSS unit]({%slug common-features/dimensions%}). |
102104

103-
You can find more options for customizing the Numeric TextBox styling in the [Appearance article]({%slug numerictextbox-appearance%}).
105+
Find more options for customizing the Numeric TextBox styling in the [Appearance article]({%slug numerictextbox-appearance%}).
104106

105107
## Component Reference
106108

109+
The NumericTextBox has a `FocusAsync` method that enables programmatic focus. To use it, obtain reference to the component instance.
110+
107111
````CSHTML
108-
@using Telerik.Blazor.Components
112+
<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>
109113
110-
<TelerikNumericTextBox @ref="myNumericTextboxRef" @bind-Value="CurrentValue"></TelerikNumericTextBox>
114+
<TelerikNumericTextBox @ref="@NumericTextBoxRef"
115+
@bind-Value="DecimalValue"
116+
Width="200px" />
111117
112118
@code {
113-
//determines the type of the component
114-
private int CurrentValue { get; set; }
115-
116-
//the type of the value variable determines the type of the reference
117-
private Telerik.Blazor.Components.TelerikNumericTextBox<int> myNumericTextboxRef;
119+
//determines the type of the component
120+
private decimal DecimalValue { get; set; }
121+
122+
//the Value type determines the type of the reference
123+
private TelerikNumericTextBox<decimal> NumericTextBoxRef { get; set; }
124+
125+
async Task FocusTextBox()
126+
{
127+
await NumericTextBoxRef.FocusAsync();
128+
}
118129
}
119130
````
120131

0 commit comments

Comments
 (0)