We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

In Grid, I rotating headertext 90 degrees not working

Thread ID:

Created:

Updated:

Platform:

Replies:

145902 Jul 12,2019 12:12 PM UTC Jul 25,2019 08:45 AM UTC ASP.NET MVC - EJ 2 7
loading
Tags: Grid
Fred Morin
Asked On July 12, 2019 12:12 PM UTC

In the following code, I want to rotate headertext of both columns.
I followed documentations but I am missing something.
@using Syncfusion.EJ2.Navigations
@using TestWithFilterableComboBox.ViewModels
@model TestWithFilterableComboBox.ViewModels.ReportViewModel
@using (Html.BeginForm())
{
JobNameQueuedLineNo
@Html.DropDownListFor(x => x.JobName, new SelectList(Model.Jobs, "Value", "Text"), "Job", new { style = "width: 450px;" }) @Html.DropDownListFor(x => x.QueuedBeamStatus, new SelectList(Model.Queues, "Value", "Text"), "Queue", new { style = "width: 450px;" }) @Html.DropDownListFor(x => x.LineName, new SelectList(Model.Lines, "Value", "Text"), "Line", new { style = "width: 450px;" })



@(Html.EJS().Grid("TestGrid").DataSource(Model.Report).Columns(col =>
{
col.Field("Workorderid").HeaderText("Work Order Id").Width(150).Add();
col.Field("FullFilename").HeaderText("Full File Name").Add();
}).AllowPaging(true).PageSettings(o => o.PageSize(10)).AllowSorting().AllowExcelExport().Toolbar(new List() { "Print", "Search", "ExcelExport", "PdfExport" }).Render())
}

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 15, 2019 11:36 AM UTC

Hi Fred, 

Thanks for contacting Syncfusion support. 

We have prepared a sample (by using our documentation solution) to rotate the particular column headerText to 90 degrees. But we did not face any issue while using this solution. So, we have attached our sample in the below link for your reference, 


In this sample we have used transform property to rotate the headerText. After that we have applied this new style to a particular column by using customAttributes property of the Grid. Please refer the below code snippet, 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Height("240").Columns(col => 
{= 
   col.Field("ShipCity").HeaderText("Ship City").CustomAttributes(new { @class = "orientationcss" }).Width("80").Add(); 
}).Created("setHeaderHeight").Render() 
 
<script type="text/javascript"> 
    function setHeaderHeight(args) { 
        var textWidth = document.querySelector(".orientationcss > 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. 
        } 
    } 
</script> 
 
<style> 
    .orientationcss .e-headercelldiv { 
        transform: rotate(90deg); 
    } 
    .e-grid .e-headercelldiv { 
        margin: 108px; 
    } 
</style> 

Note: After changed the orientation you must need to change the Grid header cells height based on the new orientation. In the above code we have used Grid created event to change the header cells height. 


Regards, 
Thavasianand S. 


Fred Morin
Replied On July 15, 2019 06:36 PM UTC

it kinda works, but now the problem i see is that i need to resize the column manually for it to be wide enough to see all the text

As you can see, first image all text is cropped, and as i widen the column it appears.. but its obvisouly not what i need as some columns will need to be tight



Attachment: Pictures_b8d06cdc.zip

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On July 16, 2019 01:31 PM UTC

Hi Fred, 

In our previous update, we have provided a workaround to change the headerText orientation to 90 degrees for Grid header cell. In this workaround, we have overridden the default Grid header cell margin based on the header cell height. But while perform resizing, the header cell height did not change. In this case, we are unable to calculate the margin values. So, it is not feasible to use headerText orientation workaround with resizing feature. 

Regards, 
Seeni Sakthi Kumar S. 


Fred Morin
Replied On July 16, 2019 01:36 PM UTC

I do not need resizing, i was just pointing out that the only way to see the text was to resize wider.

The example you gave me does not work as the text, while it is rotated, its like its position and size is not correct until i resize

Can you give me an example where it works for different kind of column width.

Thanks

Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 19, 2019 10:15 AM UTC

Hi Fred, 

By default, the Grid header text will adapt in the header cell based on that particular column width. So, we suggest you to increase the column width or enable to allowTextWarp property in Grid to show the full header text. Please refer the below screenshots, 

After enabling the allowTextWrap the Grid will look like, 

 

After increasing the column width the Grid will look like, 

 

Documentation for allowTextWrap property, 


Regards, 
Thavasianand S. 


Fred Morin
Replied On July 19, 2019 12:15 PM UTC

I am starting to fell like we are running in circle here

What I need are columns that are not too wide in which the header text is rotated 90 degrees.  the header will be taller to fit the entire header text, but the width of each column will be minimal.

Is that something that Syncfusion grid can do.



Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 25, 2019 08:45 AM UTC

Hi Fred, 

We have analyzed the sample and found that newly applied margin is caused this issue. So, we suggest you to apply the text-align as center instead of this margin to resolve this issue. Please refer the below code snippet, 

<style> 
    .orientationcss .e-headercelldiv { 
        transform: rotate(90deg); 
    } 
 
    .orientationcss .e-headercelldiv { 
        text-align: center; 
    } 
</style> 


Grid screenshot: 

 

We have modified our sample with this solution and you can find that sample from the below link, 
 

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon