From df9ab39a58582284218e98098607a60128e0f161 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
Date: Fri, 10 Sep 2021 17:32:34 +0300
Subject: [PATCH 1/3] Add Grid right align header cells KB

---
 .../grid-right-align-header-cells.md          | 95 +++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 knowledge-base/grid-right-align-header-cells.md

diff --git a/knowledge-base/grid-right-align-header-cells.md b/knowledge-base/grid-right-align-header-cells.md
new file mode 100644
index 0000000000..ae69b5d72c
--- /dev/null
+++ b/knowledge-base/grid-right-align-header-cells.md
@@ -0,0 +1,95 @@
+---
+title: Right Align Grid Header Cells
+description: How to align the text in Grid header and data cells to the right
+type: how-to
+page_title: Right Align Grid Header Cells
+slug: grid-kb-right-align-header-cells
+position: 
+tags: grid, header, headers, right, align, text-align
+ticketid:
+res_type: kb
+---
+
+## Description
+
+I have a Grid that displays numeric data. The numbers in the data cells are aligned to the right with the `TextAlign` column attribute. How do I align the text content of Grid header cells to the right?
+
+## Solution
+
+To align the Grid header cell labels to the right, use custom CSS as per the example below. Note that different CSS rules are needed, depending on the Grid configuration. The CSS code affects all columns.
+
+>caption Align Grid header cells and data cells to the right
+
+````CSHTML
+<TelerikGrid Data="@GridData"
+             Sortable="true"
+             FilterMode="GridFilterMode.FilterMenu"
+             Class="right-align">
+    <GridColumns>
+        <GridColumn Field=@nameof(Product.Name) Title="Product Name" TextAlign="ColumnTextAlign.Right" />
+        <GridColumn Field=@nameof(Product.Price) Title="Price" TextAlign="ColumnTextAlign.Right" DisplayFormat="{0:n2}" />
+        <GridColumn Field=@nameof(Product.Quantity) Title="Units In Stock" TextAlign="ColumnTextAlign.Right" />
+    </GridColumns>
+</TelerikGrid>
+
+<style>
+    /* no sorting, no filtering */
+    .right-align .k-grid-header .k-header {
+        text-align: right;
+    }
+
+    /* filtering, no sorting */
+    /*.right-align .k-grid-header .k-header {
+        padding-right: calc(1.6em + 14px);
+    }*/
+
+    /* sorting - move the sorting arrow to the left */
+    .right-align .k-cell-inner > .k-link {
+        flex-flow: row-reverse nowrap;
+    }
+
+    /* filtering, column menu - keep the icon on the RIGHT */
+    .right-align .k-cell-inner .k-column-title {
+        padding-right: calc(1.6em + 10px);
+    }
+
+    /* OR */
+
+    /* filtering, column menu - move the icon to the LEFT */
+    /*.right-align .k-grid-header .k-grid-filter,
+    .right-align .k-grid-header .k-header-column-menu {
+        right: auto;
+        left: 0;
+    }*/
+</style>
+
+@code {
+    public List<Product> GridData { get; set; }
+
+    protected override void OnInitialized()
+    {
+        GridData = new List<Product>();
+        var rnd = new Random();
+
+        for (int i = 1; i <= 5; i++)
+        {
+
+            GridData.Add(new Product()
+            {
+                ID = i,
+                Name = "Product " + i.ToString(),
+                Price = (decimal)rnd.Next(1, 100),
+                Quantity = (short)rnd.Next(1, 100)
+            });
+        }
+    }
+
+    public class Product
+    {
+        public int ID { get; set; }
+        public string Name { get; set; }
+        public decimal Price { get; set; }
+        public short Quantity { get; set; }
+    }
+}
+````

From f28deff80c87c48f8f51c16711a0f18eb15d5bd9 Mon Sep 17 00:00:00 2001
From: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
Date: Mon, 13 Sep 2021 17:05:26 +0300
Subject: [PATCH 2/3] Refactor CSS rules

---
 knowledge-base/grid-right-align-header-cells.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/knowledge-base/grid-right-align-header-cells.md b/knowledge-base/grid-right-align-header-cells.md
index ae69b5d72c..ad8c2bea36 100644
--- a/knowledge-base/grid-right-align-header-cells.md
+++ b/knowledge-base/grid-right-align-header-cells.md
@@ -33,15 +33,14 @@ To align the Grid header cell labels to the right, use custom CSS as per the exa
 </TelerikGrid>
 
 <style>
-    /* no sorting, no filtering */
+
     .right-align .k-grid-header .k-header {
+        /* no sorting, no filtering */
         text-align: right;
-    }
 
-    /* filtering, no sorting */
-    /*.right-align .k-grid-header .k-header {
-        padding-right: calc(1.6em + 14px);
-    }*/
+        /* filtering, no sorting */
+        /*padding-right: calc(1.6em + 14px);*/
+    }
 
     /* sorting - move the sorting arrow to the left */
     .right-align .k-cell-inner > .k-link {

From 9f4dbc04ef52f2aa409b908fd48b47586b7c208e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <dimo@Dimos-MacBook-Pro.local>
Date: Mon, 13 Sep 2021 17:13:11 +0300
Subject: [PATCH 3/3] Refactor CSS rules 2

---
 knowledge-base/grid-right-align-header-cells.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/knowledge-base/grid-right-align-header-cells.md b/knowledge-base/grid-right-align-header-cells.md
index ad8c2bea36..28011e0f87 100644
--- a/knowledge-base/grid-right-align-header-cells.md
+++ b/knowledge-base/grid-right-align-header-cells.md
@@ -38,7 +38,7 @@ To align the Grid header cell labels to the right, use custom CSS as per the exa
         /* no sorting, no filtering */
         text-align: right;
 
-        /* filtering, no sorting */
+        /* filtering or column menu, no sorting */
         /*padding-right: calc(1.6em + 14px);*/
     }
 
@@ -47,14 +47,14 @@ To align the Grid header cell labels to the right, use custom CSS as per the exa
         flex-flow: row-reverse nowrap;
     }
 
-    /* filtering, column menu - keep the icon on the RIGHT */
+    /* filtering or column menu - keep the icon on the RIGHT */
     .right-align .k-cell-inner .k-column-title {
         padding-right: calc(1.6em + 10px);
     }
 
     /* OR */
 
-    /* filtering, column menu - move the icon to the LEFT */
+    /* filtering or column menu - move the icon to the LEFT */
     /*.right-align .k-grid-header .k-grid-filter,
     .right-align .k-grid-header .k-header-column-menu {
         right: auto;