docs(grid): filtering

Author: marin-bratanov

components/grid/editing/overview.md

@@ -20,6 +20,8 @@ List of the available events:
 * `OnEdit` - fires when the user is about to enter edit mode for an exising row. Cancellable.
 * `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the context. Cancellable.
 
+The [data source will be read after these events fire]({%slug components/grid/reading-data%}), if they are not cancelled.
+
 The event handlers receive an argument of type `GridCommandEventArgs` that exposes the following fields:
 
 * `IsCancelled` - a boolean field indicating whether the grid operation is to be prevented (for example, prevent a row from opening for edit, or from updating the data layer).

components/grid/filtering.md

@@ -0,0 +1,80 @@
+---
+title: Filtering
+page_title: Grid for Blazor | Filtering
+description: Enable and configure filtering in Grid for Blazor
+slug: components/grid/filtering
+tags: telerik,blazor,grid,filtering,filter
+published: True
+position: 22
+---
+
+# Grid Filtering
+
+The Grid component offers support for filtering.
+
+To enable sorting, set the grid's `Filterable` property to `true`.
+
+The grid will render a row below the column headers with UI that you can use to fill in filter criteria and then you can click a button to execute the filter. Once a filter is a applied to a column, a button will appear that lets you clear that filter.
+
+The behavior of the filter header will depend on the column data type:
+
+* `string` - the filter is `Contains`. A [Telerik TextBox]({%slug components/textbox/overview%}) component is used.
+* `number` - the filter is `EqualsTo`. A [Telerik Numeric TextBox]({%slug components/numerictextbox/overview%}) component is used.
+* `DateTime` - the filter is `EqualsTo`. A [Telerik Date Input]({%slug components/dateinput/overview%}) component is used.
+
+You can filter more than one column at a time, and all filter rules will be applied together with an `AND` logic.
+
+>caption Enable Filtering in Telerik Grid
+
+````CSHTML
+@using Telerik.Blazor.Components.Grid
+
+<TelerikGrid Data=@GridData Filterable=true Pageable=true>
+	<TelerikGridColumns>
+		<TelerikGridColumn Field=@nameof(Employee.Name) />
+		<TelerikGridColumn Field=@nameof(Employee.AgeInYears) Title="Age" />
+		<TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
+	</TelerikGridColumns>
+</TelerikGrid>
+
+@functions {
+	public List<Employee> GridData { get; set; }
+
+	protected override void OnInit()
+	{
+		GridData = new List<Employee>();
+		var rand = new Random();
+		for (int i = 0; i < 100; i++)
+		{
+			GridData.Add(new Employee()
+			{
+				EmployeeId = i,
+				Name = "Employee " + i.ToString(),
+				AgeInYears = rand.Next(10, 80),
+				HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
+			});
+		}
+	}
+
+	public class Employee
+	{
+		public int? EmployeeId { get; set; }
+		public string Name { get; set; }
+		public int? AgeInYears { get; set; }
+		public DateTime HireDate { get; set; }
+	}
+}
+````
+
+>caption The result from the code snippet above, before and after the user filled in a filter and clicked on the filter button
+
+![](images/filterable-grid.png)
+
+![](images/filtered-grid.png)
+
+
+## See Also
+
+  * [Live Demo: Grid Filtering](https://demos.telerik.com/blazor-ui/grid/filtering)
+   
+  

components/grid/images/filterable-grid.png

@@ -120,6 +120,10 @@ The grid supports paging of the data out of the box. You can read more about it
 
 The grid can sort data automatically. You can read more about this feature in the [Sorting]({%slug components/grid/features/sorting%}) article.
 
+## Filtering
+
+The grid can filter data automatically. You can read more about thsi feature in the [Filtering]({%slug components/grid/filtering%}) article.
+
 ## Styling
 
 You can define your own content for column cells or even the entire row through [Templates]({%slug components/grid/features/templates%}).

components/grid/images/filtered-grid.png

@@ -5,7 +5,7 @@ description: Use custom templates in Grid for Blazor
 slug: components/grid/features/templates
 tags: telerik,blazor,grid,templates
 published: True
-position: 23
+position: 24
 ---
 
 # Grid Templates

components/grid/overview.md

@@ -5,7 +5,7 @@ description: Use toolbar and custom actions in Grid for Blazor
 slug: components/grid/features/toolbar
 tags: telerik,blazor,grid,toolbar
 published: True
-position: 22
+position: 23
 ---
 
 # Grid Toolbar