docs(grid): header template and sorting - better workarounds

Author: marin-bratanov

components/grid/templates.md

@@ -242,17 +242,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr
         <GridColumn Field="@(nameof(SampleData.ID))" Title="This title will not be rendered">
             <HeaderTemplate>
                 <div style="text-align:center">Id</div>
-                @* this is a block element and it will push the sorting indicator, keep this in mind
-                A rule like this one can move the sort indicator out of the static order of the elements
-                <style>
-                .k-grid th.k-header .k-icon.k-i-sort-asc-sm,
-                .k-grid th.k-header .k-icon.k-i-sort-desc-sm {
-                    position: absolute;
-                    right: 0;
-                    top: 8px;
-                }
-                </style>
-                *@
+                @* this is a block element and it will push the sorting indicator, see the notes below *@
             </HeaderTemplate>
         </GridColumn>
         <GridColumn Field="@(nameof(SampleData.Name))">
@@ -317,6 +307,38 @@ Bound columns render the name of the field or their `Title` in their header. Thr
 
 >note Header Templates are not available for the `GridCheckboxColumn` and the `GridCommandColumn`.
 
+>note If you need to use block elements in the header templates, keep in mind that they will push the sort indicator out of its expected position. If you cannot avoid block elements (such as in the `ID` column in the example above), add a CSS rule like the ones below to adjust the sort indicator.
+
+>caption Sort indicator adjustments when block elements are in the header template
+
+````CSS
+.k-grid th.k-header .k-icon.k-i-sort-asc-sm,
+.k-grid th.k-header .k-icon.k-i-sort-desc-sm {
+    position: absolute;
+    right: 0;
+    top: 8px;
+}
+
+/* OR */
+
+.k-grid-header .k-header > .k-link {
+    padding-right: 1.5em;
+}
+
+    .k-grid-header .k-header > .k-link > .k-icon {
+        position: absolute;
+        top: 50%;
+        right: 0.5em;
+        transform: translateY(-50%);
+        margin-left: 0;
+    }
+
+.k-grid-header .k-sort-order {
+    position: absolute;
+    right: 0.25em;
+}
+````
+
 ## Column Group Footer
 
 When the grid is grouped, the columns can display a footer with information about the column data [aggregates]({%slug grid-aggregates%}) and some custom text/logic. The template is strongly typed and exposes the available aggregates values.