Skip to content

Commit 938d202

Browse files
docs(grid): better explanations on working with contexts
1 parent 596bcd3 commit 938d202

File tree

7 files changed

+181
-237
lines changed

7 files changed

+181
-237
lines changed

components/grid/columns/bound.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,10 @@ You can use the following properties on the bound columns:
9494
* The grid skips fields marked with the [`IgnoreDataMemberAttribute`](https://docs.microsoft.com/en-us/dotnet/api/system.runtime.serialization.ignoredatamemberattribute) when performing CUD operations. Its presence indicates that this property does not need to be part of the serialized data anyway, and skipping such fields allows [Lazy Loading Proxies in EF](https://docs.microsoft.com/en-us/dotnet/api/microsoft.entityframeworkcore.proxiesextensions.uselazyloadingproxies?view=efcore-3.1) to work.
9595
* For the time being, nested models will not work (such as `Field="MyModel.AnotherModel.SomePrimitiveField"`). We are working on enabling this and you can follow its status [here](https://feedback.telerik.com/blazor/1432615-support-for-nested-complex-models).
9696

97+
>tip You can optimize database queries in two ways:
98+
>
99+
> * Use an `IQueriable<MyModel>` collection for the grid `Data`. The grid will build a LINQ expression internally that will be resolved only when needed. This can be useful when the `Data` comes from something like an EntityFramework context.
100+
> * Implement [manual data source operations](..//manual-operations) and implement the desired query yourself. In a future version, the `DataSourceRequest` object will become serializable so you can send it directly over HTTP to a controller and use the LINQ queries it will build for you.
97101
98102
## See Also
99103

components/grid/editing/batch.md

Lines changed: 0 additions & 17 deletions
This file was deleted.

components/grid/editing/incell.md

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@ You can handle the `OnUpdate`, `OnCreate` and `OnDelete` events to perform the C
1616

1717
To enable InCell editing mode, set the `EditMode` property of the grid to `Telerik.Blazor.GridEditMode.Incell`, then handle the CRUD events as shown in the example below.
1818

19-
@[template](/_contentTemplates/grid/common-link.md#async-events-link)
2019

2120
>caption Values are set in the model as soon as the user finishes editing a field, and you can receive them through the grid events
2221
2322
````CSHTML
24-
Click a cell, edit it and click outside of the cell to see the change. Editing is prevented for the first two items.
23+
Click a cell, edit it and click outside of the cell to see the change.<br />
24+
<strong>Editing is prevented for the first two items.</strong>
2525
2626
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px"
2727
OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">
@@ -39,31 +39,29 @@ Click a cell, edit it and click outside of the cell to see the change. Editing i
3939
</TelerikGrid>
4040
4141
@code {
42-
public void EditHandler(GridCommandEventArgs args)
42+
void EditHandler(GridCommandEventArgs args)
4343
{
4444
SampleData item = (SampleData)args.Item;
4545
46-
//prevent opening for edit based on condition
46+
// prevent opening for edit based on condition
4747
if (item.ID < 3)
4848
{
49-
args.IsCancelled = true;//the general approach for cancelling an event
49+
args.IsCancelled = true;// the general approach for cancelling an event
5050
}
5151
5252
Console.WriteLine("Edit event is fired for column " + args.Field);
5353
}
5454
55-
public void UpdateHandler(GridCommandEventArgs args)
55+
async Task UpdateHandler(GridCommandEventArgs args)
5656
{
5757
string fieldName = args.Field;
58-
object newVal = args.Value; //you can cast this, if necessary, according to your model
58+
object newVal = args.Value; // you can cast this, if necessary, according to your model
5959
60-
SampleData item = (SampleData)args.Item;//you can also use the entire model
60+
SampleData item = (SampleData)args.Item; // you can also use the entire model
6161
62-
//perform actual data source operation here
63-
64-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
65-
//myContext.SaveChanges();
62+
// perform actual data source operation here through your service
6663
64+
// if the grid Data is not tied to the service, you may need to update the local view data too
6765
var index = MyData.FindIndex(i => i.ID == item.ID);
6866
if (index != -1)
6967
{
@@ -74,33 +72,32 @@ Click a cell, edit it and click outside of the cell to see the change. Editing i
7472
Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
7573
}
7674
77-
public void CreateHandler(GridCommandEventArgs args)
75+
async Task CreateHandler(GridCommandEventArgs args)
7876
{
7977
SampleData item = (SampleData)args.Item;
8078
81-
//perform actual data source operation here
79+
// perform actual data source operation here through your service
8280
81+
// if the grid Data is not tied to the service, you may need to update the local view data too
8382
item.ID = MyData.Count + 1;
8483
MyData.Insert(0, item);
8584
8685
Console.WriteLine("Create event is fired.");
8786
}
8887
89-
public void DeleteHandler(GridCommandEventArgs args)
88+
async Task DeleteHandler(GridCommandEventArgs args)
9089
{
9190
SampleData item = (SampleData)args.Item;
9291
93-
//perform actual data source operation here
94-
95-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
96-
//myContext.SaveChanges();
92+
// perform actual data source operation here through your service
9793
94+
// if the grid Data is not tied to the service, you may need to update the local view data too
9895
MyData.Remove(item);
9996
10097
Console.WriteLine("Delete event is fired.");
10198
}
10299
103-
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
100+
// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
104101
public class SampleData
105102
{
106103
public int ID { get; set; }

components/grid/editing/inline.md

Lines changed: 18 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,20 @@ position: 1
1010

1111
# Grid Inline Editing
1212

13-
Inline editing lets the user click an [Edit command button]({%slug components/grid/columns/command%}) on the row, and all its editable columns open up for changes. They can then click an `Save` command button to submit the changes to the data access layer. This fires the `OnUpdate` event of the grid where your code receives the updated model so you can work with the data (for example, to call the `SaveChanges()` method of your context).
13+
Inline editing lets the user click an [Edit command button]({%slug components/grid/columns/command%}) on the row, and all its editable columns open up for changes. They can then click an `Save` command button to submit the changes to the data access layer. This fires the `OnUpdate` event of the grid where your code receives the updated model so you can work with the data (for example, to call the appropriate method of your service).
1414

1515
In a similar fashion, the `Cancel` and `Delete` command buttons fire events on the grid to let you handle the data source operations.
1616

1717
You can also cancel the events by setting the `IsCancelled` property of the event arguments to `true`. This lets you prevent the user from editing certain records, inserting or deleting items, based on your application logic.
1818

1919
To enable Inline editing in the grid, set its `EditMode` property to `Telerik.Blazor.GridEditMode.Inline`, then handle the CRUD events as shown in the example below.
2020

21-
@[template](/_contentTemplates/grid/common-link.md#async-events-link)
2221

2322
>caption The Command buttons and the grid events let you handle data operations in Inline edit mode
2423
2524
````CSHTML
26-
Editing is cancelled for the first two records.
25+
Use the command buttons to control the CUD operations. <br />
26+
<strong>Editing is cancelled for the first two records</strong>.
2727
2828
<TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
2929
OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
@@ -43,28 +43,26 @@ Editing is cancelled for the first two records.
4343
</TelerikGrid>
4444
4545
@code {
46-
public void EditHandler(GridCommandEventArgs args)
46+
void EditHandler(GridCommandEventArgs args)
4747
{
4848
SampleData item = (SampleData)args.Item;
4949
50-
//prevent opening for edit based on condition
50+
// prevent opening for edit based on condition
5151
if (item.ID < 3)
5252
{
53-
args.IsCancelled = true;//the general approach for cancelling an event
53+
args.IsCancelled = true;// the general approach for cancelling an event
5454
}
5555
5656
Console.WriteLine("Edit event is fired.");
5757
}
5858
59-
public void UpdateHandler(GridCommandEventArgs args)
59+
async Task UpdateHandler(GridCommandEventArgs args)
6060
{
6161
SampleData item = (SampleData)args.Item;
6262
63-
//perform actual data source operations here
64-
65-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
66-
//myContext.SaveChanges();
63+
// perform actual data source operations here through your service
6764
65+
// if the grid Data is not tied to the service, you may need to update the local view data too
6866
var index = MyData.FindIndex(i => i.ID == item.ID);
6967
if (index != -1)
7068
{
@@ -74,52 +72,42 @@ Editing is cancelled for the first two records.
7472
Console.WriteLine("Update event is fired.");
7573
}
7674
77-
public void DeleteHandler(GridCommandEventArgs args)
75+
async Task DeleteHandler(GridCommandEventArgs args)
7876
{
7977
SampleData item = (SampleData)args.Item;
8078
81-
//perform actual data source operation here
82-
83-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
84-
//myContext.SaveChanges();
79+
// perform actual data source operation here through your service
8580
81+
// if the grid Data is not tied to the service, you may need to update the local view data too
8682
MyData.Remove(item);
8783
8884
Console.WriteLine("Delete event is fired.");
8985
}
9086
91-
public void CreateHandler(GridCommandEventArgs args)
87+
async Task CreateHandler(GridCommandEventArgs args)
9288
{
9389
SampleData item = (SampleData)args.Item;
9490
95-
//perform actual data source operation here
96-
97-
//if you have a context added through an @inject statement, you could call its SaveChanges() method
98-
//myContext.SaveChanges();
91+
// perform actual data source operation here through your service
9992
93+
// if the grid Data is not tied to the service, you may need to update the local view data too
10094
item.ID = MyData.Count + 1;
10195
MyData.Insert(0, item);
10296
10397
Console.WriteLine("Create event is fired.");
10498
}
10599
106-
public void CancelHandler(GridCommandEventArgs args)
100+
async Task CancelHandler(GridCommandEventArgs args)
107101
{
108102
SampleData item = (SampleData)args.Item;
109103
110-
//if necessary, perform actual data source operation here (like cancel changes on a context)
111-
112-
//if you have a context added through an @inject statement, you could use something like this to abort changes
113-
//foreach (var entry in myContext.ChangeTracker.Entries().Where(entry => entry.State == EntityState.Modified))
114-
//{
115-
// entry.State = EntityState.Unchanged;
116-
//}
104+
// if necessary, perform actual data source operation here through your service
117105
118106
Console.WriteLine("Cancel event is fired.");
119107
}
120108
121109
122-
//in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
110+
// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
123111
public class SampleData
124112
{
125113
public int ID { get; set; }

0 commit comments

Comments
 (0)