rannacher
|
|
« on: April 14, 2019, 04:34:12 PM » |
|
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. /* 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); }
|
|
« Last Edit: May 09, 2019, 04:48:24 PM by rannacher »
|
Logged
|
|
|
|
thecyberzone
|
|
« Reply #1 on: May 06, 2019, 12:21:03 AM » |
|
You may try this way ... var dg = $('#dg1'); var td = dg.datagrid('getPanel').find('div.datagrid-header td[field="Attended"]'); td.css('height','100px');
|
|
|
Logged
|
|
|
|
rannacher
|
|
« Reply #2 on: May 06, 2019, 08:22:06 AM » |
|
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! <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!
|
|
|
Logged
|
|
|
|
thecyberzone
|
|
« Reply #3 on: May 06, 2019, 08:48:41 AM » |
|
Try to modify the height of the header row insted of increasing a single column height/width. <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>
|
|
« Last Edit: May 06, 2019, 09:02:43 AM by thecyberzone »
|
Logged
|
|
|
|
rannacher
|
|
« Reply #4 on: May 06, 2019, 01:39:24 PM » |
|
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 //--------------------------------------------------------------------- // 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 <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>
|
|
|
Logged
|
|
|
|
jahangir
|
|
« Reply #5 on: May 07, 2019, 04:01:41 AM » |
|
Add following css to set column header height and alignment to bottom. .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. 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
|
|
|
Logged
|
|
|
|
rannacher
|
|
« Reply #6 on: May 07, 2019, 11:36:48 PM » |
|
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 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: <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 <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 .datagrid-header-row { height:150px; vertical-align: bottom; }
|
|
|
Logged
|
|
|
|
jahangir
|
|
« Reply #7 on: May 08, 2019, 01:29:50 AM » |
|
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/editbelow 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 .datagrid-header-row { height:150px; vertical-align: bottom; }
use this code to set header height and vertical alignment 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');
|
|
« Last Edit: May 08, 2019, 02:18:45 AM by jahangir »
|
Logged
|
|
|
|
rannacher
|
|
« Reply #8 on: May 09, 2019, 04:47:50 PM » |
|
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!!! 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.
|
|
« Last Edit: May 09, 2019, 04:49:53 PM by rannacher »
|
Logged
|
|
|
|
fguibert
Newbie
Posts: 23
|
|
« Reply #9 on: February 09, 2022, 03:05:32 AM » |
|
Hi all, possible to get an example code working ? all links are dead.... thanks
|
|
|
Logged
|
|
|
|
jahangir
|
|
« Reply #10 on: February 10, 2022, 12:26:34 AM » |
|
Dear fguibert, Below is the complete working example 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>
|
|
|
Logged
|
|
|
|
fguibert
Newbie
Posts: 23
|
|
« Reply #11 on: February 10, 2022, 04:45:55 AM » |
|
great, thank you very much
|
|
|
Logged
|
|
|
|
|