How to sort dojo dgrid as floats rather than strings

Question

In dojo dgrid, I have a column of floats that I want sorted. I found this sample instruction from Ken Franqueiro from SitePen on sorting at https://github.com/SitePen/dgrid/issues/276 .

    grid.set("sort", function(a,b) {
        if(a.col5 > b.col5) { return 1; }
        if(a.col5 < b.col5) { return -1 }
        return 0;
    });

Since I want to sort them as floats, I made this change.

    grid.set("sort", function(a,b) {
        var first = parseFloat(a.col5);
        var second = parseFloat(b.col5);
        if (first > second) { return 1; }
        if (first < second) { return -1 }
        return 0;
    });

However, it still sorts them as strings with this result: -0.11 -7.15 0.12 1.25 10.9 2.02

I'm not actually certain that it calls my function; dojo doesn't always allow breakpoints in similar code. Therefore I changed it and created a function, compareMyFloats(a,b) with the comparator code and called it from my grid.set code. I was not able to stop at a breakpoint in my function.

Therefore, what is the correct way to sort floats in a column?

Answer 1

What you described totally seems to work for me.

If your data is supposed to be treated as numbers, though, I'd ideally suggest outputting it as such rather than strings in the first place.

Meanwhile, RE "Dojo doesn't always allow breakpoints", the only thing I can think of that you might be referring to is running against a minified version of Dojo, but all recent versions of Dojo support source maps, which should still allow you to see the unminified code and breakpoint within browsers' developer tools.

The fiddle I linked is using pretty much exactly what's in the original post, but SO nags me to provide code inline to accompany a JSFiddle, so here it is.

var grid = new OnDemandGrid({
    columns: {
        id: 'ID',
        value: 'Value'
    },
    collection: new Memory({ data: [
        { id: 1, value: '-0.11' },
        { id: 2, value: '-7.15' },
        { id: 3, value: '0.12' },
        { id: 4, value: '1.25' },
        { id: 5, value: '10.9' },
        { id: 6, value: '2.02' }
    ] }),
    sort: function (a, b) {
        var first = parseFloat(a.value);
        var second = parseFloat(b.value);
        if (first > second) {
            return 1;
        }
        if (first < second) {
            return -1;
        }
        return 0;
    }
}, 'grid');