kb(grid): own filtering sample for throttling operations KB

Author: marin-bratanov

knowledge-base/grid-kb-throttle-operations.md

@@ -27,7 +27,7 @@ I want to specify a debounce time for filtering. This way I can (for example) se
 This can be useful for filtering with remote data when using the FilterRow mode - it invokes a filter on every keystroke.
 
 ## Solution
-There are two solutions to this:
+There are three ideas on the basic approach how to do this:
 
 * Use the [FilterMenu](https://demos.telerik.com/blazor-ui/grid/filter-menu) filtering mode because it fires filtering requests only when the user presses a button.
 
@@ -37,6 +37,8 @@ There are two solutions to this:
 
 * Implement the desired throttling/debouncing in the [OnRead event](https://docs.telerik.com/blazor-ui/components/grid/manual-operations). Below is an example of this.
 
+* Implement your own filtering (a second example is available below).
+
 
 >caption Throttle grid data source requests
 
@@ -143,3 +145,79 @@ for example, whether the filters changed or something else, so you can throttle
 }
 ````
 
+>caption Own filtering in the grid (header template is used until a [filter template](https://feedback.telerik.com/blazor/1407773-custom-filter-components-filter-template) becomes available)
+
+````CSHTML
+<style>
+    .block-headers-with-sorting th.k-header .k-icon.k-i-sort-asc-sm,
+    .block-headers-with-sorting th.k-header .k-icon.k-i-sort-desc-sm {
+        position: absolute;
+        right: 0;
+        top: 8px;
+    }
+</style>
+
+<TelerikGrid Data="@MyData" Height="300px" Pageable="true" Sortable="true" FilterMode="@GridFilterMode.None" Class="block-headers-with-sorting">
+    <GridColumns>
+        <GridColumn Field="@(nameof(SampleData.ID))">
+            <HeaderTemplate>
+                <div>
+                    <div style="margin-bottom: .5rem">Id</div>
+                    <input style="width: 100%;" class="k-textbox"
+                           @onclick:stopPropagation 
+                           @oninput="@( (ChangeEventArgs e) => UserFilters((string)e.Value, "ID") )" />
+                </div>
+            </HeaderTemplate>
+        </GridColumn>
+        <GridColumn Field="@(nameof(SampleData.Name))">
+            <HeaderTemplate>
+                <div>
+                    <div style="margin-bottom: .5rem">Name</div>
+                    <input style="width: 100%;" class="k-textbox" 
+                           @onclick:stopPropagation 
+                           @oninput="@( (ChangeEventArgs e) => UserFilters((string)e.Value, "Name") )" />
+                </div>
+            </HeaderTemplate>
+        </GridColumn>
+        <GridColumn Field="HireDate" Width="350px">
+            <HeaderTemplate>
+                <div>
+                    <div style="margin-bottom: .5rem">Hire Date</div>
+                    <input style="width: 100%;" class="k-textbox"
+                           @onclick:stopPropagation 
+                           @oninput="@( (ChangeEventArgs e) => UserFilters((string)e.Value, "HireDate") )" />
+                </div>
+            </HeaderTemplate>
+        </GridColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@operationsList
+
+@code {
+    MarkupString operationsList { get; set; }
+
+    void UserFilters(string input, string field)
+    {
+        // do debouncing and filtering of the grid data (MyData in this sample) here
+        // see the previous snippet on a way to implement throttling
+        operationsList = new MarkupString($"{operationsList}<br />filter string: {input}, field: {field}");
+        StateHasChanged();
+    }
+
+    public class SampleData
+    {
+        public int ID { get; set; }
+        public string Name { get; set; }
+        public DateTime HireDate { get; set; }
+    }
+
+    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 50).Select(x => new SampleData
+    {
+        ID = x,
+        Name = "name " + x,
+        HireDate = DateTime.Now.AddDays(-x)
+    });
+}
+````
+