Custom Sort in Angulargrid - Register Sort

Question

I use ag-grid to generate some tables. So far it was great. But I am having difficulty sorting, because my table has some data that is lowercase, and I want my sort function to ignore the case, and sorting them just has case sensitivity.

Two functions that can perform this task are the cellRenderer function and sort.

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 two examples. How can I connect these two functions to create case-insensitive sorting of a table?

Answer 1

colDef. :

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

, , , .

Answer 2

cellRenderer ; , , . , , , columnDef :

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

Def:

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

.

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

, isInverted, , , ag-grid.

, isInverted, , , . , , :

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());
};

, columnDef; , .

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);}
    }
};

, ; , plunkr, , . ag-grid , , , , , , , , , .