Header sort arrow on next line.

The header titles in our application use either 1 or 2 lines of text. When there is a single line, we prefer it to be on the second line. This is accomplished using the following syntax:

var myColumns = [" Size", "Company Part Number", "Universal Part Number", "Max O.D. M", " C", " H", " G", "Approx Wt.(lb)"];

Everything works well, except when we sort a column, the 'sort arrow' appears on the 'next line' which would be the 3rd line. This causes the sort arrow to be 'clipped' by the header row height setting. Increasing the header row height setting allows the sort arrow to be visible, but looks bad and is not an efficient use of space.

Note that the text is center justified as if the sort arrow were on the correct line. For example, the column titled 'C' has the 'C' on the second line. When the user clicks on that column heading, the 'C' shifts to the left the correct amount, if the sort arrow were placed to the right of it. However, the sort arrow is placed in that exact horizontal position, but on the third line.

Preferably, I need to position the sort arrow in the correct location. However, as a work around, I would like to turn the sort-arrow 'off' while maintaining the sort functionality.

Anyone else solved this issue or have ideas? Thanks in advance for any help!

Eric Dykstra

July 3,

Check this post (could give some ideas):
http://activewidgets.com/javascript.forum.637.3/sort-button-right-aligned.html

Carlos

July 3,

Carlos,

Thanks ... I did find that post, but thought I should start a new one since this issue seems different. I did try some ideas based on that post. No luck. :(

Eric

Eric Dykstra

July 3,

As a "bad" work-around, the arrow functionallity could be replaced with Asc/Desc different background color (sorted column), Hopping could find "somewhere" (next release?) ... a proper fix. http://activewidgets.com/javascript.forum.4944.4/how-can-i-highlight-a.html
HTH

Carlos

July 3,

Is there a way to turn the 'sort-arrow' off, while keeping the sorting functionality? That would be my preferred 'work-around' until the issue with the 'sort-arrow' on the wrong line is corrected.

Thanks,

Eric Dykstra

July 4,

I found another "work-around" , just edit grid.png (image file) and move both arrows close to the top border (but in same horiz position), did not test it a lot, but seems to work fine.
Thanks

Carlos

July 4,

Carlos,

The amount I need to move it vertically is equal to the height of the png image. I don't see how it can work.

Do you know how how to turn the sort-arrow off? Obviously, I could swap out the images with 'blank' ones, but I don't want the headings to shift to the left when they re-center with the blank sort arrow image.

Eric Dykstra

July 4,

To disable showing arrows on sort use:

document.styleSheets[document.styleSheets.length-1].addRule(".active-box-sort", "display: none;");

You are right, with left-shift effect (and that is exactly how I notice that "arrows" are not painted on a third line), but could not acquire a centered position because the (first-line) plus .... so, the fix to put arrows at a the top of grid.png is just to see it ( and "trim" header height just to show 2 lines).
This is the code I use to test it:
I will post a link to a modified grid.png (sorry cause I broke the transparent color, but with a better img-editor can do a right one).
HtH
Carlos

<html>
<head>
    <title>ActiveWidgets Grid :: Examples</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="lib/grid.css" rel="stylesheet" type="text/css" >
    <script src="lib/grid.js"></script>
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;}
        .active-column-3 {text-align: right;}
        .active-column-4 {text-align: right;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}

   .active-templates-header .active-gecko-item {display: block}
    .active-templates-header .active-box-image {display: none}
    .active-box-resize {background-repeat: repeat-y;}

    </style>

    <script>
        var myData = [
            ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
            ["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
            ["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
            ["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"]
        ];
var myColumns = ["Size", "Company<br />Part Number", "Universal<br />Part Number", "Max O.D.<br />M", "<br />C"];
    </script>
</head>
<body>
    <script>

    var obj = new Active.Controls.Grid;
    obj.setRowProperty("count", 4);
    obj.setColumnProperty("count", 5);
   obj.setColumnHeaderHeight("29px");  //// Adjusted height just to show two lines
    obj.setDataProperty("text", function(i, j){return myData[i][j]});
    obj.setColumnProperty("text", function(i){return myColumns[i]});
document.write(obj);
</script>
</body>
</html>

July 5,

Here is patched grid.png link:
http://www.telefonica.net/web2/webtress/grid.png

Carlos

July 5,

Thank You Carlos!

I should note that the sort-arrow appears in the correct position for FireFox which implies we have Bill Gates to thank for this issue. :)

Eric Dykstra

July 5,

This topic is archived.

Header sort arrow on next line.

See also:

Search

New Data Grid

Version 2