Custom Sorting in Angulargrid - sort case insensitve

Question

I am using ag-grid for generating some tables. So far it has been great. But I am experiencing some difficulty in sorting because my table has some data which are in lowercase and I want my sorting function to ignore the case and sort them just has case sensitive.

The two features that can do this job are cellRenderer and sort function.

cellRenderer function:

cellRenderer: function(params) {
    if (params.value=='Police') {
        return 'POLICE';
    } else {
        return params.value.toUpperCase();
    }
}

sorting function:

$scope.sortByAthleteAsc = function() {
    var sort = [
        {field: 'athlete', sort: 'asc'}
    ];
    $scope.gridOptions.api.setSortModel(sort);
};

These are the two examples provided. How can I connect these two functions to produce my table case insensitive sorting?

Answer 1

put a comparator onto the colDef. like the following:

colDef.comparator = function(valueA, valueB, nodeA, nodeB) {
    // here valueA and valueB are the items to be compared
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
}

you also are provided the row nodes, where you can access the full row data, not just the value specific to the col.

Answer 2

This issue can be solved by

   GridOptions.accentedSort = true;

Answer 3

cellRenderer doesn't actually have anything to do with sorting; as Niall points out, what you need is to modify the column definition to use a custom sorting function. From the example code, let's say you're working with the first example, so your columnDef for athlete looks like this:

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc'},
    ...
];

You need to add a comparator to that columnDef:

    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc', 
        comparator: function(valueA, valueB, nodeA, nodeB, isInverted)
        {return caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted);}
    }

and then add your function for sorting below.

function caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted) {
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
}

Note that you pass nodes and isInverted, even though you don't have to use them, because that's the signature that ag-grid expects.

A case where you would use the isInverted flag is if you need to handle certain values like blanks or nulls separately. Here's a more detailed function that sorts those values to the bottom, regardless of direction:

function caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted) {
    if( valueA === "" || valueA === null ) {
        if( valueB === "" || valueB === null ) {
            return 0;   // a and b are both blank; 0 means identical
        } else {
            return (isInverted ? -1 : 1);  // a is null, b is not; return 1 for normal sort or -1 for inverted
        }
    }
    if( valueB === "" || valueB === null ) {
        return (isInverted ? 1 : -1);   // b is null, a is not; return -1 for normal or 1 for inverted to get the opposite result as above
    }
    return valueA.toLowerCase().localeCompare(valueB.toLowerCase());
};

You could also set that comparator as part of a column type and then apply the column type to the columnDef; this way, you can easily use the same sort function across multiple columns.

var columnDefs = [
    {headerName: "Athlete", field: "athlete", width: 150, sort: 'desc', type: 'text'},
    ...
];

var gridOptions = {
    columnDefs: columnDefs,
    ... // whatever else you set
    columnTypes: {
        "text": {comparator: function(valueA, valueB, nodeA, nodeB, isInverted) 
            {return caseInsensitiveSort(valueA, valueB, nodeA, nodeB, isInverted);}
    }
};

I have a significantly more complicated example that I've just used on my current project at work; as time permits, I'll narrow it down a bit for a plunkr so you can see how the whole thing works. The ag-grid documentation is pretty useful once you know what you're doing, but the information it has is frequently spread out among several pages, and there aren't many examples that show you exactly what you need to know.