kb(Grid): add PR review suggestions

Author: IvanDanchev

knowledge-base/grid-checkbox-column-prevent-click.md

@@ -3,9 +3,9 @@ title: Grid CheckBox column prevent accidental click
 description: How to prevent an accidental click in the CheckBox column of the Grid
 type: how-to
 page_title: Grid CheckBox column prevent accidental click
-slug: grid-checkbox-column-prevent-click
+slug: grid-kb-checkbox-column-prevent-click
 position: 
-tags: 
+tags: grid, checkbox, prevent, click, deselection 
 res_type: kb
 ---
 
@@ -29,21 +29,24 @@ An accidental click outside the checkbox in the Grid's CheckBox column deselects
 
 You can prevent the click event of the cells in the CheckBox column of the Grid with JavaScript. 
 
-1. Handle the `OnRowClick` event of the Grid and call a JavaScript function in it.
+1. Call a JavaScript function in the `OnAfterRenderAsync` method and in the `OnRead` event handler of the Grid.
 2. In the function, attach a `click` event handler to the `td` Html elements in the CheckBox column and prevent the event conditionally
 
 ```razor
+@using Telerik.DataSource.Extensions;
 @inject IJSRuntime JS;
 
-<TelerikGrid Data="@GridData"
+<TelerikGrid TItem="@SampleModel"
+             OnRead="@OnGridRead"
+             AutoGenerateColumns="true"
+             Sortable="true"
+             Pageable="true"
+             FilterMode="@GridFilterMode.FilterRow"
+             Height="400px"
              SelectionMode="@GridSelectionMode.Multiple"
-             SelectedItems="@SelectedEmployees"
-             OnRowClick="@OnRowClickHandler"
-             Pageable="true">
+             SelectedItems="@SelectedRows">
     <GridColumns>
         <GridCheckboxColumn SelectAll="true" CheckBoxOnlySelection="false" />
-        <GridColumn Field="@nameof(Employee.Name)" />
-        <GridColumn Field="@nameof(Employee.Team)" />
     </GridColumns>
 </TelerikGrid>
 
@@ -52,7 +55,6 @@ You can prevent the click event of the cells in the CheckBox column of the Grid
         setTimeout(function() {
             preventDeselection()
         }, 300)
-
     }
 
     function preventClickHandler(event) {
@@ -70,39 +72,57 @@ You can prevent the click event of the cells in the CheckBox column of the Grid
 </script>
 
 @code {
-    private List<Employee> GridData { get; set; } = new();
+    private List<SampleModel> GridData { get; set; }
 
-    private IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();
+    private IEnumerable<SampleModel> SelectedRows { get; set; } = Enumerable.Empty<SampleModel>();
 
-    private string SelectedItemsChangedLog { get; set; } = string.Empty;
+    private string LastOnRead { get; set; }
 
-    private async Task OnRowClickHandler(GridRowClickEventArgs args)
+    protected override void OnInitialized()
     {
-        // call a function that will prevent deselection of already selected rows
-        await JS.InvokeVoidAsync("handleDeselection");
-    }
+        GenerateData();
+        SelectedRows = new List<SampleModel>() { GridData.ElementAt(2) };
 
+        base.OnInitialized();
+    }
 
-    protected override void OnInitialized()
+    protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        for (int i = 1; i <= 15; i++)
+        if (firstRender)
         {
-            GridData.Add(new Employee()
-            {
-                EmployeeId = i,
-                Name = $"Employee {i}",
-                Team = $"Team {i % 3 + 1}"
-            });
+            await Task.Delay(1);
+            await JS.InvokeVoidAsync("handleDeselection");
         }
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    private async Task OnGridRead(GridReadEventArgs args)
+    {
+        var result = GridData.ToDataSourceResult(args.Request);
+        args.Data = result.Data;
+        args.Total = result.Total;
 
-        SelectedEmployees = new List<Employee>() { GridData.ElementAt(2) };
+        var now = DateTime.Now;
+        LastOnRead = now.ToLongTimeString() + "." + now.Millisecond;
+
+        await Task.Delay(1);
+        await JS.InvokeVoidAsync("handleDeselection");
+    }
+
+    private void GenerateData()
+    {
+        GridData = new List<SampleModel>();
+
+        for (int i = 1; i <= 100; i++)
+        {
+            GridData.Add(new SampleModel() { Id = i, Text = $"Item{i}" });
+        }
     }
 
-    public class Employee
+    public class SampleModel
     {
-        public int EmployeeId { get; set; }
-        public string Name { get; set; } = string.Empty;
-        public string Team { get; set; } = string.Empty;
+        public int Id { get; set; }
+        public string Text { get; set; }
     }
 }
 ```