diff --git a/components/dialog/integration.md b/components/dialog/integration.md index d0ab313db3..1f627edfdc 100644 --- a/components/dialog/integration.md +++ b/components/dialog/integration.md @@ -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 @@ -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 ``. +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 - + - + - - - + + + + @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; } } } -```` \ No newline at end of file +````