Skip to content

Commit ee17d50

Browse files
kb(grid): update debouncing article
1 parent e242035 commit ee17d50

File tree

3 files changed

+35
-24
lines changed

3 files changed

+35
-24
lines changed

components/grid/manual-operations.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ Examples:
3333
* [Cache Data Request](#cache-data-request)
3434
* [Use OData Service](https://github.com/telerik/blazor-ui/tree/master/grid/odata)
3535
* [Serialize the DataSoureRequest to the server](https://github.com/telerik/blazor-ui/tree/master/grid/datasourcerequest-on-server)
36+
* [Debounce Data Source Operations and Requests]({%slug grid-kb-debounce-operations%})
3637

3738
### Custom paging with a remote service
3839

knowledge-base/combo-debounce-onread.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ For min filter length, just add a check in the handler for the desired string le
3838
>caption Use a `CancellationTokenSource` to debounce OnRead filter calls in the combo box. Add Min Filter Length
3939
4040
````CSHTML
41+
@implements IDisposable
4142
@using System.Threading
4243
4344
@SelectedValue
@@ -94,6 +95,15 @@ For min filter length, just add a check in the handler for the desired string le
9495
}
9596
}
9697
}
98+
99+
public void Dispose()
100+
{
101+
try
102+
{
103+
tokenSource.Dispose();
104+
}
105+
catch { }
106+
}
97107
98108
async Task<List<string>> GetOptions(string userInput, string filterOperator)
99109
{

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

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
---
2-
title: Debounce/Throttle grid data source operations
3-
description: how to debounce or throttle grid data source operations
2+
title: Debounce grid data source operations
3+
description: how to debounce the grid data source operations
44
type: how-to
5-
page_title: Debounce/Throttle grid data source operations
6-
slug: grid-kb-throttle-operations
5+
page_title: Debounce grid data source operations
6+
slug: grid-kb-debounce-operations
77
position:
88
tags:
99
ticketid: 1451805
@@ -40,15 +40,15 @@ There are three ideas on the basic approach how to do this:
4040
* Implement your own filtering (a second example is available below).
4141

4242

43-
>caption Throttle grid data source requests
43+
>caption Debounce grid data source requests
4444
4545
````CSHTML
46-
@* This example throttles all events. You may want to add logic that checks how the data source request changed
47-
for example, whether the filters changed or something else, so you can throttle only filtering, for example *@
46+
@* This example debounces all actions. You may want to add logic that checks how the data source request changed
47+
for example, whether the filters changed or something else, so you can debounce only filtering, for example *@
4848
4949
@implements IDisposable
50-
5150
@using System.Threading
51+
5252
@using Telerik.DataSource
5353
@using Telerik.DataSource.Extensions
5454
@@ -66,25 +66,22 @@ for example, whether the filters changed or something else, so you can throttle
6666
public int Total { get; set; } = 0;
6767
6868
DataSourceRequest lastRequest { get; set; }
69-
Timer ThrottleTimer { get; set; }
69+
CancellationTokenSource tokenSource = new CancellationTokenSource(); // for debouncing
7070
71-
void InitializeTimer()
71+
protected async Task ReadItems(GridReadEventArgs args)
7272
{
73-
int throttleTime = 500;
73+
// debouncing
74+
tokenSource.Cancel();
75+
tokenSource.Dispose();
7476
75-
ThrottleTimer = new System.Threading.Timer(async (obj) =>
76-
{
77-
await InvokeAsync(RequestData);
78-
ThrottleTimer.Dispose();
79-
},
80-
null, throttleTime, System.Threading.Timeout.Infinite);
81-
}
77+
tokenSource = new CancellationTokenSource();
78+
var token = tokenSource.Token;
8279
83-
protected async Task ReadItems(GridReadEventArgs args)
84-
{
80+
await Task.Delay(500, token); // 500ms timeout for the debouncing
81+
82+
//new data collection comes down from the service after debouncing
8583
lastRequest = args.Request;
86-
ThrottleTimer?.Dispose();
87-
InitializeTimer();
84+
await RequestData();
8885
}
8986
9087
async Task RequestData()
@@ -101,7 +98,7 @@ for example, whether the filters changed or something else, so you can throttle
10198
{
10299
try
103100
{
104-
ThrottleTimer.Dispose();
101+
tokenSource.Dispose();
105102
}
106103
catch { }
107104
}
@@ -110,6 +107,8 @@ for example, whether the filters changed or something else, so you can throttle
110107
111108
public async Task<DataEnvelope> FetchPagedData(DataSourceRequest request)
112109
{
110+
Console.WriteLine("I am called more rarely when the user types a filter");
111+
113112
List<Employee> fullList = new List<Employee>();
114113
115114
int totalCount = 100;
@@ -200,7 +199,8 @@ for example, whether the filters changed or something else, so you can throttle
200199
void UserFilters(string input, string field)
201200
{
202201
// do debouncing and filtering of the grid data (MyData in this sample) here
203-
// see the previous snippet on a way to implement throttling
202+
// see the previous snippet on a way to implement debouncing
203+
// see also how you can tell the grid to call filtering https://docs.telerik.com/blazor-ui/components/grid/filtering#filter-from-code
204204
operationsList = new MarkupString($"{operationsList}<br />filter string: {input}, field: {field}");
205205
StateHasChanged();
206206
}

0 commit comments

Comments
 (0)