[SOLVED] vertical text in datagrid header

[rannacher]

Hi again,
and thx for help in advance!

I need column headers to have vertical text. When searching I only find below code, but cannot get it work properly.
With that the text is actually vertical, but not really readable, i.e. I cannot adjust width and height of the header and they are not matching the record cells below. Also cannot adjust alignment so all headers not really readable, please see screenshot.

Thx a lot!
BR Mike.

Code:

/* VERTICAL TEXT */
.datagrid-header-row td {
	height:100px; 
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

[thecyberzone]

You may try this way ...

Code:

var dg = $('#dg1');
var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="Attended"]');
td.css('height','100px');

[rannacher]

Hi Cyberzone,

and thx - tried this with code below, but result is only that background of this column gets red, but height and width no effect.
Any idea, help is really really appreciated.
Datagrid is fantastic, but such feature to turn header text by 90° like in Excel is the only way to deal with many columns and larger titles, so I really need this... thx in advance!

Code:

  <button type="button" onclick="verticaltest();">Vertical Header Test</button>
  <script>
  function verticaltest()
  {
    var dg = $('#dgSkillReport');
    var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="MITARBEITER"]');
    td.css('height','10px');
    td.css('width','10px');
    td.css('background-color','#ff0000');
  }
  </script>

Thx a lot Mike!

[thecyberzone]

Try to modify the height of the header row insted of increasing a single column height/width.

Code:

 <button type="button" onclick="verticaltest();">Vertical Header Test</button>
  <script>
  function verticaltest()
  {
    var dg = $('#dgSkillReport');
    var tr = dg.datagrid('getPanel').find('div.datagrid-header-row');
    tr.css('height','100');
    tr.css('background-color','#ff0000');
  }
  </script>

[rannacher]

Hi Cyberzone,

sorry, but code "div.datagrid-header-row" does not work at all ;(((

I try and try and try but the deeper I get the more strange is the behaviour.
Just again what I want to achieve is simply the following:

-. Datagrid with some headers with vertical text
1. header in general shall have a height of lets say 100px
2. first col is "employee name" and should be written horizontal in the header / vertical-align bottom and lets say width 150px
3. then comes a number of n cols with one number in the cell only, but a slightly longer text in the header,
    for this I want the header text vertical and / vertical-align bottom again, but width can be 50px only. 
4. last col is the sum and should be like first col, i.e. written horizontal / vertical-align bottom and 100px here

below my code which works for populating any other table, just I dont get this header styling done for this one.
Actually it looks like that somehow the width and the height for the cols must be identical, otherwise header and cols get alignment mistake.
See below code example with all cols same width and 3 different col widths as exmplained above.
I attach also 2 screenshots showing 3 differents widths and all the same.. somehow it works but not as I want.
- when width is 100 everywhere the header and cells are aligned (but cannot style first last cols horizontal and different width)
- when different width for first and last cols as well as for the bulk in between then alignment gets distorted

I am sorry for explaining so much, but I think this would be an interesting feature to have it working in general.
Thx, MIke.

defining cols in PHP

Code:

      //---------------------------------------------------------------------
      // make columns
      //---------------------------------------------------------------------
      // first col = employeename
      $fieldinfooverview = array( 
          'name'  => 'MITARBEITER',
          'title' => 'Mitarbeiter',
          'width' => 150,   
          'align' => 'left'
      );                     
      $fieldinfooverview_set[] = $fieldinfooverview;

      // then n cols for n available skills 
      while($rowSkills = mysqli_fetch_assoc($resultSkills)) 
      {

          $fieldinfooverview = array( 
              'name'  => $rowSkills['ID'],
              'title' => '<span title="' . $rowSkills['NAME'] . '">' . $rowSkills['NAME'] . '</span>',   // to include tooltip
              'width' => 50,
              'align' => 'center'
          );
          $fieldinfooverview_set[] = $fieldinfooverview;
          $rowSkills_set[] = $rowSkills;
      }
      
      // last col = value summary per each emplyoee as row
      $fieldinfooverview = array( 
          'name'  => 'SUM',
          'title' => 'SUM',
          'width' => 100,
          'align' => 'right'
      );
      $fieldinfooverview_set[] = $fieldinfooverview;
      ...

client side - defining datagrid and making cols dynamically

Code:

<style>
.datagrid-header-row td 
{
	height:150px;    
	-webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg); 
	-ms-transform: rotate(-90deg); 
	-o-transform: rotate(-90deg); 
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>

      <table id="dgSkillReport" class="easyui-datagrid" style="width:95%;"
             data-options="
                rownumbers: false,
                singleSelect: true,
                showFooter: true,
        	remoteSort: false,
                fitColumns: false,
        	multiSort:  false
                onDblClickRow: function(index,row)
                 {
                  		ShowContextView(index,row);
                 }    
                ">     
      </table>

[jahangir]

Add following css to set column header height and alignment to bottom.

Code:

.datagrid-header-row{ 
   height:100px;
   vertical-align: bottom;
}

and use following js code to rotate text in header.
plz dont forget to set column resizable property to false because column resizing will reset all these settings.

Code:

var dg = $('#dg')

var cell_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] .datagrid-cell');	
var span_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] span');

span_1.css('display','block');
span_1.css('transform','rotate(-90deg)');		
span_1.css('width','100px');
span_1.css('position','relative');
span_1.css('left','10px');
span_1.css('top','36px');

cell_1.css('width','250px');
cell_1.css('height','100px');

Please refer to following example

http://code.reloado.com/jbhatti/9/edit#preview

[rannacher]

Dear jahangir,

u r the man - THX A LOT!!! I owe you something!

Just 2 things I noticed, maybe there is a hint also for these.
And thx again a lot in advance.

BR Michael.

1.
when I create the cols hard coded like below it works to apply the css code you gave, if I create the cols dynamically
then it is simply not working.

this code

Code:

for (var i=0; i<dgcolsoverview_len; i++)
{
  logconsole("Col"+i+"=["+JSON.stringify(colStructOverview[0][i])+"]");
	var span = dg.datagrid('getPanel').find('div.datagrid-header td[field="'+colStructOverview[0][i].field+'"] span');
	var cell = dg.datagrid('getPanel').find('div.datagrid-header td[field="'+colStructOverview[0][i].field+'"] .datagrid-cell');	
  if (i==0)
  {
    logconsole("handle col employee name");
  	span.css('display','block');
  	span.css('width','141px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','128px');    
  	cell.css('width','141px');
  	cell.css('height','150px');
  }
  else if (i==(dgcolsoverview_len-1))
  {
    logconsole("handle col SUM");
  	span.css('display','block');
  	span.css('width','46px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','128px');    
  	cell.css('width','46px');
  	cell.css('height','150px');
  }
  else
  {
    logconsole("handle one of the n value cols = ["+colStructOverview[0][i].field+"]");
  	span.css('display','block');
  	span.css('transform','rotate(-90deg)');		
  	span.css('width','36px');
  	span.css('position','relative');
  	span.css('left','0px');   
  	span.css('top','115px');    
  	cell.css('width','36px');
  	cell.css('height','150px');
  }
}

works when table is created with the columns this way:

Code:

      <table id="dgSkillReport" class="easyui-datagrid" style="width:100%;"    
             data-options="
                rownumbers:   true,				 
                fitColumns:   false,
                singleSelect: true,
                showFooter:   true                
                ">     
        <thead>
            <tr>
                <th data-options="field:'MITARBEITER',   width:150,align:'left',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Employee Name</th>
                <th data-options="field:'1', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">View Formwork Colummns</th>
                <th data-options="field:'2', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Value2</th>
                <th data-options="field:'3', width:45, align:'center',resizable:false, formatter:EasyUIDatagridGeneralFormatter">Value3</th>
                <th data-options="field:'SUM',    width:55,align:'right',resizable:false, formatter:EasyUIDatagridGeneralFormatter">SUM</th>
            </tr>
        </thead>
      </table>

with 

but the css does not work when table created without cols and cols done dynamically like

Code:

      <table id="dgSkillReport" class="easyui-datagrid" style="width:100%;"    
             data-options="
                rownumbers:   true,				 
                fitColumns:   false,
                singleSelect: true,
                showFooter:   true                
                ">     
      </table>


              ...
              for (var i=0; i<dgcolsoverview_len; i++)
              { 
                var menuItemOverview = 
                {
                  field:      jsondata.columnsoverview[i].name,
                  title:      ( typeof(jsondata.columnsoverview[i].title) != 'undefined' ) ? jsondata.columnsoverview[i].title : jsondata.columnsoverview[i].name,                                             
                  width:      jsondata.columnsoverview[i].width,
                  align:      jsondata.columnsoverview[i].align,
                  resizable:  false
                };
                colItemsOverview.push(menuItemOverview);    
              }
              colStructOverview.push(colItemsOverview); 
              
              dg.datagrid({ columns: colStructOverview });

2.
below code is applying to all datagrids in the page, any idea how I can scope only to the one with ID="abc"?
Tried all I can think of like #abc.datagrid-header-row or #abc .datagrid-header-row

Code:

.datagrid-header-row
{ 
   height:150px;
   vertical-align: bottom;
} 

 

[jahangir]

but the css does not work when table created without cols and cols done dynamically like

It works with dynamically created columns just set header text alignment, rotation, size and position after the grid is created and loaded with data.
plz see below example with dynamically created columns.

http://code.reloado.com/jbhatti/10/edit

below code is applying to all datagrids in the page, any idea how I can scope only to the one with ID="abc"?
Tried all I can think of like #abc.datagrid-header-row or #abc .datagrid-header-row

Code:

.datagrid-header-row
{ 
   height:150px;
   vertical-align: bottom;
} 

use this code to set header height and vertical alignment

Code:

var hd = dg.datagrid('getPanel').find('div.datagrid-header');		   
hd.css('height','100px');
var hr = dg.datagrid('getPanel').find('div.datagrid-header .datagrid-header-row');		   
hr.css('vertical-align','bottom');

[rannacher]

Hi jahangir,

thx a lot again, now works like a charm!!!

Just took me almost 2 days to figure out that below <span> in the php script which is meant for tooltip only,
completely scrambled the css and whatever I did this turned the respective cols 180° upside down and not 90° as I wanted.

Anyway now it is super fine, thx to your help!!!

Code:

      while($rowSkills = mysqli_fetch_assoc($resultSkills)) 
      {

          $fieldinfooverview = array( 
              'name'  => 'COL_' . $rowSkills['ID'],     
              //'title' => '<span title="' . $rowSkills['NAME'] . '">' . $rowSkills['NAME'] . '</span>',   // to include tooltip
              'title' => $rowSkills['NAME'],   
              'width' => 45,
              'align' => 'left'
          );
          $fieldinfooverview_set[] = $fieldinfooverview;
          $rowSkills_set[] = $rowSkills;
      }

Greetings!!!
BR Michael.

[fguibert]

Hi all, possible to get an example code working ? all links are dead.... thanks

[jahangir]

Dear fguibert,

Below is the complete working example code.

Code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>     
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <link id="dlink" rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>        
</head>

<body>   

    <table id="dg" class="easyui-datagrid" style="width:700px;height:220px"
            data-options="                                
                fitColumns: false,
                singleSelect: true,
                rownumbers: false				                
            ">
        <thead>
            <tr>
                <th data-options="field:'itemid',width:80">Item ID</th>
                <th data-options="field:'productid',width:120">Product ID</th>
                <th data-options="field:'listprice',width:80,align:'right'">List Price</th>
                <th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
                <th data-options="field:'attr1',width:250, resizable: false">Attribute</th>
                <th data-options="field:'status',width:65,align:'center'">Status</th>
            </tr>
        </thead>
    </table>
    
</body>
</html>
<style>
	
.datagrid-header-row{ 
   height:100px;
   vertical-align: bottom;
}

</style>

<script>

var data = [
	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
]
	
  $(document).ready(function () {
	var dg = $('#dg');
	dg.datagrid({data:data});  	

	var cell_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] .datagrid-cell');	
	var span_1 = dg.datagrid('getPanel').find('div.datagrid-header td[field="attr1"] span');

	span_1.css('display','block');
	span_1.css('transform','rotate(-90deg)');		
	span_1.css('width','100px');
	span_1.css('position','relative');
	span_1.css('left','10px');
	span_1.css('top','36px');

	cell_1.css('width','250px');
	cell_1.css('height','100px');
		
	var cell_2 = dg.datagrid('getPanel').find('div.datagrid-header td[field="status"] .datagrid-cell');	
	var span_2 = dg.datagrid('getPanel').find('div.datagrid-header td[field="status"] span');
		
	span_2.css('display','block');
	span_2.css('transform','rotate(-90deg)');		
	span_2.css('width','100px');
	span_2.css('position','relative');
	span_2.css('left','-23px');
	span_2.css('top','69px');

	cell_2.css('width','65px');
	cell_2.css('height','100px');		
	 
  });

</script>

[fguibert]

great, thank you very much