Skip to content

docs(Form): add form and dialog live examples #3142

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 1 commit into from
Aug 4, 2025
Merged

docs(Form): add form and dialog live examples #3142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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/dialog/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,26 +28,7 @@ The Dialog component and its [predefined options](slug:dialog-predefined) aim to

>caption A basic configuration of the Telerik Dialog.

````RAZOR
@* An example of the Dialog basic implementation. *@

<TelerikDialog @bind-Visible="@Visible"
Title="@Title">
<DialogContent>
A new version of <strong>Telerik UI for Blazor</strong> is available. Would you like to download and install it now?
</DialogContent>
<DialogButtons>
<TelerikButton OnClick="@(() => { Visible = false; })">Skip this version</TelerikButton>
<TelerikButton OnClick="@(() => { Visible = false; })">Remind me later</TelerikButton>
<TelerikButton OnClick="@(() => { Visible = false; })" ThemeColor="primary">Install update</TelerikButton>
</DialogButtons>
</TelerikDialog>

@code {
private bool Visible { get; set; } = true;
private string Title { get; set; } = "Software Update";
}
````
<demo metaUrl="client/dialog/overview/" height="400"></demo>

## Predefined Dialogs

Expand Down
79 changes: 2 additions & 77 deletions components/form/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,84 +21,9 @@ The <a href = "https://demos.telerik.com/blazor-ui/form/overview" target="_blank
* Set the `EditContext` parameter to an [`EditContext` instance](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.editcontext). The object instance from which the `EditContext` is created is important, especially when using [FormItem templates](slug:form-formitems-template) and [validation messages](slug:form-validation).
1. (optional) To enable [form validation](slug:form-validation), add the `<FormValidation>` tag. Define a validator component inside, for example the [`DataAnnotationsValidator`](https://learn.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.components.forms.dataannotationsvalidator) that is part of .NET Core.

<div class="skip-repl"></div>
````RAZOR Model
@* Provide a model to the Telerik Form *@
>caption Basic Blazor Form

@using System.ComponentModel.DataAnnotations

<TelerikForm Model="@PersonModel">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
</TelerikForm>

@code {
private Person PersonModel { get; set; } = new Person();

public class Person
{
[Editable(false)]
public int Id { get; set; }

[Required]
[MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
[Display(Name = "First Name")]
public string FirstName { get; set; }

[Required]
[MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
[Display(Name = "Last Name")]
public string LastName { get; set; }

[Required]
[Display(Name = "Date of Birth")]
public DateTime? DOB { get; set; }
}
}
````
````RAZOR EditContext
@* Provide an EditContext to the TelerikForm *@

@using System.ComponentModel.DataAnnotations

<TelerikForm EditContext="@PersonEditContext">
<FormValidation>
<DataAnnotationsValidator />
</FormValidation>
</TelerikForm>

@code {
private EditContext PersonEditContext { get; set; }

private Person PersonModel = new Person();

protected override void OnInitialized()
{
PersonEditContext = new EditContext(PersonModel);
}

public class Person
{
[Editable(false)]
public int Id { get; set; }

[Required]
[MaxLength(20, ErrorMessage = "The first name should be maximum 20 characters long")]
[Display(Name = "First Name")]
public string FirstName { get; set; }

[Required]
[MaxLength(25, ErrorMessage = "The last name should be maximum 25 characters long")]
[Display(Name = "Last Name")]
public string LastName { get; set; }

[Required]
[Display(Name = "Date of Birth")]
public DateTime? DOB { get; set; }
}
}
````
<demo metaUrl="client/form/overview/" height="450"></demo>

## Form Items

Expand Down