Better CRUD service mimic classes and usage

components/grid/columns/auto-generated.md

@@ -199,33 +199,30 @@ This example shows how to:
 @using System.Collections.ObjectModel
 
 <div style="max-width: 800px;">
-    <EditForm Model="@DataModel">
-        <DataAnnotationsValidator />
-        <ValidationSummary />
-        <TelerikGrid Data="@GridData"
-                     AutoGenerateColumns="true"
-                     EditMode="GridEditMode.Popup"
-                     Pageable="true"
-                     SelectionMode="GridSelectionMode.Multiple"
-                     @bind-SelectedItems="@SelectedUsers"
-                     PageSize="@PageSize"
-                     OnCreate="@CreateItem"
-                     OnUpdate="@UpdateItem"
-                     OnDelete="@DeleteItem">
-            <GridToolBar>
-                <GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
-            </GridToolBar>
-            <GridColumns>
-                <GridCheckboxColumn />
-                <GridAutoGeneratedColumns ColumnWidth="200px" />
-                <GridColumn Field="@nameof(GridDataModel.RegistrationDate)" Title="Registration Date" Width="200px" />
-                <GridCommandColumn Width="250px">
-                    <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
-                    <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
-                </GridCommandColumn>
-            </GridColumns>
-        </TelerikGrid>
-    </EditForm>
+
+    <TelerikGrid Data="@GridData"
+                    AutoGenerateColumns="true"
+                    EditMode="GridEditMode.Popup"
+                    Pageable="true"
+                    SelectionMode="GridSelectionMode.Multiple"
+                    @bind-SelectedItems="@SelectedUsers"
+                    PageSize="@PageSize"
+                    OnCreate="@CreateItem"
+                    OnUpdate="@UpdateItem"
+                    OnDelete="@DeleteItem">
+        <GridToolBar>
+            <GridCommandButton Command="Add" Icon="add">Add</GridCommandButton>
+        </GridToolBar>
+        <GridColumns>
+            <GridCheckboxColumn />
+            <GridAutoGeneratedColumns ColumnWidth="200px" />
+            <GridColumn Field="@nameof(GridDataModel.RegistrationDate)" Title="Registration Date" Width="200px" />
+            <GridCommandColumn Width="250px">
+                <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
+                <GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>
+            </GridCommandColumn>
+        </GridColumns>
+    </TelerikGrid>
 
 
     @if (SelectedUsers.Any())
@@ -253,7 +250,6 @@ This example shows how to:
     public List<GridDataModel> GridData { get; set; }
     public IEnumerable<GridDataModel> SelectedUsers { get; set; } = new ObservableCollection<GridDataModel>();
     public int PageSize { get; set; } = 3;
-    GridDataModel DataModel = new GridDataModel();
 
     #region data model with annotations
     public class GridDataModel
@@ -290,106 +286,92 @@ This example shows how to:
         GridDataModel item = (GridDataModel)args.Item;
 
         // perform actual data source operations here through your service
-        GridDataModel updatedItem = await ServiceMimicUpdate(item);
+        await MyService.Update(item);
 
-        // update the local view-model data
-        var index = GridData.FindIndex(i => i.Id == updatedItem.Id);
-        if (index != -1)
-        {
-            GridData[index] = updatedItem;
-        }
+        // update the local view-model data with the service data
+        await GetGridData();
     }
 
     async Task DeleteItem(GridCommandEventArgs args)
     {
         GridDataModel item = (GridDataModel)args.Item;
 
         // perform actual data source operation here through your service
-        bool isDeleted = await ServiceMimicDelete(item);
+        await MyService.Delete(item);
 
-        if (isDeleted)
-        {
-            // update the local view-model data
-            GridData.Remove(item);
-        }
+        // update the local view-model data with the service data
+        await GetGridData();
     }
 
     async Task CreateItem(GridCommandEventArgs args)
     {
         GridDataModel item = (GridDataModel)args.Item;
 
         // perform actual data source operation here through your service
-        GridDataModel insertedItem = await ServiceMimicInsert(item);
+        await MyService.Create(item);
 
-        // update the local view-model data
-        GridData.Insert(0, insertedItem);
+        // update the local view-model data with the service data
+        await GetGridData();
     }
 
+    #endregion
 
-    // the following three methods mimic an actual data service that handles the actual data source
-    // you can see about implement error and exception handling, determining suitable return types as per your needs
-    // an example is available here: https://github.com/telerik/blazor-ui/tree/master/grid/remote-validation
-
-    async Task<GridDataModel> ServiceMimicInsert(GridDataModel itemToInsert)
+    async Task GetGridData()
     {
-        // in this example, we just populate the fields, you project may use
-        // something else or generate the updated item differently
-        GridDataModel updatedItem = new GridDataModel()
-        {
-            // the service assigns an ID, in this sample we use only the view-model data for simplicity,
-            // you should use the actual data and set the properties as necessary (e.g., generate nested fields data and so on)
-            Id = GridData.Count + 1,
-            Username = itemToInsert.Username,
-            EmailAddress = itemToInsert.EmailAddress,
-            RegistrationDate = itemToInsert.RegistrationDate,
-            LocalTime = itemToInsert.LocalTime,
-            BoughtBooks = itemToInsert.BoughtBooks
-        };
-        return await Task.FromResult(updatedItem);
+        GridData = await MyService.Read();
     }
 
-    async Task<GridDataModel> ServiceMimicUpdate(GridDataModel itemToUpdate)
+    protected override async Task OnInitializedAsync()
     {
-        // in this example, we just populate the fields, you project may use
-        // something else or generate the updated item differently
-        GridDataModel updatedItem = new GridDataModel()
-        {
-            Id = itemToUpdate.Id,
-            Username = itemToUpdate.Username,
-            EmailAddress = itemToUpdate.EmailAddress,
-            RegistrationDate = itemToUpdate.RegistrationDate,
-            LocalTime = itemToUpdate.LocalTime,
-            BoughtBooks = itemToUpdate.BoughtBooks
-        };
-        return await Task.FromResult(updatedItem);
+        await GetGridData();
     }
 
-    async Task<bool> ServiceMimicDelete(GridDataModel itemToDelete)
+    // the following static class mimics an actual data service that handles the actual data source
+    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
+    public static class MyService
     {
-        return await Task.FromResult(true);//always successful
-    }
+        private static List<GridDataModel> _data { get; set; } = new List<GridDataModel>();
 
-    #endregion
+        public static async Task Create(GridDataModel itemToInsert)
+        {
+            itemToInsert.Id = _data.Count + 1;
+            _data.Insert(0, itemToInsert);
+        }
 
-    #region data generation
-    protected override void OnInitialized()
-    {
-        GridData = new List<GridDataModel>();
-        for (int i = 0; i < 45; i++)
+        public static async Task<List<GridDataModel>> Read()
+        {
+            if (_data.Count < 1)
+            {
+                for (int i = 0; i < 45; i++)
+                {
+                    _data.Add(new GridDataModel()
+                    {
+                        Id = i,
+                        Username = $"Username {i}",
+                        EmailAddress = $"user{i}@mail.com",
+                        RegistrationDate = DateTime.Now.AddDays(-2),
+                        LocalTime = DateTime.Now
+                    });
+                }
+            }
+
+            return await Task.FromResult(_data);
+        }
+
+        public static async Task Update(GridDataModel itemToUpdate)
         {
-            GridData.Add(new GridDataModel()
+            var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
+            if (index != -1)
             {
-                Id = i,
-                Username = $"Username {i}",
-                EmailAddress = $"user{i}@mail.com",
-                RegistrationDate = DateTime.Now.AddDays(-2),
-                LocalTime = DateTime.Now
-            });
+                _data[index] = itemToUpdate;
+            }
         }
 
-        base.OnInitialized();
+        public static async Task Delete(GridDataModel itemToDelete)
+        {
+            _data.Remove(itemToDelete);
+        }
     }
-    #endregion
 }
 ````
 >caption The result from the code snippet above

components/grid/columns/command.md

@@ -99,12 +99,7 @@ The following code example demonstrates declarations and handling.
         public DateTime HireDate { get; set; }
     }
 
-    List<SampleData> GridData = Enumerable.Range(1, 50).Select(x => new SampleData
-    {
-        ID = x,
-        Name = "name " + x,
-        HireDate = DateTime.Now.AddDays(-x)
-    }).ToList();
+    List<SampleData> GridData { get; set; }
 
     // sample custom commands handling
 
@@ -129,36 +124,61 @@ The following code example demonstrates declarations and handling.
 
     }
 
-    // sample CUD operations
+    // sample CRUD operations
 
     private async Task MyUpdateHandler(GridCommandEventArgs args)
     {
         SampleData theUpdatedItem = args.Item as SampleData;
-        SampleData updatedItem = await ServiceMimicUpdate(theUpdatedItem);
 
-        // update the local view-model data
-        var index = GridData.FindIndex(i => i.ID == updatedItem.ID);
-        if (index != -1)
-        {
-            GridData[index] = updatedItem;
-        }
+        // perform actual data source operations here through your service
+        await MyService.Update(theUpdatedItem);
+
+        // update the local view-model data with the service data
+        await GetGridData();
+    }
+
+    async Task GetGridData()
+    {
+        GridData = await MyService.Read();
     }
 
-    // the following method mimics an actual data service that handles the actual data source
-    // you can see about implement error and exception handling, determining suitable return types as per your needs
-    // an example is available here: https://github.com/telerik/blazor-ui/tree/master/grid/remote-validation
+    protected override async Task OnInitializedAsync()
+    {
+        await GetGridData();
+    }
 
-    async Task<SampleData> ServiceMimicUpdate(SampleData itemToUpdate)
+    // the following static class mimics an actual data service that handles the actual data source
+    // replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page
+    public static class MyService
     {
-        // in this example, we just populate the fields, you project may use
-        // something else or generate the updated item differently
-        SampleData updatedItem = new SampleData()
+        private static List<SampleData> _data { get; set; } = new List<SampleData>();
+
+        public static async Task<List<SampleData>> Read()
         {
-            ID = itemToUpdate.ID,
-            HireDate = itemToUpdate.HireDate,
-            Name = itemToUpdate.Name
-        };
-        return await Task.FromResult(updatedItem);
+            if (_data.Count < 1)
+            {
+                for (int i = 1; i < 50; i++)
+                {
+                    _data.Add(new SampleData()
+                    {
+                        ID = i,
+                        Name = "name " + i,
+                        HireDate = DateTime.Now.AddDays(-i)
+                    });
+                }
+            }
+
+            return await Task.FromResult(_data);
+        }
+
+        public static async Task Update(SampleData itemToUpdate)
+        {
+            var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
+            if (index != -1)
+            {
+                _data[index] = itemToUpdate;
+            }
+        }
     }
 }
 ````