1. Home
  2. Forum
  3. Blazor
  4. Rotate text to vertical in Blazor Grid Header

Rotate text to vertical in Blazor Grid Header

Hello, is it possible to get vertical text in the Blazor Grid header? I can rotate it using a CSS class, but I can't find where to set the height of the header row.

Thank you!

3 Replies
RS Renjith Singh Rajendran Syncfusion Team April 24, 2020 09:02 AM UTC

Hi Aaron, 

Thanks for contacting Syncfusion support. 

We suggest you to apply style in your application as like the below codes to rotate the header text and also apply height for the header row. We have also prepared a sample based on this requirement. Please download the sample from the link below, 

Please refer the screenshot below, 

 

Please add the styles below, 

 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center"  CustomAttributes="@(new { @class="customerclass"})" Width="150"></GridColumn> 
         
<style> 
    .e-grid .e-columnheader .e-headercell {                              /*Set height for header row*/ 
        height: 110px; 
    } 
    .e-grid .e-columnheader .e-headercelldiv {                                 /*Rotate all column headertext*/ 
        transform: rotate(90deg); 
    } 
    .e-grid .e-columnheader .e-headercell.customerclass .e-headercelldiv {     /*Rotate a particular headertext*/ 
        transform: rotate(45deg); 
    } 
</style> 


Please refer the above sample, and use as like the above sample in your application to achieve this requirement. 

Regards, 
Renjith Singh Rajendran. 


AB Aaron Beer April 24, 2020 03:09 PM UTC

Like I said, I can get this to work in a CSS class. Is there nothing in the API to do this? Also, is it possible to dynamically set the header height?

RS Renjith Singh Rajendran Syncfusion Team April 27, 2020 12:59 PM UTC

Hi Aaron, 

Thanks for your update. 

Query : is it possible to dynamically set the header height? 
We suggest you to use the previously suggest styles to rotate the HeaderText and for setting the header height, we can achieve this requirement using JSInterop support of Microsoft to call a JavaScript function from server and perform the calculating height action in JS function. We have modified our sample from our previous update. Please download the sample form the link below, 
 
In the below code, we have called the JS method in the DataBound event by checking for the initial Grid rendering. Please refer the codes below, 

 
<SfGrid DataSource="@Orders" Height="315" > 
    <GridEvents DataBound="DataBound" Created="Created" TValue="Order"></GridEvents> 
    ... 
</SfGrid> 
<style> 
    .e-grid .e-columnheader .e-headercelldiv {                                 /*Rotate all column headertext*/ 
        transform: rotate(90deg); 
    } 
    .e-grid .e-columnheader .e-headercell.customerclass .e-headercelldiv {     /*Rotate a particular headertext*/ 
        transform: rotate(45deg); 
    } 
</style> 
@code{ 
    public List<Order> Orders { get; set; } 
    public bool InitialRender = false; 
    public void Created() 
    { 
        InitialRender = true; 
    } 
    public void DataBound() 
    { 
        if (InitialRender)          //Call the JS method by checking for initial Grid rendering 
        { 
            InitialRender = false; 
            IJSRuntime.InvokeAsync<object>("setHeaderHeight"); 
        } 
    } 
    ... 
} 
 
[orientationscript.js] 

function setHeaderHeight(args) { 
    var textWidth = document.querySelector(".e-headercell > div").scrollWidth; // obtain the width of the headerText content. 
    var headerCell = document.querySelectorAll(".e-headercell"); 
    for (var i = 0; i < headerCell.length; i++) { 
        (headerCell.item(i)).style.height = textWidth + 'px'; // assign the obtained textWidth as the height of the headerCell. 
    } 
} 


Please get back to us if you need further assistance.  

Regards, 
Renjith Singh Rajendran 


Loader.
Up arrow icon