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 integrate the Checkbox in the Dialog:

1. Include the Telerik Checkbox as DialogContent.
2. Set the Value parameter of the Checkbox via two-way binding.
3. Invoke the Dialog's Refresh method in the OnChange event of the Checkbox.

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 integrate the Filter in the Dialog:

1. Include the Telerik Filter as DialogContent.
2. Set the Value parameter of the Filter via one-way binding.
3. Invoke the Dialog's Refresh method in the ValueChanged event of the Filter.
4. Update the Value parameter of the Filter manually in the ValueChanged event of the Filter.

Using Filter in Dialog

@using Telerik.DataSource

<TelerikDialog @ref="DialogRef" Visible="true">
    <DialogContent>
        <TelerikFilter Value="@Value" ValueChanged="@OnValueChanged">
            <FilterFields>
                <FilterField Name="@(nameof(Person.EmployeeId))" Type="@(typeof(int))" Label="Id"></FilterField>
                <FilterField Name="@(nameof(Person.Name))" Type="@(typeof(string))" Label="First Name"></FilterField>
                <FilterField Name="@(nameof(Person.AgeInYears))" Type="@(typeof(int))" Label="Age"></FilterField>
            </FilterFields>
        </TelerikFilter>
    </DialogContent>
</TelerikDialog>

@code {
    private TelerikDialog DialogRef { get; set; }

    private TelerikFilter FilterRef { get; set; }

    private CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor();

    private void OnValueChanged(CompositeFilterDescriptor filter)
    {
        Value = filter;
        DialogRef.Refresh();
    }

    public class Person
    {
        public int EmployeeId { get; set; }

        public string Name { get; set; }

        public int AgeInYears { get; set; }
    }
}