From 5dbe5e90a39f12b5d3ad16178d5e4b12c33ef6ee Mon Sep 17 00:00:00 2001
From: Nadezhda Tacheva <ntacheva@progress.com>
Date: Thu, 18 Feb 2021 17:02:08 +0200
Subject: [PATCH 1/2] kb(grid):added kb for wrapping and centering column text

---
 .../grid-wrap-and-center-column-text.md       | 81 +++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 knowledge-base/grid-wrap-and-center-column-text.md

diff --git a/knowledge-base/grid-wrap-and-center-column-text.md b/knowledge-base/grid-wrap-and-center-column-text.md
new file mode 100644
index 0000000000..71dbed5ac9
--- /dev/null
+++ b/knowledge-base/grid-wrap-and-center-column-text.md
@@ -0,0 +1,81 @@
+---
+title: How to wrap and center the Grid column text
+description: How to wrap and center the Grid column text
+type: how-to
+page_title: How to wrap and center the Grid column text
+slug: grid-kb-wrap-and-center-column-text
+position: 
+tags: 
+ticketid: 1507250
+res_type: kb
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Grid for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+
+## Description
+Could you please tell me how I can have the GridColumn title text wrap around and be centered?
+
+Can I also wrap and center the rest of the column text? 
+
+## Solution
+
+You can use some custom CSS that aligns text in the center and enables text wrapping as per the example below:
+
+````CSHTML
+<style>
+    .k-grid .k-grid-header th .k-cell-inner,
+    .k-grid .k-grid-header th .k-cell-inner > .k-link {
+        display: block; /*defaults to flex which makes aligning text harder in it*/
+        text-align: center;
+        white-space: normal;
+    }
+
+    .k-column-title {
+        white-space: normal;
+    }
+</style>
+
+<TelerikGrid Data="@MyData" Height="400px"
+             Pageable="true" Sortable="true" Groupable="true"
+             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
+             Resizable="true" Reorderable="true">
+    <GridColumns>
+        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
+        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
+        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
+        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
+    {
+        Id = x,
+        Name = "name " + x,
+        Team = "team " + x % 5,
+        HireDate = DateTime.Now.AddDays(-x).Date
+    });
+
+    public class SampleData
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public string Team { get; set; }
+        public DateTime HireDate { get; set; }
+    }
+}
+````
+
+## Notes
+
+* If you want full control over the header text contents and rendering, you can use the [column header template]({%slug components/grid/templates/column-header%}).
+

From d71c8267245ffb76422abc1ffc4c8faa8fc7fa1d Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Thu, 18 Feb 2021 20:20:12 +0200
Subject: [PATCH 2/2] chore(kb): minor fixes

---
 knowledge-base/grid-wrap-and-center-column-text.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/knowledge-base/grid-wrap-and-center-column-text.md b/knowledge-base/grid-wrap-and-center-column-text.md
index 71dbed5ac9..a7fc61887f 100644
--- a/knowledge-base/grid-wrap-and-center-column-text.md
+++ b/knowledge-base/grid-wrap-and-center-column-text.md
@@ -1,9 +1,9 @@
 ---
-title: How to wrap and center the Grid column text
-description: How to wrap and center the Grid column text
+title: How to wrap and center the Grid column header text
+description: How to wrap and center the Grid column header text
 type: how-to
-page_title: How to wrap and center the Grid column text
-slug: grid-kb-wrap-and-center-column-text
+page_title: How to wrap and center the Grid column header text
+slug: grid-kb-wrap-and-center-column-header-text
 position: 
 tags: 
 ticketid: 1507250
@@ -24,13 +24,13 @@ res_type: kb
 ## Description
 Could you please tell me how I can have the GridColumn title text wrap around and be centered?
 
-Can I also wrap and center the rest of the column text? 
-
 ## Solution
 
 You can use some custom CSS that aligns text in the center and enables text wrapping as per the example below:
 
 ````CSHTML
+@* You can also use the Class parameter of the grid to cascade these rules through a selector so it only affects certain grid instances and not all grids on your app *@
+
 <style>
     .k-grid .k-grid-header th .k-cell-inner,
     .k-grid .k-grid-header th .k-cell-inner > .k-link {
@@ -77,5 +77,5 @@ You can use some custom CSS that aligns text in the center and enables text wrap
 
 ## Notes
 
-* If you want full control over the header text contents and rendering, you can use the [column header template]({%slug components/grid/templates/column-header%}).
+* If you want full control over the header text contents and rendering, you can use the [column header template]({%slug grid-templates-column-header%}).