diff --git a/components/grid/filter/images/searchbox-filter-control.gif b/components/grid/filter/images/searchbox-filter-control.gif new file mode 100644 index 0000000000..a400429b44 Binary files /dev/null and b/components/grid/filter/images/searchbox-filter-control.gif differ diff --git a/components/grid/filter/searchbox.md b/components/grid/filter/searchbox.md index a3d684a67a..aa3b5e05f6 100644 --- a/components/grid/filter/searchbox.md +++ b/components/grid/filter/searchbox.md @@ -67,6 +67,87 @@ To enable the search box, add the `` tag in the ``. ![grid search box](images/search-box-overview.gif) +## Filter From Code + +You can set the Grid filters programmatically through the component [state]({%slug grid-state%}). + +@[template](/_contentTemplates/grid/state.md#initial-state) + +>caption The result from the code snippet below. + +![](images/searchbox-filter-control.gif) + +>caption Set programmatically Searchbox Filter. + +````Razor +@* This snippet shows how to set filtering state to the grid from your code. + Applies to the Searchbox filter *@ + +@using Telerik.DataSource; + +set filtering from code + + + + + + + + + + + + +@code { + public TelerikGrid Grid { get; set; } + + async Task SetGridFilter() + { + GridState desiredState = new GridState() + { + SearchFilter = CreateSearchFilter() + }; + + await Grid.SetState(desiredState); + } + + private IFilterDescriptor CreateSearchFilter() + { + var descriptor = new CompositeFilterDescriptor(); + var fields = new List() { "Name", "Address" }; + var searchValue = "name 10"; + descriptor.LogicalOperator = FilterCompositionLogicalOperator.Or; + + foreach (var field in fields) + { + var filter = new FilterDescriptor(field, FilterOperator.Contains, searchValue); + + filter.MemberType = typeof(string); + + descriptor.FilterDescriptors.Add(filter); + } + + return descriptor; + } + + public IEnumerable MyData = Enumerable.Range(1, 30).Select(x => new SampleData + { + Id = x, + Name = "name " + x, + Address = "address " + x % 5, + }); + + public class SampleData + { + public int Id { get; set; } + public string Name { get; set; } + public string Address { get; set; } + } +} + +```` + ## Customize the SearchBox The `GridSearchBox` component offers the following settings to customize its behavior: diff --git a/components/treelist/filter/images/searchbox-filter-control.gif b/components/treelist/filter/images/searchbox-filter-control.gif new file mode 100644 index 0000000000..852180b840 Binary files /dev/null and b/components/treelist/filter/images/searchbox-filter-control.gif differ diff --git a/components/treelist/filter/searchbox.md b/components/treelist/filter/searchbox.md index 3d505603a3..32fa05a446 100644 --- a/components/treelist/filter/searchbox.md +++ b/components/treelist/filter/searchbox.md @@ -113,6 +113,146 @@ To enable the search box, add the `` tag in the `caption The result from the code snippet below. + +![](images/searchbox-filter-control.gif) + +>caption Set programmatically Searchbox Filter. + +````Razor +@* This snippet shows how to set filtering state to the TreeList from your code + Applies to the Searchbox filter *@ + +@using Telerik.DataSource; + +Set filtered state + + + + + + + + + + + + + +@code { + public TelerikTreeList TreeListRef { get; set; } = new TelerikTreeList(); + + async Task SetTreeListFilter() + { + var filteredState = new TreeListState() + { + SearchFilter = CreateSearchFilter() + }; + + await TreeListRef.SetState(filteredState); + } + + private IFilterDescriptor CreateSearchFilter() + { + var descriptor = new CompositeFilterDescriptor(); + var fields = new List() { "Name", "Address" }; + var searchValue = "root: 1"; + descriptor.LogicalOperator = FilterCompositionLogicalOperator.Or; + + foreach (var field in fields) + { + var filter = new FilterDescriptor(field, FilterOperator.Contains, searchValue); + + filter.MemberType = typeof(string); + + descriptor.FilterDescriptors.Add(filter); + } + + return descriptor; + } + + public List Data { get; set; } + + + public class Employee + { + public List DirectReports { get; set; } + + public int Id { get; set; } + public string Name { get; set; } + public string Address { get; set; } + public DateTime HireDate { get; set; } + } + + public int LastId { get; set; } = 1; + + protected override async Task OnInitializedAsync() + { + Data = await GetTreeListData(); + } + + async Task> GetTreeListData() + { + List data = new List(); + + for (int i = 1; i < 15; i++) + { + Employee root = new Employee + { + Id = LastId, + Name = $"root: {i}", + Address = $"{i}@example.com", + HireDate = DateTime.Now.AddYears(-i), + DirectReports = new List(), + }; + data.Add(root); + LastId++; + + for (int j = 1; j < 4; j++) + { + int currId = LastId; + Employee firstLevelChild = new Employee + { + Id = currId, + Name = $"first level child {j} of {i}", + Address = $"{currId}@example.com", + HireDate = DateTime.Now.AddDays(-currId), + DirectReports = new List(), + }; + root.DirectReports.Add(firstLevelChild); + LastId++; + + for (int k = 1; k < 3; k++) + { + int nestedId = LastId; + firstLevelChild.DirectReports.Add(new Employee + { + Id = LastId, + Name = $"second level child {k} of {j} and {i}", + Address = $"{nestedId}@example.com", + HireDate = DateTime.Now.AddMinutes(-nestedId) + }); ; + LastId++; + } + } + } + + return await Task.FromResult(data); + } +} +```` + ## Customize the SearchBox The `TreeListSearchBox` component offers the following settings to customize its behavior: