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
April 25,
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
April 28,
You should put actual values into cellValue array, for example -11671.26 instead of "-11,671.26".
Alex (ActiveWidgets)
April 28,
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
April 29,
what is this why not example html control view. have to run code our eyes :) ?
May 11,

This topic is archived.

See also:

Back to support forum