Skip to content

Commit 7a5fb2b

Browse files
marin-bratanovmarin-bratanov
committed
docs(grid): manual data source operations
1 parent bd540c5 commit 7a5fb2b

File tree

3 files changed

+106
-2
lines changed

3 files changed

+106
-2
lines changed

‎components/grid/editing/overview.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ List of the available events:
2020
* `OnEdit` - fires when the user is about to enter edit mode for an exising row. Cancellable.
2121
* `OnCancel` - fires when the user clicks the `Cancel` command button. Allows you to undo the changes to the data in the context. Cancellable.
2222

23-
The [data source will be read after these events fire]({%slug components/grid/reading-data%}), if they are not cancelled.
23+
After these events fire, the [data source will be read]({%slug components/grid/manual-operations%}), if they are not cancelled.
2424

2525
The event handlers receive an argument of type `GridCommandEventArgs` that exposes the following fields:
2626

‎components/grid/manual-operations.md

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: Manual Data Source Operations
3+
page_title: Grid for Blazor | Manual Operations
4+
description: How to implement your own read, page, fiter, sort operations for the grid data.
5+
slug: components/grid/manual-operations
6+
tags: telerik,blazor,grid,read,filter,sort,page,manual,data,data source
7+
published: True
8+
position: 30
9+
---
10+
11+
# Manual Data Source Operations
12+
13+
By default, the grid will receive the entire collection of data, and it will perform the necessary operations (like [paging]({%slug components/grid/features/paging%}), [sorting]({%slug components/grid/features/sorting%}), [filtering]({%slug components/grid/filtering%})) internally to it. You can perform these operations yourself by handling the `OnRead` event of the grid as shown in the example below. The data source will be read after each [CUD operation]({%slug components/grid/editing/overview%}) as well, to ensure fresh data.
14+
15+
The parameter of type `DataSourceRequest` exposes information about the desired paging, filtering and sorting so you can, for example, call your remote endpoint with appropriate parameters so its performance is optimized and it fetches only the relevant data.
16+
17+
When the `OnRead` event is used, the internal operations are disabled and you must perform them all in the `OnRead` event. You must also set the `TotalCount` property of the grid to the total number of items in the data source.
18+
19+
>caption Handling the data source operations with your own code. This example showcases how to use the OnRead event. To implement the CUD operations, see the [CRUD Operations Overview]({%slug components/grid/editing/overview%}) article.
20+
21+
````CSHTML
22+
@using Telerik.Blazor.Components.Grid
23+
@using Telerik.DataSource.Extensions;
24+
25+
<TelerikGrid Data=@GridData TotalCount=@Total
26+
Filterable=true Sortable=true Pageable=true EditMode="inline">
27+
<TelerikGridEvents>
28+
<EventsManager OnRead=@ReadItems></EventsManager>
29+
</TelerikGridEvents>
30+
<TelerikGridColumns>
31+
<TelerikGridColumn Field=@nameof(Employee.ID) />
32+
<TelerikGridColumn Field=@nameof(Employee.Name) Title="Name" />
33+
<TelerikGridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
34+
<TelerikGridCommandColumn>
35+
<TelerikGridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</TelerikGridCommandButton>
36+
<TelerikGridCommandButton Command="Edit" Icon="edit">Edit</TelerikGridCommandButton>
37+
<TelerikGridCommandButton Command="Delete" Icon="delete">Delete</TelerikGridCommandButton>
38+
<TelerikGridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</TelerikGridCommandButton>
39+
</TelerikGridCommandColumn>
40+
</TelerikGridColumns>
41+
<TelerikGridToolBar>
42+
<TelerikGridCommandButton Command="Add" Icon="add">Add Employee</TelerikGridCommandButton>
43+
</TelerikGridToolBar>
44+
</TelerikGrid>
45+
46+
@functions {
47+
public List<Employee> SourceData { get; set; }
48+
public List<Employee> GridData { get; set; }
49+
public int Total { get; set; } = 0;
50+
51+
protected override void OnInit()
52+
{
53+
SourceData = GenerateData();
54+
}
55+
56+
protected async void ReadItems(GridReadEventArgs args)
57+
{
58+
Console.WriteLine("data requested: " + args.Request);
59+
60+
//you need to update the total and data variables
61+
//the ToDataSourceResult() extension method can be used to perform the operations over the full data collection
62+
//in a real case, you can call data access layer and remote services here instead, to fetch only the necessary data
63+
64+
var datasourceResult = SourceData.ToDataSourceResult(args.Request);
65+
66+
GridData = (datasourceResult.Data as IEnumerable<Employee>).ToList();
67+
Total = datasourceResult.Total;
68+
69+
StateHasChanged();
70+
}
71+
72+
//This sample implements only reading of the data. To add the rest of the CRUD operations see
73+
//https://docs.telerik.com/blazor-ui/components/grid/editing/overview
74+
75+
private List<Employee> GenerateData()
76+
{
77+
var result = new List<Employee>();
78+
var rand = new Random();
79+
for (int i = 0; i < 100; i++)
80+
{
81+
result.Add(new Employee()
82+
{
83+
ID = i,
84+
Name = "Name " + i,
85+
HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20))
86+
});
87+
}
88+
89+
return result;
90+
}
91+
92+
public class Employee
93+
{
94+
public int ID { get; set; }
95+
public string Name { get; set; }
96+
public DateTime HireDate { get; set; }
97+
}
98+
}
99+
````
100+
101+
## See Also
102+
103+
* [CRUD Operations Overview]({%slug components/grid/editing/overview%})
104+
* [Live Demo: Manual Data Source Operations](https://demos.telerik.com/blazor-ui/grid/manual-operations)
105+

‎knowledge-base/grid-update-from-0-5-to-1-0.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ Here is a list of the changes:
1818
* The `Update` command is now called `Save`.
1919
* The `OnCreate` event is now fired when a newly inserted item is saved. Previously, it was fired when the Add button was clicked.
2020
* The `OnUpdate` event does not fire for newly inserted items, they are now to be handled through the `OnCreate` event.
21-
* After any of the CUD operations, the data source will be read anew to ensure fresh data is fetched.
2221

2322
You can find more details (and samples) on the current way the grid operates in the following articles:
2423

0 commit comments

Comments
 (0)