Guriddo » Topic: Header Rotate label (Vertical text orientation)

Header Rotate label (Vertical text orientation)

Guriddo
Header Rotate label (Vertical text orientation)

This topic has 1 reply, 2 voices, and was last updated 5 years, 4 months ago by guriddo.support.

Creator

Topic
November 21, 2019 at 9:13 pm #127283

krisreddy
Participant

Hello,

Is there a way to rotate header column to vertical orientation?

Thanks,

Kris

Guriddo Customer
Creator

Topic

Viewing 1 replies (of 1 total)

Author

Replies

November 25, 2019 at 5:03 pm #127285

guriddo.support

Participant

Hello,

One possible solution is with the code below and the following assumptions:

The grid has the id jqGrid and you want to rotate the heafes of the columns with name – Price and Quantity in colModel

Define the class rotate

<style>
    .rotate 
    {
		transform: rotate( -90deg);
    }
</style>

<style>

.rotate

{

transform: rotate( -90deg);

}

</style>

after the grid is created do the following:

// refer to the table header row
var trHead = $("#gview_jqGrid").find(".ui-jqgrid-htable thead:first tr");
// set the height manually
$("th", trHead).height("80px");
// add class rotate to Price and Quantity to the div within the header cell 
$("#jqGrid_Price div", trHead).addClass("rotate").css('margin-left', '2px');
$("#jqGrid_Quantity div", trHead).addClass("rotate").css('margin-left', '2px');

// refer to the table header row

var trHead = $("#gview_jqGrid").find(".ui-jqgrid-htable thead:first tr");

// set the height manually

$("th", trHead).height("80px");

// add class rotate to Price and Quantity to the div within the header cell

$("#jqGrid_Price div", trHead).addClass("rotate").css('margin-left', '2px');

$("#jqGrid_Quantity div", trHead).addClass("rotate").css('margin-left', '2px');

Please let us know if this solves the problem

Kind Regards
Will

Guriddo Support Team

Author

Replies

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.

Registered Users: 12,254
Forums: 7
Topics: 10,950
Replies: 23,150
Topic Tags: 324
Empty Topic Tags: 9

44 Users Online

Users: 26 Guests, 18 Bots

Stay connected with us in your favorite flavor!

Header Rotate label (Vertical text orientation)

Search Forum

Recent Replies

Forum Statistics

UserOnline