Forum
Log In
Home
Topic RSS
02:25
10/08/2009
Offline
Hi Tony!
In a project I need display in a lot of tables information which could be coded as a checkbox. The information here is: "Is something is a part of another something". Columns of such kind of information has a headers of cause. The width of headers is much longer as a width of a checkbox, so if I place such information in Excel I make headers vertical oriented. One can demonstrate that on the following picture
Is it possible to make some headers in jqGrid table to be vertical oriented like in the example from Excel?
Thank you
Oleg
03:12
11/12/2009
Offline
jQuery Grid won't let you rotate labels and this looks to me more like a scatter plot, not grid. So, you could use charting software to display this "grid".
My favorite is Highcharts, but there are other good charting libraries.
I'd ask this question in this forum:
http://highslide.com/forum/vie.....um.php?f=9
See also:
15:05
10/08/2009
Offline
Thank you very much for your advice Les,
but in my case thr information could be not displayed as a chart. In the most tables, which I have, more than 70% of the columns contain texts and only some of columns contain checkboxes. The table from the picture above is an extreme case. It has about 6 text columns (which are cut) and the rest of columns are checkboxes.
So the best way for my case is a table. I use jqGrid and like a lot of it’s features, for example, multipleSearch. So I want stay by jqGrid.
I look for a way to route some jqGrid headers to 90 degrees, to set width of this selected headers to a fixed value and set a height of jqGrid headers to a satisfied value. It would be nice, if such changes stay after some jqGrid operations like refresh or searching.
Best regards
Oleg
15:48
11/12/2009
Offline
Oleg, if you want to continue to use jqGrid, this is still would be possible, but you will need to draw the vertical labels yourself.
See how this is done in Highcharts or jqPlot, which both allow to rotate labels to any degree.
10:41
10/08/2009
Offline
Sorry Les, I didn't find a solution of my problem on http://highcharts.com/demo/?ex.....me=default. On the page there is only some vertical text displayed. But the same page will be constructed in the different way for different browsers. For Firefox will be used CSS like
position: absolute; left: -30px; white-space: nowrap; bottom: 227px;
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 100%;
but for IE will be used a object new Highcharts.Chart({...}).
I'll try describe more detailed the problem which I has.
It is not difficult to find in Internet a way to display a vertical text. I tried for example following one:
We define in CSS style "rotate" like
.rotate
{
position: absolute;
left: 5px;
white-space: nowrap;
bottom: -10px;
vertical-align: middle;
text-align: center;
/* for Safari */
-webkit-transform: rotate(-90deg);
/* for Firefox */
-moz-transform: rotate(-90deg);
/* for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Then, after creating a jqGrid
var cn = [...,'Std','FachlicheTests',...];
var cm = [...
{ name: 'Std', width: 20, formatter: 'checkbox', ...}..
{ name: 'IsFachlicheTests', width: 20, formatter: 'checkbox', ...}
...
];
var grid = jQuery('#list').jqGrid({...,colNames: cn, colModel: cm,...});
we add "rotate" class to columns which has checkboxes:
var thd = $("thead:first", grid.hDiv).get(0);
for (var i = 0; i < cn.length; i++) {
if (cm[i].formatter === "checkbox")
$("tr th:eq(" + (i + 1) + ") div", thd).addClass("rotate");
}
where cm is colModel of our jqGrid. Then we change the hight of headers with
$("th").height("100px");
As a result we have something, which looks a little like what we want, but the results are unsatisfied.
In Firefox we can see something like
and in IE 8 like
One can see bad quality of vertical texts especially in IE.
Moreover, textes from the column headers are cut based on width of the column, which are height now.
One can read only some first characters from the headers.
And, at the end, the position of textes depends also from the column width.
So such solution doesn’t works and I am looking for another way.
Best regards
Oleg
22:11
10/08/2009
Offline
timestamp of my last post was not changed in the topic headers. As the last modification date of the topic stay 14/02/2010 by Les. To fix the problem only I post this message.
11:46
Moderators
30/10/2007
Offline
Hello,
Thanks. Do you have look (I not) how jQuery UI tabs implement such feature?
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
12:51
10/08/2009
Offline
Hello,
sorry Tony, I could not find in jQuery UI tabs or somewere else in jQuery UI vertical oriented textes.
In the most examples which I found before, which works in IE 6 and above, are based on "writing-mode: tb-rl" style and some "filter" like "filter: flipv fliph" or "filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)". If one use "writing-mode: tb-rl" without any "filter" the text is displayed as vertical, but it has not exact the orientation which I'd prefer. The mode "writing-mode: tb-rl" is probably introduced for japanese textes, so such orientation. Textes with a "filter" style has correct orientation can be bad zoomed in inside of IE 8. But it is not my main problem. I write about this problem in jqGrid forum, because my main problem currently is the cutting of textes inside jqGrid header. See
Best regards
Oleg
11:06
Moderators
30/10/2007
Offline
Hello Oleg,
I have just play a little with this. Humm.
Position absolute is not needed – the element has always relative.
Now I have succes with this:
.rotate
{
/* for Safari */
-webkit-transform: rotate(-90deg);
/* for Firefox */
-moz-transform: rotate(-90deg);
/* for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
To ilustratee go in demo page – New in 3.6 – there is example Rotated Headers
The only problem is that it does not work in IE8. in IE7 is ok.
Please let me know if you have look at the demo to remove that item
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
01:10
10/08/2009
Offline
Hello Tony!
Thank you very much! Now I understand that the problem can be solved. I made some more experiments and find strange behaviors.
First of all, your example looks like very good in IE6 and Firefox 3.6. IE8 seems have several bugs, but if one set property (margin-left and margin-bottom) on column headers dynamically, different value per column, one could receive more readable results. Nevertheless texts will be cut in IE8 like I describe in my previous post.
Because currently I create a solution for customer, where almost IE6 used, I tried to reproduce you results. But I find interesting and strange things. I receive very good results in IE6, but bad results not only in IE8, but also in Firefox 3.6:
in IE6 we can see:
in Firefox 3.6:
in IE8:
Moreover, I find by the way a real bug in sortable column headers in current version of jqGrid. If one drag last column header on another place in any browser (IE6, FF36, IE8) one receive wrong headers:
Have you an idea what is different in my and your example?
The code of my examples with the last version of jqGrid from http://github.com/tonytomov/jq.....ree/master you can download from http://www.ok-soft-gmbh.com/Ve.....eaders.zip. Here is the html code of my test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
<title>Demonstration of the VerticalHeaders problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/plugins/ui.multiselect.css" />
<style type="text/css">
.rotate
{
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2/ui/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.base.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.common.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.formedit.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.inlinedit.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.custom.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.fmatter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.fmatter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.jqueryui.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.searchFilter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/plugins/ui.multiselect.js"> </script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jqDnR.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jqModal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var grid = jQuery('#list').jqGrid({
caption: 'Testclusters',
height: 'auto',
gridview: true,
rownumbers: true,
sortable: true,
datatype: 'local',
viewrecords: true,
pager: '#pager',
pgbuttons: false,
pginput: false,
rownumbers: true,
colNames: ['Name', 'Testtiefe', 'Std', 'FachlicheTests', 'RowVersion'],
colModel: [
{ name: 'Name', index: 'Name', width: 120 },
{ name: 'TesttiefeName', index: 'TesttiefeName', width: 180 },
{ name: 'Std', width: 21, index: 'IsStandardtest', formatter: 'checkbox', align: 'center' },
{ name: 'IsFachlicheTests', width: 21, index: 'IsFachlicheTests', formatter: 'checkbox', align: 'center' },
{ name: 'RowVersion', index: 'RowVersion', width: 50, hidden: true }
]
}).navGrid('#pager', { edit: false, add: false, del: false, refresh: true, view: false })
.navButtonAdd('#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
jQuery('#list').jqGrid('columnChooser');
}
});
var myData = [
{ Name: "VIA XP", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC31" },
{ Name: "KUBUS", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC32" }
];
for (var i = 0; i <= myData.length; i++)
jQuery("#list").addRowData(i + 1, myData[i]);
var trHead = $("thead:first tr");
$("thead:first tr th").height("100px");
$("th:eq(3) div", trHead).addClass("rotate")
.css('margin-left', '2px');
$("th:eq(4) div", trHead).addClass("rotate")
.css('margin-left', '2px')
.css('margin-bottom', '8px');
});
</script>
</head>
<body>
<div>
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>
(fixing of margin-left and margin bottom in the example are not important, but the results after the changes in IE6 looks like better. I don’t modify “rotate” class with these values).
By the way, you can direct see Test.thm on the page http://www.ok-soft-gmbh.com/VerticalHeaders/Test.htm. To be more close to you example I modified my example to load scripts and css from http://trirand.com/blog/jqgrid/ are the same.
Best regards
Oleg
13:36
Moderators
30/10/2007
Offline
Hello Oleg,
Could you please look at this jQuery UI widget:
http://code.google.com/p/ist-ui-panel/
I think tha using this approach is better
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
18:08
11/12/2009
Offline
Oleg, hi!
Search for the addText method in this Highcharts code to see how the text rotation is done.
"addText: function(str, x, y, style, rotation, align)"
http://highcharts.com/js/highc.....1.2.src.js
Is this helpful?
22:57
10/08/2009
Offline
Hello Tony!
Thank you for advice about jQuery UI widget http://code.google.com/p/ist-ui-panel/. It looks like very cool. It pushes me for more investigations.
In http://code.google.com/p/ist-ui-panel/ used SVG in general. For IE one uses also filter technic. But one uses (see http://code.google.com/p/jquer.....;panel.css) flipv() and fliph() together with “position:absolute” and “writing-mode:tb-rl”. Using of “position:absolute” makes calculation on text position more complex. And Microsoft writes in documentation of flipv() and fliph() filters (http://msdn.microsoft.com/en-u.....85%29.aspx and http://msdn.microsoft.com/en-u.....85%29.aspx) following “You can create this effect more efficiently with the BasicImage filter.” In this case I trust Microsoft.
But during this analysis I found the reason of cutting of text in my example. The reason is that I had not so wide column headers as you. So the texts are cut. As a workaround one can set a large header width before adding class “rotate”! So I could fix my example: see http://www.ok-soft-gmbh.com/Ve.....tFixed.htm. Now the example works fine with IE6, IE7, IE8, Firefox 3.6, Safari 4 and Google Chrome 4. Only for Opera (which is not interesting for my current Project) one has to use probably SVG technic.
New version of my example looks like following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head">
<title>Demonstration of the VerticalHeaders problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<link rel="stylesheet" type="text/css" href="jquery-ui-1.7.2/themes/redmond/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="jquery.jqGrid-3.6.4-20090220/plugins/ui.multiselect.css" />
<style type="text/css">
.rotate
{
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.2/ui/jquery-ui.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.base.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.common.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.formedit.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.inlinedit.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.custom.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.fmatter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.fmatter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/grid.jqueryui.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jquery.searchFilter.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/plugins/ui.multiselect.js"> </script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jqDnR.js"></script>
<script type="text/javascript" src="jquery.jqGrid-3.6.4-20090220/js/jqModal.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var grid = jQuery('#list').jqGrid({
caption: 'Testclusters',
height: 'auto',
gridview: true,
rownumbers: true,
sortable: true,
datatype: 'local',
viewrecords: true,
pager: '#pager',
pgbuttons: false,
pginput: false,
rownumbers: true,
colNames: ['Name', 'Testtiefe', 'Std', 'FachlicheTests', 'RowVersion'],
colModel: [
{ name: 'Name', index: 'Name', width: 120 },
{ name: 'TesttiefeName', index: 'TesttiefeName', width: 180 },
{ name: 'Std', width: 21, index: 'IsStandardtest', formatter: 'checkbox', align: 'center' },
{ name: 'IsFachlicheTests', width: 21, index: 'IsFachlicheTests', formatter: 'checkbox', align: 'center' },
{ name: 'RowVersion', index: 'RowVersion', width: 50, hidden: true }
]
}).navGrid('#pager', { edit: false, add: false, del: false, refresh: true, view: false })
.navButtonAdd('#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "choose columns",
onClickButton: function() {
jQuery('#list').jqGrid('columnChooser');
}
});
var myData = [
{ Name: "VIA XP", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC31" },
{ Name: "KUBUS", TesttiefeName: "Alle SW-Produkte", RowVersion: "20FC32" }
];
for (var i = 0; i <= myData.length; i++)
jQuery("#list").addRowData(i + 1, myData[i]);
var trHead = $("thead:first tr");
var cm = grid.getGridParam("colModel");
$("thead:first tr th").height("120px");
var headerHeight = $("thead:first tr th").height();
for (var iCol = 0; iCol < cm.length; iCol++) {
var cmi = cm[iCol];
if (cmi.formatter === 'checkbox') {
// we must set width of column header div BEFOR adding class "rotate" to
// prevent text cutting based on the current column width
var headDiv = $("th:eq(" + iCol + ") div", trHead);
headDiv.width(headerHeight).addClass("rotate");
if (!$.browser.msie) {
if ($.browser.mozilla)
headDiv.css("left", (cmi.width – headerHeight) / 2 + 3).css("bottom", 7);
else
headDiv.css("left", (cmi.width – headerHeight) / 2);
}
else {
var ieVer = jQuery.browser.version.substr(0, 3);
// Internet Explorer
if (ieVer != "6.0″ && ieVer != "7.0″) {
headDiv.css("left", cmi.width / 2 – 4).css("bottom", headerHeight / 2 – 3);
$("span", headDiv).css("left", 0);
}
else
headDiv.css("left", 3);
}
}
}
// TODO: for Opera SVG can be used. One should insert instead of header text something like following
// ("My Header" is the text)
//<object data="data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg'><text x='-90px' y='16px'
//style='font-weight:bold;font-family:Verdana,Arial,sans-serif;font-size:11px;fill:rgb(34, 34, 34);' transform='rotate(-90)'
//text-rendering='optimizeSpeed'>My Header</text></svg>" type="image/svg+xml" style="height: 100px; width:
//100%; position: absolute; bottom: 0pt; left: 0pt; z-index: 2;"></object>
});
</script>
</head>
<body>
<div>
<table id="list"></table>
<div id="pager"></div>
</div>
</body>
</html>
If you have interest, you can include “vertical header” feature based on this example in one of the next version of jqGrid. To be general one should probably add support on Opera or include in documentation, that “vertical header” are currently not supported in Opera.
One more TODO, which not yet solved is the placing of sorting bitmaps for IE8.
Best regards
Oleg
P.S. Tony, please don’t forget fix bug in column sorting which I describe before. It is not depend on “vertical header” feature.
11:17
Moderators
30/10/2007
Offline
Hello Oleg,
Thanks for this. Will see what I can do.
Also will not forget to fix the sortable columns bug.
Thanks again.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
01:14
10/08/2009
Offline
Hi!
Only small remark. Adding "-o-transform: rotate(-90deg);" to the "rotate" CSS class (see http://www.ok-soft-gmbh.com/Ve.....FixedO.htm) makes example working in the Opera 10.50beta. So the part with "if ($.browser.mozilla)" can be changed to something like
if ($.browser.mozilla || $.browser.opera)
headDiv.css("left", (cmi.width - headerHeight) / 2 + 2).css("bottom", 7);
Oleg
11:37
Moderators
30/10/2007
Offline
Hello Oleg,
The bug that you mentioted with the last sortable column is fixed.
http://github.com/tonytomov/jq.....f2e2889c22
Actually this is not a fix, but rather we change some options in UI sortable widget.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
13:53
10/08/2009
Offline
Thank you very much, Tony!
It seems to me you have found the correct place of the problem, but the problem is not yet full fixed. To be more exact, the bug in rearder of the last column exist not only for less then 20px like you wrote in the comment on github.com, but also up to 39px:
(see http://www.ok-soft-gmbh.com/Ve.....ixedG1.htm). But after we refresh the picture with respect of Ctrl + '+' or Ctrl + '-' (zoom in/out), everthing will be seen correctly (!!!).
After your last fix (setting "scrollSensitivity": "1″ option for sortable_opts) the old problem is not fully fixed. If we try to reorder (drag & drop) the last column, which is wide, but not fully seen like this one
it looks like following after reordering:
But after we use scroll bar to move everythig for at least one pixel, we can sees the correct table:
So If you find a way to refresh the table columns after usage of UI sortable widget, one could use large default value of "scrollSensitivity" option. The other solution is to reduce "scrollSensitivity" to 1px (not to 10px like now of the http://github.com/tonytomov/jq.....f2e2889c22) seems also works fine.
Best regards
Oleg
14:44
Moderators
30/10/2007
Offline
Hello Oleg,
Thanks. After publishing I'm thinking the same. So I will change it to 1px. Please let me known if it works.
Best Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
14:53
10/08/2009
Offline
I already tested the way with 1px befor I wrote me last post. At least I was enable to drag a column which are 1 pixel wide 
, so I hope, that the end user will have no problem too. The real reason of the described problem is the refresh of the column header after the drop, but I am happy also with 1px-solution too.
Best regards
Oleg
Most Users Ever Online: 715
Currently Online:
17 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
