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..a7fc61887f --- /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 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 header text +slug: grid-kb-wrap-and-center-column-header-text +position: +tags: +ticketid: 1507250 +res_type: kb +--- + +## Environment + + + + + + + +
ProductGrid for Blazor
+ + +## Description +Could you please tell me how I can have the GridColumn title text wrap around and be centered? + +## 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 *@ + + + + + + + + + + + + +@code { + public IEnumerable 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 grid-templates-column-header%}). +