New to Telerik UI for Blazor? Start a free 30-day trial
Integrating Components into the Blazor Dialog
Updated on Jul 25, 2025
A common application requirement is to display other Blazor components in the Blazor Dialog. You can achieve this by placing them inside the DialogContent
.
The two-way binding for the parameters of the components nested in the
DialogContent
may not work as expected. The Dialog needs toRefresh
to reflect UI changes.
This article contains the following examples:
CheckBox in a Dialog
To use a CheckBox component in the Dialog:
- Include the Telerik CheckBox as
DialogContent
. - Set the
Value
parameter of the CheckBox with two-way binding. - Invoke the Dialog
Refresh
method in the CheckBoxOnChange
event.
Using CheckBox in Dialog
@using Telerik.DataSource
<TelerikDialog @ref="DialogRef" Visible="true">
<DialogContent>
<TelerikCheckBox Id="MyCheckBox" @bind-Value="@IsSelected" OnChange="@OnCheckBoxValueChanged" />
<label for="MyCheckBox">@(IsSelected ? "Selected" : "Not selected")</label>
</DialogContent>
</TelerikDialog>
@code {
private bool IsSelected { get; set; }
private TelerikDialog DialogRef { get; set; }
private void OnCheckBoxValueChanged()
{
DialogRef.Refresh();
}
}
Filter in a Dialog
To use a Filter component in the Dialog:
- Include the Telerik Filter inside
<DialogContent>
. - Set the
Value
parameter of the Filter with one-way binding. - Invoke the Dialog
Refresh
method in the FilterOnUpdate
event.
Using Filter in Dialog
@using Telerik.DataSource
<TelerikDialog @ref="DialogRef" Visible="true" Width="66vw" Height="66vh">
<DialogContent>
<TelerikFilter Value="@FilterValue" OnUpdate="@OnFilterUpdate">
<FilterFields>
<FilterField Name="@(nameof(Product.Name))" Type="@(typeof(string))" />
<FilterField Name="@(nameof(Product.Price))" Type="@(typeof(decimal))" />
<FilterField Name="@(nameof(Product.Quantity))" Type="@(typeof(int))" />
<FilterField Name="@(nameof(Product.Discontinued))" Type="@(typeof(bool))" />
</FilterFields>
</TelerikFilter>
</DialogContent>
</TelerikDialog>
@code {
private TelerikDialog? DialogRef { get; set; }
private CompositeFilterDescriptor FilterValue { get; set; } = new();
private void OnFilterUpdate()
{
DialogRef?.Refresh();
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public bool Discontinued { get; set; }
}
}