docs(grid): better explanations on working with contexts

Author: marin-bratanov

components/grid/columns/bound.md

@@ -94,6 +94,10 @@ You can use the following properties on the bound columns:
 * 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.
 * 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).
 
+>tip You can optimize database queries in two ways:
+>
+> * 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.
+> * 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.
 
 ## See Also
 

components/grid/editing/batch.md

@@ -16,12 +16,12 @@ You can handle the `OnUpdate`, `OnCreate` and `OnDelete` events to perform the C
 
 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.
 
-@[template](/_contentTemplates/grid/common-link.md#async-events-link)
 
 >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
 
 ````CSHTML
-Click a cell, edit it and click outside of the cell to see the change. Editing is prevented for the first two items.
+Click a cell, edit it and click outside of the cell to see the change.<br />
+<strong>Editing is prevented for the first two items.</strong>
 
 <TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px"
         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
 </TelerikGrid>
 
 @code {
-    public void EditHandler(GridCommandEventArgs args)
+    void EditHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //prevent opening for edit based on condition
+        // prevent opening for edit based on condition
         if (item.ID < 3)
         {
-            args.IsCancelled = true;//the general approach for cancelling an event
+            args.IsCancelled = true;// the general approach for cancelling an event
         }
 
         Console.WriteLine("Edit event is fired for column " + args.Field);
     }
 
-    public void UpdateHandler(GridCommandEventArgs args)
+    async Task UpdateHandler(GridCommandEventArgs args)
     {
         string fieldName = args.Field;
-        object newVal = args.Value; //you can cast this, if necessary, according to your model
+        object newVal = args.Value; // you can cast this, if necessary, according to your model
 
-        SampleData item = (SampleData)args.Item;//you can also use the entire model
+        SampleData item = (SampleData)args.Item; // you can also use the entire model
 
-        //perform actual data source operation here
-
-        //if you have a context added through an @inject statement, you could call its SaveChanges() method
-        //myContext.SaveChanges();
+        // perform actual data source operation here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         var index = MyData.FindIndex(i => i.ID == item.ID);
         if (index != -1)
         {
@@ -74,33 +72,32 @@ Click a cell, edit it and click outside of the cell to see the change. Editing i
         Console.WriteLine("Update event is fired for " + args.Field + " with value " + args.Value);
     }
 
-    public void CreateHandler(GridCommandEventArgs args)
+    async Task CreateHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //perform actual data source operation here
+        // perform actual data source operation here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         item.ID = MyData.Count + 1;
         MyData.Insert(0, item);
 
         Console.WriteLine("Create event is fired.");
     }
 
-    public void DeleteHandler(GridCommandEventArgs args)
+    async Task DeleteHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //perform actual data source operation here
-
-        //if you have a context added through an @inject statement, you could call its SaveChanges() method
-        //myContext.SaveChanges();
+        // perform actual data source operation here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         MyData.Remove(item);
 
         Console.WriteLine("Delete event is fired.");
     }
 
-    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
+    // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
     public class SampleData
     {
         public int ID { get; set; }

components/grid/editing/incell.md

@@ -10,20 +10,20 @@ position: 1
 
 # Grid Inline Editing
 
-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).
+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).
 
 In a similar fashion, the `Cancel` and `Delete` command buttons fire events on the grid to let you handle the data source operations.
 
 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.
 
 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.
 
-@[template](/_contentTemplates/grid/common-link.md#async-events-link)
 
 >caption The Command buttons and the grid events let you handle data operations in Inline edit mode
 
 ````CSHTML
-Editing is cancelled for the first two records. 
+Use the command buttons to control the CUD operations. <br />
+<strong>Editing is cancelled for the first two records</strong>. 
 
 <TelerikGrid Data=@MyData EditMode="@GridEditMode.Inline" Pageable="true" Height="500px"
         OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler" OnCancel="@CancelHandler">
@@ -43,28 +43,26 @@ Editing is cancelled for the first two records.
 </TelerikGrid>
 
 @code {
-    public void EditHandler(GridCommandEventArgs args)
+    void EditHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //prevent opening for edit based on condition
+        // prevent opening for edit based on condition
         if (item.ID < 3)
         {
-            args.IsCancelled = true;//the general approach for cancelling an event
+            args.IsCancelled = true;// the general approach for cancelling an event
         }
 
         Console.WriteLine("Edit event is fired.");
     }
 
-    public void UpdateHandler(GridCommandEventArgs args)
+    async Task UpdateHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //perform actual data source operations here
-
-        //if you have a context added through an @inject statement, you could call its SaveChanges() method
-        //myContext.SaveChanges();
+        // perform actual data source operations here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         var index = MyData.FindIndex(i => i.ID == item.ID);
         if (index != -1)
         {
@@ -74,52 +72,42 @@ Editing is cancelled for the first two records.
         Console.WriteLine("Update event is fired.");
     }
 
-    public void DeleteHandler(GridCommandEventArgs args)
+    async Task DeleteHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //perform actual data source operation here
-
-        //if you have a context added through an @inject statement, you could call its SaveChanges() method
-        //myContext.SaveChanges();
+        // perform actual data source operation here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         MyData.Remove(item);
 
         Console.WriteLine("Delete event is fired.");
     }
 
-    public void CreateHandler(GridCommandEventArgs args)
+    async Task CreateHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //perform actual data source operation here
-
-        //if you have a context added through an @inject statement, you could call its SaveChanges() method
-        //myContext.SaveChanges();
+        // perform actual data source operation here through your service
 
+        // if the grid Data is not tied to the service, you may need to update the local view data too
         item.ID = MyData.Count + 1;
         MyData.Insert(0, item);
 
         Console.WriteLine("Create event is fired.");
     }
 
-    public void CancelHandler(GridCommandEventArgs args)
+    async Task CancelHandler(GridCommandEventArgs args)
     {
         SampleData item = (SampleData)args.Item;
 
-        //if necessary, perform actual data source operation here (like cancel changes on a context)
-
-        //if you have a context added through an @inject statement, you could use something like this to abort changes
-        //foreach (var entry in myContext.ChangeTracker.Entries().Where(entry => entry.State == EntityState.Modified))
-        //{
-        //  entry.State = EntityState.Unchanged;
-        //}
+        // if necessary, perform actual data source operation here through your service
 
         Console.WriteLine("Cancel event is fired.");
     }
 
 
-    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
+    // in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
     public class SampleData
     {
         public int ID { get; set; }