diff --git a/components/button/events.md b/components/button/events.md index 85cc89a03c..0f87702e50 100644 --- a/components/button/events.md +++ b/components/button/events.md @@ -22,29 +22,10 @@ It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/d >caption Handle the button click -````RAZOR -@result -
-@moreInfo - -
-Click me! - -@code { - string result; - string moreInfo; - - async Task OnClickHandler(MouseEventArgs args) - { - result = "Button was clicked at: " + DateTime.Now.ToString(); - moreInfo = "Ctrl was pressed when clicked: " + args.CtrlKey; - } -} -```` + @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) - ## See Also * [Telerik UI for Blazor Button Overview](slug:components/button/overview) diff --git a/components/button/overview.md b/components/button/overview.md index 45ae3a1e9b..7b8a0722f4 100644 --- a/components/button/overview.md +++ b/components/button/overview.md @@ -24,20 +24,7 @@ The Blazor Button provides a variety of styling options through the [built-in th >caption Basic Blazor Button with `OnClick` event handler -````RAZOR -@result -
-Hello! - -@code { - private string result; - - private async Task OnClickHandler() - { - result = DateTime.Now.ToString(); - } -} -```` + ## Icons @@ -86,12 +73,10 @@ Add a reference to the component instance to use the [Button methods](slug:Teler | --- | --- | | `FocusAsync` | Focuses the Blazor Button component. Always call with `await`. @[template](/_contentTemplates/common/inputs.md#focus-kb) | -````RAZOR +````RAZOR.skip-repl Hello! @code { - private Telerik.Blazor.Components.TelerikButton ButtonRef { get; set; } - protected override async Task OnAfterRenderAsync(bool firstRender) { await ButtonRef.FocusAsync(); @@ -104,7 +89,6 @@ Add a reference to the component instance to use the [Button methods](slug:Teler ## Next Steps * [Styling the Blazor Button](slug:button-styling) - * [Using Button Icons](slug:button-icons) diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md index 734da0ac2b..7c6c76cc5c 100644 --- a/components/multiselect/overview.md +++ b/components/multiselect/overview.md @@ -23,57 +23,7 @@ The Blaz >caption Basic Blazor MultiSelect two-way value binding, main features, and simple [data binding](slug:multiselect-databind) -````RAZOR - - - -@if (MultiSelectValues.Count > 0) -{ - -} -@code { - private List Countries { get; set; } = new(); - private List MultiSelectValues { get; set; } = new(); - - protected override void OnInitialized() - { - Countries.Add(new(1, "Albania")); - Countries.Add(new(2, "Bosnia and Herzegovina")); - Countries.Add(new(3, "Bulgaria")); - Countries.Add(new(4, "Croatia")); - Countries.Add(new(5, "Greece")); - Countries.Add(new(6, "Kosovo")); - Countries.Add(new(7, "Montenegro")); - Countries.Add(new(8, "Romania")); - Countries.Add(new(9, "Serbia")); - Countries.Add(new(10, "Slovenia")); - Countries.Add(new(11, "Turkey")); - } - - public class Country - { - public int Id { get; set; } - public string Name { get; set; } = string.Empty; - - public Country(int id, string name) - { - Id = id; - Name = name; - } - } -} -```` + ## Data Binding @@ -152,25 +102,13 @@ The following parameters enable you to customize the [appearance](slug:multisele The MultiSelect exposes settings for its dropdown (popup). To configure the options, declare a `` tag inside a `` tag: -````RAZOR +````RAZOR.skip-repl + @bind-Value="@SelectedItems"> -@code { - private List MultiSelectData { get; set; } = Enumerable.Range(1, 50) - .Select(x => { return $"Item {x} {(char)Random.Shared.Next(65, 91)}{(char)Random.Shared.Next(65, 91)}"; }) - .ToList(); - - private List SelectedItems { get; set; } = new List(); -} ```` The MultiSelect provides the following popup settings: @@ -186,26 +124,15 @@ Add a reference to the component instance to use the [MultiSelect's methods](slu @[template](/_contentTemplates/dropdowns/methods.md#methods-list) -````RAZOR - +````RAZOR.skip-repl + Open Popup @code { - private TelerikMultiSelect MultiSelectRef { get; set; } - - private List MultiSelectValue { get; set; } - - private List MultiSelectData { get; set; } = new List { "first", "second", "third" }; - private void OpenPopup() { MultiSelectRef.Open(); - - MultiSelectValue = new List() { MultiSelectData.First() }; MultiSelectRef.Refresh(); } diff --git a/components/numerictextbox/overview.md b/components/numerictextbox/overview.md index a91bde73ab..9babb7c1c8 100644 --- a/components/numerictextbox/overview.md +++ b/components/numerictextbox/overview.md @@ -18,17 +18,9 @@ The 1. Bind a numeric data type to the component 1. Optionally, set custom `Format`, `Min`, `Max` and `Step` values ->caption Basic numeric text box with its key features +>caption Basic NumericTextBox with its key features -````RAZOR -The new value is: @theValue - - - -@code { - private decimal theValue { get; set; } = 1.234m; -} -```` + The Numeric TextBox component is generic, meaning that it takes the type of its value parameter as an argument. It can take `int`, `long`, `float`, `double` and `decimal` values. Therefore, the values for the `Min`, `Max` and `Step` properties must be of the same type as the `Value`, and the `ValueChanged` handler must also accommodate the corresponding value type. @@ -48,33 +40,7 @@ The Blazor Numeric TextBox allows you to define your desired custom format throu >caption Using custom format strings with the Blazor Numeric TextBox -````RAZOR -@Weight -
- -
-@code{ - decimal Weight { get; set; } = 3.456789m; -} - -@Rent -
- -
-@code{ - decimal Rent { get; set; } = 4567.89m; - string RentFormat { get; set; } = System.Globalization.NumberFormatInfo.CurrentInfo.CurrencySymbol + "#.00 a year"; -} - -@Units -
- - -@code{ - int Units { get; set; } = 12; - string UnitsFormat { get; set; } = "# unit(s)"; -} -```` + ## Numeric TextBox Parameters @@ -117,20 +83,12 @@ The following parameters enable you to customize the [appearance](slug:numericte The Numeric TextBox has a `FocusAsync` method that enables programmatic focus. To use it, obtain a reference to the component instance through `@ref`. @[template](/_contentTemplates/common/inputs.md#focus-kb) -````RAZOR -Focus TextBox +````RAZOR.skip-repl + - +Focus TextBox @code { - //determines the type of the component - private decimal DecimalValue { get; set; } - - //the Value type determines the type of the reference - private TelerikNumericTextBox NumericTextBoxRef { get; set; } - async Task FocusTextBox() { await NumericTextBoxRef.FocusAsync();