jQuery Grid Plugin - jqGrid - Topic: headers with vertical orientation

OlegK on headers with vertical orientation

Tue, 02 Mar 2010 14:53:00 +0200

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

tony on headers with vertical orientation

Tue, 02 Mar 2010 14:44:05 +0200

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

OlegK on headers with vertical orientation

Tue, 02 Mar 2010 13:53:44 +0200

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

tony on headers with vertical orientation

Tue, 02 Mar 2010 11:37:09 +0200

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

OlegK on headers with vertical orientation

Wed, 24 Feb 2010 01:14:53 +0200

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

tony on headers with vertical orientation

Tue, 23 Feb 2010 11:17:02 +0200

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

OlegK on headers with vertical orientation

Mon, 22 Feb 2010 22:57:37 +0200

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:

        /* 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.

Les on headers with vertical orientation

Mon, 22 Feb 2010 18:08:19 +0200

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?

tony on headers with vertical orientation

Mon, 22 Feb 2010 13:36:01 +0200

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

OlegK on headers with vertical orientation

Sun, 21 Feb 2010 01:10:57 +0200

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

tony on headers with vertical orientation

Sat, 20 Feb 2010 11:06:18 +0200

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

OlegK on headers with vertical orientation

Wed, 17 Feb 2010 12:51:15 +0200

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

tony on headers with vertical orientation

Wed, 17 Feb 2010 11:46:10 +0200

Hello,

Thanks. Do you have look (I not) how jQuery UI tabs implement such feature?

Best Regards

Tony

OlegK on headers with vertical orientation

Mon, 15 Feb 2010 22:11:44 +0200

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.

OlegK on headers with vertical orientation

Mon, 15 Feb 2010 10:41:02 +0200

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

Les on headers with vertical orientation

Sun, 14 Feb 2010 15:48:54 +0200

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.

OlegK on headers with vertical orientation

Sun, 14 Feb 2010 15:05:30 +0200

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

Les on headers with vertical orientation

Sun, 14 Feb 2010 03:12:48 +0200

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

http://highcharts.com/

OlegK on headers with vertical orientation

Sun, 14 Feb 2010 02:25:56 +0200

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