docs(grid): Improve CheckBoxColumn Title info and example (#1746)

Author: dimodi

components/grid/columns/checkbox.md

@@ -27,6 +27,7 @@ The Grid checkbox column has the following exclusive parameters. For other avail
 | `CheckBoxOnlySelection` | `bool` | Determines if row selection occurs only on checkbox clicks. By default, user can select rows by clicking anywhere, except on command buttons. |
 | `SelectAll` | `bool` <br /> (`true`) | Determines if the column header renders a checkbox to select all rows. Set this to `false` if the [Grid `SelectionMode` is `Single`]({%slug components/grid/selection/single%}). The `SelectAll` parameter has no effect when the checkbox column has a [`HeaderTemplate`](#headertemplate). |
 | `SelectAllMode` | `GridSelectAllMode` enum <br /> (`Current`) | Determines if the header cell checkbox selects all rows on the current page, or all rows in the Grid. `Current` selects the visible rows on the current page. `All` selects all the data items, including ones that may be currently filtered out. `All` requires the [Grid to be data-bound via its `Data` parameter, and not `OnRead`]({%slug common-features-data-binding-overview%}#how-to-provide-data). When using `OnRead`, the two `SelectAllMode`s behave identically, because the Grid controls only one page of items. |
+| `Title` | `string` | The text in the checkbox column's header. The title renders only when `SelectAll` is `false`. |
 
 >note  If the Grid is bound to `IQueriable`, a header checkbox with an `All` option will execute the query over all the data. This may be a performance hit.
 
@@ -36,22 +37,28 @@ The `HeaderTemplate` of the Grid checkbox column enables developers to customize
 
 On a side note, it is possible to [center the checkboxes in the `GridCheckboxColumn`]({%slug grid-kb-center-checkbox-column%}) without using a template.
 
+The example below doesn't take into account sorting, filtering and paging. If the Grid has any data operations enabled, replace `GridData` in the custom logic below with the [data collection, which the Grid is currently showing]({%slug grid-kb-get-filtered-data%}).
+
 >caption Grid Checkbox Column Header Template
 
 ````CSHTML
-<TelerikGrid @ref="@GridRef"
-             Data="@GridData"
+@*If the Grid has data operations enabled, see
+    https://docs.telerik.com/blazor-ui/knowledge-base/grid-get-filtered-data
+    on how to get the data collection, which the Grid is currently showing.
+    Use this collection instead of GridData in the custom logic.*@
+
+<TelerikGrid Data="@GridData"
              SelectionMode="GridSelectionMode.Multiple"
              @bind-SelectedItems="SelectedItems">
     <GridColumns>
-        <GridCheckboxColumn Width="140px" HeaderClass="header-select-all">
+        <GridCheckboxColumn Width="160px" HeaderClass="header-select-all">
             <HeaderTemplate>
                 @{
                     <TelerikCheckBox @bind-Value="@SelectAllCheckBoxValue"
                                      Enabled="@SelectAllEnabled"
                                      TabIndex="-1"
                                      Indeterminate="@(SelectAllCheckBoxValue == null)" />
-
+                    <span>&nbsp;</span>
                     <TelerikButton OnClick="@ToggleSelectAll">
                         @(SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value ? "Deselect All" : "Select All")
                     </TelerikButton>
@@ -63,7 +70,7 @@ On a side note, it is possible to [center the checkboxes in the `GridCheckboxCol
 </TelerikGrid>
 
 <style>
-    .k-grid .header-select-all .k-checkbox {
+    .k-grid .header-select-all .k-checkbox-wrap {
         vertical-align: middle;
     }
 
@@ -74,12 +81,13 @@ On a side note, it is possible to [center the checkboxes in the `GridCheckboxCol
 </style>
 
 @code {
-    List<Product> GridData { get; set; }
-    TelerikGrid<Product> GridRef { get; set; }
-    IEnumerable<Product> SelectedItems { get; set; } = Enumerable.Empty<Product>();
-    bool SelectAllEnabled { get; set; }
+    private List<Product> GridData { get; set; } = new List<Product>();
+
+    private IEnumerable<Product> SelectedItems { get; set; } = Enumerable.Empty<Product>();
+
+    private bool SelectAllEnabled { get; set; }
 
-    void ToggleSelectAll()
+    private void ToggleSelectAll()
     {
         if (SelectAllCheckBoxValue.HasValue && SelectAllCheckBoxValue.Value)
         {
@@ -91,7 +99,7 @@ On a side note, it is possible to [center the checkboxes in the `GridCheckboxCol
         }
     }
 
-    bool? SelectAllCheckBoxValue
+    private bool? SelectAllCheckBoxValue
     {
         get
         {
@@ -111,7 +119,7 @@ On a side note, it is possible to [center the checkboxes in the `GridCheckboxCol
         {
             if (value.HasValue && value.Value == true)
             {
-                SelectedItems = GridRef.Data;
+                SelectedItems = GridData;
             }
             else
             {
@@ -120,19 +128,19 @@ On a side note, it is possible to [center the checkboxes in the `GridCheckboxCol
         }
     }
 
-    bool IsAnyDataSelected()
+    private bool IsAnyDataSelected()
     {
-        return GridRef.SelectedItems.Count() > 0 && GridRef.SelectedItems.Count() < GridRef.Data.Count();
+        return SelectedItems.Count() > 0 && SelectedItems.Count() < GridData.Count();
     }
 
-    bool IsAllDataSelected()
+    private bool IsAllDataSelected()
     {
-        return GridRef.SelectedItems.Count() == GridRef.Data.Count();
+        return SelectedItems.Count() == GridData.Count();
     }
 
-    bool GridHasData()
+    private bool GridHasData()
     {
-        return GridRef.Data.Count() > 0;
+        return GridData.Count() > 0;
     }
 
     protected override void OnInitialized()