dojox.grid.DataGrid sort order bug on mixed case strings?

Question

I know Dojo is getting quite old now but we still have apps that are using it.

One thing that was pointed out was the sort facility on the dojox.grid.DataGrid table of users. Our users table has grown over time so it's useful to order by the name column. However, we find that, while most names were entered with a Capital first letter, some names were entered all in lowercase and when I click on the name column header for sorting, I find that the Capitalised names appear in alphabetical order BUT followed by lowercase name in the same order at the bottom.

e.g. The raw data:
Tom
Dick
harry

After "sorting" displays as :
Dick
Tom
harry

Code example, using Dojo 1.8.3, as follows:

require(["dojox/grid/EnhancedGrid",
    "dojo/data/ItemFileWriteStore",
    "dojo/parser",
    "dojo/on",
    'dojo/domReady!'
  ],
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    var data = {
      items: [
        { name: 'Tom', age: 29   },
        { name: 'Dick', age: 9   },
        { name: 'harry', age: 19 }
      ]
    };

    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [
        { 'name': 'Name', 'field': 'name' },
        { 'name': 'Age' , 'field': 'age'  }
      ]
    ];

    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore,
      structure: gridStructure,
      autoHeight: true,
      autoWidth: true
    }, "mydatagrid");

    mygrid.startup();
  }
);

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<div id="container" class="claro">
  <div id="mydatagrid"></div>
</div>

How do I sort a column of mixed case names correctly? i.e. to display sorted grid as:
Dick
harry
Tom

Thanks

Answer 1

I managed to get a solution through a suggestion on a related DataGrid post: dojox.grid.DataGrid custom sort method?

Basically, you can use the "comparatorMap" of the ItemFileWriteStore (or ItemFileReadStore)

require(["dojox/grid/EnhancedGrid",
    "dojo/data/ItemFileWriteStore",
    "dojo/parser",
    "dojo/on",
    'dojo/domReady!'
  ],
  function(EnhancedGrid, ItemFileWriteStore, Filter, parser, on) {
    var data = {
      items: [
        { name: 'Tom', age: 29   },
        { name: 'Dick', age: 9   },
        { name: 'harry', age: 19 }
      ]
    };

    var gridStore = new ItemFileWriteStore({
      data: data
    });

    var gridStructure = [
      [
        { 'name': 'Name', 'field': 'name' },
        { 'name': 'Age' , 'field': 'age'  }
      ]
    ];

    //====================================================================================
    //= Define the comparator function for "Name" ========================================
    //====================================================================================
    gridStore.comparatorMap = {};

    gridStore.comparatorMap["name"] = function(a,b) {
      var nameA = a.toLowerCase().trim(), nameB = b.toLowerCase().trim();
      if (nameA < nameB) //sort string ascending
        return -1;
      if (nameA > nameB)
        return 1;
      return 0; //default return value (no sorting)
    }
    //====================================================================================
    //====================================================================================
    //====================================================================================

    var mygrid = new EnhancedGrid({
      id: "grid",
      store: gridStore,
      structure: gridStructure,
      autoHeight: true,
      autoWidth: true
    }, "mydatagrid");

    mygrid.startup();
  }
);

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" rel="stylesheet" />

<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<div id="container" class="claro">
  <div id="mydatagrid"></div>
</div>