:: Forum >>

Sorting Numeric Data

I am having problems getting formatted numeric data to sort correctly. I have found a few pertinent posts, but none are working for me. I have numeric formatted as "($###,##.##)". I tried one array for data/text and another unformatted array for data/value, but that did not work. I then came across a post using a function to set the value based on the text:

obj.setCellValue(function(col, row){return parseFloat(myDataText[row][col].replace(/[^0-9.]/m, "")); }, 2);

but when I have negative values in the column (with "()"), it does nothing.

I have verified that my cell formats are set corrcetly (str, num or date).

If I go back to the unformatted array for date/value, what format should the numeric values be? #####.##? Should I remove commas? Where do I include the sign?

Thank you.
Brian Crandall
Monday, April 25, 2011
I have been trying this off and on for three days. Still cannot figure it out. Here is sample code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Grid Sort Test</title>

    <style type="text/css">
        .aw-quirks * {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;

        body {font: 12px Tahoma}
    <script src="runtime/lib/aw.js" type="text/javascript"></script>
    <link href="runtime/styles/classic/aw.css" rel="stylesheet">

    <style type="text/css">
        #myGrid {height: 400px; width: 950px}
        /* make sure that all links are blue and remain blue. */
        #myGrid a {color: #0000CC;}
        #myGrid a:hover {color: #0000CC;}
        #myGrid a:link {color: #0000CC;}
        #myGrid a:visted {color: #0000CC;}

        /* row and cell borders */
        #myGrid .aw-grid-row {border-bottom: 1px solid #999999;} /* add HEIGHT here for multi-line cells, e.g. " height: 60px;" */
        #myGrid .aw-grid-cell {border-right: 1px solid #999999;}

        #myGrid .aw-grid-footer {border-right: 1px solid #999999; border-top: 1px solid #999999;
                                background-color: #ccffcc;
                                padding-right: 3px; padding-right: 3px; padding-bottom: 1px; padding-top: 1px;
                                font-weight: bold;}

        /* alternate row colors */
        #myGrid .aw-alternate-even {background: #ffffff;}
        #myGrid .aw-alternate-odd {background: #f4f4f4;}

        /* color of highlighted row(s) */
        /* BLUEs: ade1ff 96d8fe 66ffff PINKs: ffd9d9* YELLOWs: ffefad */
        #myGrid .aw-rows-selected {background: #ade1ff!important; color:#000000!important;}

                #myGrid .aw-column-0 {width: 90px; text-align: left ; }
                #myGrid .aw-column-1 {width: 100px; text-align: right ; }
        /* box model fix for strict doctypes, safari */
        .aw-strict #myGrid .aw-grid-cell {padding-right: 3px;}
        .aw-strict #myGrid .aw-grid-row {padding-bottom: 3px;}
     var myDataText = [];
     var myDataValue = [];
    <script>myDataText.push(["AIRBUS 22","$128.99"]); myDataValue.push(["AIRBUS 22","128.99"]);</script>
    <script>myDataText.push(["AIRBUS 22","$2,181,888.43"]); myDataValue.push(["AIRBUS 22","2,181,888.43"]);</script>
    <script>myDataText.push(["AIRBUS 22","($10,140.82)"]); myDataValue.push(["AIRBUS 22","-10,140.82"]);</script>
    <script>myDataText.push(["AIRBUS 22","($30,196.26)"]); myDataValue.push(["AIRBUS 22","-30,196.26"]);</script>
    <script>myDataText.push(["AIRBUS 22","$187,627.75"]); myDataValue.push(["AIRBUS 22","187,627.75"]);</script>
    <script>myDataText.push(["AIRBUS 22","$539.40"]); myDataValue.push(["AIRBUS 22","539.40"]);</script>
    <script>myDataText.push(["AIRBUS 22","($616.51)"]); myDataValue.push(["AIRBUS 22","-616.51"]);</script>
    <script>myDataText.push(["AIRBUS 22","$201,079.85"]); myDataValue.push(["AIRBUS 22","201,079.85"]);</script>
    <script>myDataText.push(["AIRBUS 22","($11,671.26)"]); myDataValue.push(["AIRBUS 22","-11,671.26"]);</script>
    <!-- insert control tag -->
    <span id="myGrid"></span>

    <!-- create controls -->
    <script type="text/javascript">
        // define column labels
        var columns = ["Program","Amount"];
        var grid = new AW.Grid.Extended;
        // set fixed columns on the left side
        // set fixed columns on the right side
        // set selection mode to multiple rows
        // set number of columns to display. there may be other columns in myData that we do not want
        // to show (e.g. hyperlinks).
        // set number of rows to display
        // provide column labels
        // show row selectors
     grid.setSelectorText(function(i){return this.getRowPosition(i)+1});
        // Disable the browser right-click context menu (copy, paste, select, print)
        grid.setEvent("oncontextmenu", "return false");
        grid.setController("copypaste", {});
        // Set the data to display from myDataText
        // Set the sort values
        //grid.setCellValue(function(col, row){return parseFloat(myDataText[row][col].replace(/[^0-9.]/m, "")); }, 2);
        var num = new AW.Formats.Number;
        var str = new AW.Formats.String;
        var date = new AW.Formats.Date;

Anybody have any ideas?

Brian Crandall
Thursday, April 28, 2011
You should put actual values into cellValue array, for example -11671.26 instead of "-11,671.26".
Alex (ActiveWidgets)
Thursday, April 28, 2011
Thank you. I figured it had to be something simple that I was just missing. My code to build the array dynamically needs to check the format and only put quotes around text fields.

Thanks again!

Now I need to check out 2.5.6 and look at the new copy/clipboard functionality.
Brian Crandall
Friday, April 29, 2011
what is this why not example html control view. have to run code our eyes :) ?
Wednesday, May 11, 2011

This topic is archived.

Back to support forum

Forum search