kb(grid): update debouncing article

Author: marin-bratanov

components/grid/manual-operations.md

@@ -33,6 +33,7 @@ Examples:
 * [Cache Data Request](#cache-data-request)
 * [Use OData Service](https://github.com/telerik/blazor-ui/tree/master/grid/odata)
 * [Serialize the DataSoureRequest to the server](https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server)
+* [Debounce Data Source Operations and Requests]({%slug grid-kb-debounce-operations%})
 
 ### Custom paging with a remote service
 

knowledge-base/combo-debounce-onread.md

@@ -38,6 +38,7 @@ For min filter length, just add a check in the handler for the desired string le
 >caption Use a `CancellationTokenSource` to debounce OnRead filter calls in the combo box. Add Min Filter Length
 
 ````CSHTML
+@implements IDisposable
 @using System.Threading
 
 @SelectedValue
@@ -94,6 +95,15 @@ For min filter length, just add a check in the handler for the desired string le
             }
         }
     }
+    
+    public void Dispose()
+    {
+        try
+        {
+            tokenSource.Dispose();
+        }
+        catch { }
+    }
 
     async Task<List<string>> GetOptions(string userInput, string filterOperator)
     {

knowledge-base/grid-kb-throttle-operations.md renamed to knowledge-base/grid-debounce-operations.md

@@ -1,9 +1,9 @@
 ---
-title: Debounce/Throttle grid data source operations
-description: how to debounce or throttle grid data source operations
+title: Debounce grid data source operations
+description: how to debounce the grid data source operations
 type: how-to
-page_title: Debounce/Throttle grid data source operations
-slug: grid-kb-throttle-operations
+page_title: Debounce grid data source operations
+slug: grid-kb-debounce-operations
 position: 
 tags: 
 ticketid: 1451805
@@ -40,15 +40,15 @@ There are three ideas on the basic approach how to do this:
 * Implement your own filtering (a second example is available below).
 
 
->caption Throttle grid data source requests
+>caption Debounce grid data source requests
 
 ````CSHTML
-@* This example throttles all events. You may want to add logic that checks how the data source request changed
-for example, whether the filters changed or something else, so you can throttle only filtering, for example *@
+@* This example debounces all actions. You may want to add logic that checks how the data source request changed
+    for example, whether the filters changed or something else, so you can debounce only filtering, for example *@
 
 @implements IDisposable
-
 @using System.Threading
+
 @using Telerik.DataSource
 @using Telerik.DataSource.Extensions
 
@@ -66,25 +66,22 @@ for example, whether the filters changed or something else, so you can throttle
     public int Total { get; set; } = 0;
 
     DataSourceRequest lastRequest { get; set; }
-    Timer ThrottleTimer { get; set; }
+    CancellationTokenSource tokenSource = new CancellationTokenSource(); // for debouncing
 
-    void InitializeTimer()
+    protected async Task ReadItems(GridReadEventArgs args)
     {
-        int throttleTime = 500;
+        // debouncing
+        tokenSource.Cancel();
+        tokenSource.Dispose();
 
-        ThrottleTimer = new System.Threading.Timer(async (obj) =>
-            {
-                await InvokeAsync(RequestData);
-                ThrottleTimer.Dispose();
-            },
-            null, throttleTime, System.Threading.Timeout.Infinite);
-    }
+        tokenSource = new CancellationTokenSource();
+        var token = tokenSource.Token;
 
-    protected async Task ReadItems(GridReadEventArgs args)
-    {
+        await Task.Delay(500, token); // 500ms timeout for the debouncing
+
+        //new data collection comes down from the service after debouncing
         lastRequest = args.Request;
-        ThrottleTimer?.Dispose();
-        InitializeTimer();
+        await RequestData();
     }
 
     async Task RequestData()
@@ -101,7 +98,7 @@ for example, whether the filters changed or something else, so you can throttle
     {
         try
         {
-            ThrottleTimer.Dispose();
+            tokenSource.Dispose();
         }
         catch { }
     }
@@ -110,6 +107,8 @@ for example, whether the filters changed or something else, so you can throttle
 
     public async Task<DataEnvelope> FetchPagedData(DataSourceRequest request)
     {
+        Console.WriteLine("I am called more rarely when the user types a filter");
+
         List<Employee> fullList = new List<Employee>();
 
         int totalCount = 100;
@@ -200,7 +199,8 @@ for example, whether the filters changed or something else, so you can throttle
     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
+        // see the previous snippet on a way to implement debouncing
+        // see also how you can tell the grid to call filtering https://docs.telerik.com/blazor-ui/components/grid/filtering#filter-from-code
         operationsList = new MarkupString($"{operationsList}<br />filter string: {input}, field: {field}");
         StateHasChanged();
     }