diff --git a/components/filter/events.md b/components/filter/events.md index a11a675e6e..567680191b 100644 --- a/components/filter/events.md +++ b/components/filter/events.md @@ -13,7 +13,6 @@ position: 11 This article explains the available events for the Telerik Filter for Blazor: * [OnUpdate](#onupdate) -* [ValueChanged](#valuechanged) ## OnUpdate @@ -66,95 +65,6 @@ The `OnUpdate` event fires when the user changes the Filter `Value`. The compone } ```` -## ValueChanged - -The `ValueChanged` event fires when the value has changed. Its event handler receives the updated `CompositeFilterDescriptor` as an argument. - -> The `ValueChanged` event is deprecated and will be removed in future versions. Use the `OnUpdate` event instead. - ->caption Handle ValueChanged - -````RAZOR -@* This code snippet showcases an example of how to handle the ValueChanged event. *@ - -@using Telerik.DataSource - - - - - - - - - - - -
- ValueChanged triggered count: @TriggeredValueChangedCount - -
- List of applied filters: - @compositeFilterDescriptorFragment(Value) -
-
- -@code { - public CompositeFilterDescriptor Value { get; set; } = new CompositeFilterDescriptor(); - public int TriggeredValueChangedCount { get; set; } - - private void OnValueChanged(CompositeFilterDescriptor filter) - { - Value = filter; - TriggeredValueChangedCount++; - } - - static RenderFragment compositeFilterDescriptorFragment = (cfd) => - @ - @{ -
CompositeFilterDescriptor info: Logical Operator: @cfd.LogicalOperator
- - FilterDescriptor currentFilterDescriptor; - CompositeFilterDescriptor currentCompositeDescriptor; - - @foreach (var item in cfd.FilterDescriptors) - { - if (item is CompositeFilterDescriptor) - { - currentCompositeDescriptor = item as CompositeFilterDescriptor; - @compositeFilterDescriptorFragment(currentCompositeDescriptor); - } - else - { - currentFilterDescriptor = item as FilterDescriptor; - @filterDescriptorFragment(currentFilterDescriptor) - } - } - } -
; - - static RenderFragment filterDescriptorFragment = (fd) - => @
FilterDescriptor info: Member: @fd.Member Type: @fd.MemberType Value: @fd.Value
; - public class Person - { - public int EmployeeId { get; set; } - - public string Name { get; set; } - - public int AgeInYears { get; set; } - - public bool IsOutOfOffice { get; set; } - - public DateTime HireDate { get; set; } - } -} - - -```` - ## See Also * [Live Demo: Filter](https://demos.telerik.com/blazor-ui/filter/overview) \ No newline at end of file diff --git a/components/filter/fields/templates.md b/components/filter/fields/templates.md index b29fa9b88d..d02862886b 100644 --- a/components/filter/fields/templates.md +++ b/components/filter/fields/templates.md @@ -33,7 +33,7 @@ To use the Filter Field value template, add a `` tag inside the [ @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -49,7 +49,7 @@ To use the Filter Field value template, add a `` tag inside the [ + ValueChanged="@((decimal? value) => NumericValueChanged(context.FilterDescriptor, value))"> @@ -76,7 +76,7 @@ To use the Filter Field value template, add a `` tag inside the [ private CompositeFilterDescriptor FilterValue { get; set; } = new(); - private List Suggestions { get; set; } = new () { "Pasta", "Burger", "Pizza", "Kebab", "Steak", "Ice Cream" }; + private List Suggestions { get; set; } = new() { "Pasta", "Burger", "Pizza", "Kebab", "Steak", "Ice Cream" }; private void OnFilterValueChanged(FilterDescriptor fd, string value) { @@ -89,10 +89,9 @@ To use the Filter Field value template, add a `` tag inside the [ fd.Value = value; ProcessGridData(FilterValue); } - - private void OnValueChanged(CompositeFilterDescriptor value) + + private void OnUpdate() { - FilterValue = value; ProcessGridData(FilterValue); } diff --git a/components/filter/integration.md b/components/filter/integration.md index 2d60a16cb7..638a44bd7d 100644 --- a/components/filter/integration.md +++ b/components/filter/integration.md @@ -25,7 +25,7 @@ This article contains the following sections: **To integrate the Filter with the Telerik Grid, you need to:** -1. Set the Value parameter of the Filter via [one-way](slug:filter-events#valuechanged) or two-way binding. If you want to filter at the moment of change, use Filter with a one-way bound value. +1. Set the Value parameter of the Filter via [one-way](slug:filter-events#onupdate) or two-way binding. If you want to filter at the moment of change, use Filter with a one-way bound value. 2. Update the Grid data based on the Filter value. >caption Filter with two-way bound value in Grid @@ -124,7 +124,7 @@ This article contains the following sections: @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -140,13 +140,14 @@ This article contains the following sections: @code { + private CompositeFilterDescriptor FilterValue { get; set; } = new CompositeFilterDescriptor(); public static List InitialData { get; set; } = new List(); public List FlatData { get; set; } public IEnumerable ExpandedItems { get; set; } = new List(); - private void OnValueChanged(CompositeFilterDescriptor filter) + private void OnUpdate() { - var dataSourceRequest = new DataSourceRequest { Filters = new List { filter } }; + var dataSourceRequest = new DataSourceRequest { Filters = new List { FilterValue } }; var datasourceResult = InitialData.ToDataSourceResult(dataSourceRequest); var filteredList = datasourceResult.Data.Cast().ToList(); @@ -157,7 +158,7 @@ This article contains the following sections: var currentItem = item; FlatData.Add(currentItem); - while(currentItem.ParentIdValue != null) + while (currentItem.ParentIdValue != null) { var parent = InitialData.First(p => p.Id == currentItem.ParentIdValue); @@ -178,7 +179,7 @@ This article contains the following sections: public string Text { get; set; } public int? ParentIdValue { get; set; } public bool HasChildren { get; set; } - public ISvgIcon Icon { get; set; } + public ISvgIcon Icon { get; set; } } protected override void OnInitialized() @@ -192,63 +193,63 @@ This article contains the following sections: List items = new List(); items.Add(new TreeItem() - { - Id = 1, - Text = "Project", - ParentIdValue = null, - HasChildren = true, - Icon = SvgIcon.Folder - }); + { + Id = 1, + Text = "Project", + ParentIdValue = null, + HasChildren = true, + Icon = SvgIcon.Folder + }); items.Add(new TreeItem() - { - Id = 2, - Text = "Design", - ParentIdValue = 1, - HasChildren = true, - Icon = SvgIcon.Brush - }); + { + Id = 2, + Text = "Design", + ParentIdValue = 1, + HasChildren = true, + Icon = SvgIcon.Brush + }); items.Add(new TreeItem() - { - Id = 3, - Text = "Implementation", - ParentIdValue = 1, - HasChildren = true, - Icon = SvgIcon.Folder - }); + { + Id = 3, + Text = "Implementation", + ParentIdValue = 1, + HasChildren = true, + Icon = SvgIcon.Folder + }); items.Add(new TreeItem() - { - Id = 4, - Text = "site.psd", - ParentIdValue = 2, - HasChildren = false, - Icon = SvgIcon.FilePsd - }); + { + Id = 4, + Text = "site.psd", + ParentIdValue = 2, + HasChildren = false, + Icon = SvgIcon.FilePsd + }); items.Add(new TreeItem() - { - Id = 5, - Text = "index.js", - ParentIdValue = 3, - HasChildren = false, - Icon = SvgIcon.Js - }); + { + Id = 5, + Text = "index.js", + ParentIdValue = 3, + HasChildren = false, + Icon = SvgIcon.Js + }); items.Add(new TreeItem() - { - Id = 6, - Text = "index.html", - ParentIdValue = 3, - HasChildren = false, - Icon = SvgIcon.Html5 - }); + { + Id = 6, + Text = "index.html", + ParentIdValue = 3, + HasChildren = false, + Icon = SvgIcon.Html5 + }); items.Add(new TreeItem() - { - Id = 7, - Text = "styles.css", - ParentIdValue = 3, - HasChildren = false, - Icon = SvgIcon.Css - }); + { + Id = 7, + Text = "styles.css", + ParentIdValue = 3, + HasChildren = false, + Icon = SvgIcon.Css + }); InitialData = items; FlatData = InitialData; @@ -272,7 +273,7 @@ This article contains the following sections: @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -291,12 +292,13 @@ This article contains the following sections: @code { + private CompositeFilterDescriptor FilterValue { get; set; } = new CompositeFilterDescriptor(); public static List InitialData { get; set; } = new List(); public List Data { get; set; } - private void OnValueChanged(CompositeFilterDescriptor filter) + private void OnUpdate() { - var dataSourceRequest = new DataSourceRequest { Filters = new List { filter } }; + var dataSourceRequest = new DataSourceRequest { Filters = new List { FilterValue } }; var datasourceResult = InitialData.ToDataSourceResult(dataSourceRequest); var filteredList = datasourceResult.Data.Cast().ToList(); @@ -381,7 +383,7 @@ This article contains the following sections: @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -401,12 +403,13 @@ This article contains the following sections: -@code{ +@code { + private CompositeFilterDescriptor FilterValue { get; set; } = new CompositeFilterDescriptor(); List ListViewData { get; set; } = InitialData; - private void OnValueChanged(CompositeFilterDescriptor filter) + private void OnUpdate() { - var dataSourceRequest = new DataSourceRequest { Filters = new List{ filter } }; + var dataSourceRequest = new DataSourceRequest { Filters = new List { FilterValue } }; var datasourceResult = InitialData.ToDataSourceResult(dataSourceRequest); @@ -458,7 +461,7 @@ This article contains the following sections: @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -479,7 +482,7 @@ This article contains the following sections: @code { TelerikChart myChartRef; - + private CompositeFilterDescriptor FilterValue { get; set; } = new CompositeFilterDescriptor(); public static List InitialData { get; set; } = new List(); public List ChartData { get; set; } @@ -490,9 +493,9 @@ This article contains the following sections: public string Color { get; set; } } - private void OnValueChanged(CompositeFilterDescriptor filter) + private void OnUpdate() { - var dataSourceRequest = new DataSourceRequest { Filters = new List { filter } }; + var dataSourceRequest = new DataSourceRequest { Filters = new List { FilterValue } }; var datasourceResult = InitialData.ToDataSourceResult(dataSourceRequest); diff --git a/components/filter/overview.md b/components/filter/overview.md index 3ebe51c5e3..c983ec35f8 100644 --- a/components/filter/overview.md +++ b/components/filter/overview.md @@ -79,7 +79,7 @@ The Filter exposes methods for programmatic operation. To use them, define a ref @using Telerik.DataSource @using Telerik.DataSource.Extensions - + @@ -105,9 +105,8 @@ The Filter exposes methods for programmatic operation. To use them, define a ref private List InitialData { get; set; } = new(); - private void OnValueChanged(CompositeFilterDescriptor value) + private void OnUpdate() { - FilterValue = value; ProcessGridData(FilterValue); } @@ -127,7 +126,7 @@ The Filter exposes methods for programmatic operation. To use them, define a ref FilterValue.FilterDescriptors.Clear(); FilterValue.LogicalOperator = FilterCompositionLogicalOperator.Or; - FilterValue.FilterDescriptors = new FilterDescriptorCollection() + FilterValue.FilterDescriptors = new FilterDescriptorCollection() { new FilterDescriptor { @@ -168,11 +167,11 @@ The Filter exposes methods for programmatic operation. To use them, define a ref for (int i = 1; i <= 30; i++) { InitialData.Add(new Person - { - EmployeeId = i, - Name = "Name" + i, - HireDate = DateTime.Today.AddYears(-rnd.Next(1, 10)).AddMonths(-rnd.Next(0, 10)).AddDays(-rnd.Next(0, 10)) - }); + { + EmployeeId = i, + Name = "Name" + i, + HireDate = DateTime.Today.AddYears(-rnd.Next(1, 10)).AddMonths(-rnd.Next(0, 10)).AddDays(-rnd.Next(0, 10)) + }); } ProcessGridData(FilterValue); @@ -181,7 +180,7 @@ The Filter exposes methods for programmatic operation. To use them, define a ref public class Person { public int EmployeeId { get; set; } - public string Name { get; set; } + public string Name { get; set; } public DateTime HireDate { get; set; } } }