1
1
---
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
4
4
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
7
7
position :
8
8
tags :
9
9
ticketid : 1451805
@@ -40,15 +40,15 @@ There are three ideas on the basic approach how to do this:
40
40
* Implement your own filtering (a second example is available below).
41
41
42
42
43
- > caption Throttle grid data source requests
43
+ > caption Debounce grid data source requests
44
44
45
45
```` 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 *@
48
48
49
49
@implements IDisposable
50
-
51
50
@using System.Threading
51
+
52
52
@using Telerik.DataSource
53
53
@using Telerik.DataSource.Extensions
54
54
@@ -66,25 +66,22 @@ for example, whether the filters changed or something else, so you can throttle
66
66
public int Total { get; set; } = 0;
67
67
68
68
DataSourceRequest lastRequest { get; set; }
69
- Timer ThrottleTimer { get; set; }
69
+ CancellationTokenSource tokenSource = new CancellationTokenSource(); // for debouncing
70
70
71
- void InitializeTimer( )
71
+ protected async Task ReadItems(GridReadEventArgs args )
72
72
{
73
- int throttleTime = 500;
73
+ // debouncing
74
+ tokenSource.Cancel();
75
+ tokenSource.Dispose();
74
76
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;
82
79
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
85
83
lastRequest = args.Request;
86
- ThrottleTimer?.Dispose();
87
- InitializeTimer();
84
+ await RequestData();
88
85
}
89
86
90
87
async Task RequestData()
@@ -101,7 +98,7 @@ for example, whether the filters changed or something else, so you can throttle
101
98
{
102
99
try
103
100
{
104
- ThrottleTimer .Dispose();
101
+ tokenSource .Dispose();
105
102
}
106
103
catch { }
107
104
}
@@ -110,6 +107,8 @@ for example, whether the filters changed or something else, so you can throttle
110
107
111
108
public async Task<DataEnvelope> FetchPagedData(DataSourceRequest request)
112
109
{
110
+ Console.WriteLine("I am called more rarely when the user types a filter");
111
+
113
112
List<Employee> fullList = new List<Employee>();
114
113
115
114
int totalCount = 100;
@@ -200,7 +199,8 @@ for example, whether the filters changed or something else, so you can throttle
200
199
void UserFilters(string input, string field)
201
200
{
202
201
// 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
204
204
operationsList = new MarkupString($"{operationsList}<br />filter string: {input}, field: {field}");
205
205
StateHasChanged();
206
206
}
0 commit comments