integration.md

title	page_title	description	slug	tags	published	position
Integration	Dialog Integration	Learn how to integrate Blazor components like the Checkbox and the Filter into the Blazor Dialog and explore the practical sample code.	dialog-integration	telerik,blazor,dialog,integration	true	9

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.

caption 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.

caption 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; }
    }
}