docs(Dialog): Update integration example with Filter

Author: dimodi

components/dialog/integration.md

@@ -21,11 +21,11 @@ This article contains the following examples:
 
 ## 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. 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
 
@@ -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; }
     }
 }
-````
+````