Skip to content

docs(Dialog): Replace deprecated Filter event in the integration example #3131

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.

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 2 commits into from
Jul 25, 2025
Merged
Changes from all commits
Commits
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
57 changes: 27 additions & 30 deletions components/dialog/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ This article contains the following examples:
* [Checkbox integration in Dialog](#checkbox-in-a-dialog)
* [Filter integration in Dialog](#filter-in-a-dialog)

## Checkbox in a Dialog
## CheckBox in a Dialog

To integrate the Checkbox in the Dialog:
To use a CheckBox component in the Dialog:

1. Include the [Telerik Checkbox](slug:checkbox-overview) as `DialogContent`.
1. Set the [`Value` parameter](slug:checkbox-overview#checkbox-parameters) of the Checkbox via two-way binding.
1. Invoke the Dialog's `Refresh` method in the [`OnChange` event](slug:checkbox-events#onchange) of the Checkbox.
1. Include the [Telerik CheckBox](slug:checkbox-overview) as `DialogContent`.
1. Set the [`Value` parameter](slug:checkbox-overview#checkbox-parameters) of the CheckBox with two-way binding.
1. Invoke the [Dialog `Refresh` method](slug:dialog-overview#dialog-reference-and-methods) in the [CheckBox `OnChange` event](slug:checkbox-events#onchange).

>caption Using Checkbox in Dialog
>caption Using CheckBox in Dialog

````RAZOR
@using Telerik.DataSource
Expand All @@ -53,50 +53,47 @@ To integrate the Checkbox in the Dialog:

## Filter in a Dialog

To integrate the Filter in the Dialog:
To use a Filter component in the Dialog:

1. Include the [Telerik Filter](slug:filter-overview) as `DialogContent`.
1. Set the [`Value` parameter](slug:filter-overview#filter-parameters) of the Filter via one-way binding.
1. Invoke the Dialog's `Refresh` method in the [`ValueChanged` event](slug:filter-events#valuechanged) of the Filter.
1. Update the `Value` parameter of the Filter manually in the `ValueChanged` event of the Filter.
1. Include the [Telerik Filter](slug:filter-overview) inside `<DialogContent>`.
1. Set the [`Value` parameter](slug:filter-overview#filter-parameters) of the Filter with one-way binding.
1. Invoke the [Dialog `Refresh` method](slug:dialog-overview#dialog-reference-and-methods) in the [Filter `OnUpdate` event](slug:filter-events#onupdate).

>caption Using Filter in Dialog

````RAZOR
@using Telerik.DataSource

<TelerikDialog @ref="DialogRef" Visible="true">
<TelerikDialog @ref="DialogRef" Visible="true" Width="66vw" Height="66vh">
<DialogContent>
<TelerikFilter Value="@Value" ValueChanged="@OnValueChanged">
<TelerikFilter Value="@FilterValue" OnUpdate="@OnFilterUpdate">
<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>
<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 TelerikDialog? DialogRef { get; set; }

private TelerikFilter FilterRef { get; set; }
private CompositeFilterDescriptor FilterValue { get; set; } = new();

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

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

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

public string Name { get; set; }

public int AgeInYears { get; set; }
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; }
}
}
````
````
Loading