Skip to content

Add live examples #3147

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 5, 2025
Merged

Add live examples #3147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13e7518
chore(Multiselect): add live example to overview page
Tsvetomir-Hr Jul 30, 2025
be6377f
chore(Button): add live examples to overview and events pages
Tsvetomir-Hr Jul 30, 2025
cf12362
chore(NumericTextBox): add live examples to overview page
Tsvetomir-Hr Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 1 addition & 20 deletions components/button/events.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,29 +22,10 @@ It receives argument of type [MouseEventArgs](https://docs.microsoft.com/en-us/d

>caption Handle the button click

````RAZOR
@result
<br />
@moreInfo

<br />
<TelerikButton OnClick="@OnClickHandler">Click me!</TelerikButton>

@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;
}
}
````
<demo metaUrl="client/button/events/" height="200"></demo>

@[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async)


## See Also

* [Telerik UI for Blazor Button Overview](slug:components/button/overview)
20 changes: 2 additions & 18 deletions components/button/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<br />
<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>

@code {
private string result;

private async Task OnClickHandler()
{
result = DateTime.Now.ToString();
}
}
````
<demo metaUrl="client/button/overview/" height="200"></demo>

## Icons

Expand Down Expand Up @@ -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
<TelerikButton @ref="ButtonRef">Hello!</TelerikButton>

@code {
private Telerik.Blazor.Components.TelerikButton ButtonRef { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
await ButtonRef.FocusAsync();
Expand All @@ -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)


Expand Down
83 changes: 5 additions & 78 deletions components/multiselect/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,57 +23,7 @@ The <a href="https://www.telerik.com/blazor-ui/multiselect" target="_blank">Blaz

>caption Basic Blazor MultiSelect two-way value binding, main features, and simple [data binding](slug:multiselect-databind)

````RAZOR
<TelerikMultiSelect Data="@Countries"
@bind-Value="@MultiSelectValues"
TextField="@nameof(Country.Name)"
ValueField="@nameof(Country.Id)"
AutoClose="false"
Placeholder="Select Balkan Countries"
ShowClearButton="true">
</TelerikMultiSelect>

@if (MultiSelectValues.Count > 0)
{
<ul>
@foreach (int countryId in MultiSelectValues)
{
<li><code>Id</code> @countryId, <code>Name</code> @Countries.First(x => x.Id == countryId).Name</li>
}
</ul>
}
@code {
private List<Country> Countries { get; set; } = new();
private List<int> 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;
}
}
}
````
<demo metaUrl="client/multiselect/overview/" height="300"></demo>

## Data Binding

Expand Down Expand Up @@ -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 `<MultiSelectPopupSettings>` tag inside a `<MultiSelectSettings>` tag:

````RAZOR
````RAZOR.skip-repl
<TelerikMultiSelect Data="@MultiSelectData"
@bind-Value="@SelectedItems"
Filterable="true"
FilterOperator="@StringFilterOperator.Contains"
Placeholder="Filter by digit or letter"
AutoClose="false"
Width="240px">
@bind-Value="@SelectedItems">
<MultiSelectSettings>
<MultiSelectPopupSettings Height="auto" MaxHeight="200px" MinHeight="75px" />
</MultiSelectSettings>
</TelerikMultiSelect>
@code {
private List<string> 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<string> SelectedItems { get; set; } = new List<string>();
}
````

The MultiSelect provides the following popup settings:
Expand All @@ -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
<TelerikMultiSelect @ref="@MultiSelectRef"
Data="@MultiSelectData"
@bind-Value="@MultiSelectValue"
Width="300px" />
````RAZOR.skip-repl
<TelerikMultiSelect @ref="@MultiSelectRef" .../>

<TelerikButton OnClick="@OpenPopup">Open Popup</TelerikButton>

@code {
private TelerikMultiSelect<string, string> MultiSelectRef { get; set; }

private List<string> MultiSelectValue { get; set; }

private List<string> MultiSelectData { get; set; } = new List<string> { "first", "second", "third" };

private void OpenPopup()
{
MultiSelectRef.Open();

MultiSelectValue = new List<string>() { MultiSelectData.First() };

MultiSelectRef.Refresh();
}
Expand Down
54 changes: 6 additions & 48 deletions components/numerictextbox/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,9 @@ The <a href="https://www.telerik.com/blazor-ui/numeric-textbox" target="_blank">
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

<TelerikNumericTextBox Format="C" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@theValue"></TelerikNumericTextBox>

@code {
private decimal theValue { get; set; } = 1.234m;
}
````
<demo metaUrl="client/numerictextbox/overview/" height="250"></demo>

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.

Expand All @@ -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
<br />
<TelerikNumericTextBox Format="#.00 kg" Max="5m" Min="-5m" Step="0.33m" @bind-Value="@Weight"></TelerikNumericTextBox>
<br />
@code{
decimal Weight { get; set; } = 3.456789m;
}

@Rent
<br />
<TelerikNumericTextBox Decimals="2" Format="@RentFormat" @bind-Value="@Rent"></TelerikNumericTextBox>
<br />
@code{
decimal Rent { get; set; } = 4567.89m;
string RentFormat { get; set; } = System.Globalization.NumberFormatInfo.CurrentInfo.CurrencySymbol + "#.00 a year";
}

@Units
<br />
<TelerikNumericTextBox Decimals="0" Format="@UnitsFormat" @bind-Value="@Units"></TelerikNumericTextBox>

@code{
int Units { get; set; } = 12;
string UnitsFormat { get; set; } = "# unit(s)";
}
````
<demo metaUrl="client/numerictextbox/format-string/" height="400"></demo>

## Numeric TextBox Parameters

Expand Down Expand Up @@ -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
<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>
````RAZOR.skip-repl
<TelerikNumericTextBox @ref="@NumericTextBoxRef" .../>

<TelerikNumericTextBox @ref="@NumericTextBoxRef"
@bind-Value="DecimalValue"
Width="200px" />
<TelerikButton OnClick="@FocusTextBox">Focus TextBox</TelerikButton>

@code {
//determines the type of the component
private decimal DecimalValue { get; set; }

//the Value type determines the type of the reference
private TelerikNumericTextBox<decimal> NumericTextBoxRef { get; set; }

async Task FocusTextBox()
{
await NumericTextBoxRef.FocusAsync();
Expand Down