Integrating Components into the Blazor Dialog

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 to Refresh to reflect UI changes.

This article contains the following examples:

• Checkbox integration in Dialog
• Filter integration in Dialog

CheckBox in a Dialog

To use a CheckBox component in the Dialog:

1. Include the Telerik CheckBox as DialogContent.
2. Set the Value parameter of the CheckBox with two-way binding.
3. Invoke the Dialog Refresh method in the CheckBox OnChange 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:

1. Include the Telerik Filter inside <DialogContent>.
2. Set the Value parameter of the Filter with one-way binding.
3. Invoke the Dialog Refresh method in the Filter OnUpdate 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; }
    }
}