Ag-Grid Filter Comma

Question

im using ag-Grid, but there is a issue when it filters my data, when i filter my data in the price column, it only works with numbers dot and not with commas.

Link: https://plnkr.co/edit/LDdrRbANSalvb4Iwh5mp?p=preview

Practical Example: In the Price column select box equal and above insert "1.5" and than try inserting "1,5"

Answer 1

Possible Solution:

NumberFilter.prototype.onFilterChanged = function () {

        var filterText = utils_1.default.makeNull(this.eFilterTextField.value);

        if (filterText && filterText.trim() === '') {
            filterText = null;
        }
        var newFilter;
        if (filterText !== null && filterText !== undefined) {

        console.log(filterText);

            // replace comma by dot
            newFilter = parseFloat(filterText.replace(/,/g, '.'));
            console.log(newFilter);
        }
        else {
            newFilter = null;
        }
        if (this.filterNumber !== newFilter) {
            this.filterNumber = newFilter;
            this.filterChanged();
        }
    };

Answer 2

So i found the problem, first i had to convert the value has a string than i needed to replace the dot by the comma, the problem with the answer above was first because of the data type and than the order of the properties of the replace function, but the problem now is that is not filtering correctly, if i search using equal option if gives me 2 values, instead a fixed one, code looks something like this:

Code:

NumberFilter.prototype.doesFilterPass = function (node) {

            if (this.filterNumber === null) {
                return true;
            }
            var value = this.valueGetter(node);
            if (!value && value !== 0) {
                return false;
            }
            var valueAsNumber;
            if (typeof value === 'number') {
            value = value.toString()
                valueAsNumber = parseFloat(value.replace('.',','));
            }
            else {
                valueAsNumber = parseFloat(value.replace('.',','));
            }
            switch (this.filterType) {
                case EQUALS:
                    return valueAsNumber === this.filterNumber;
                case LESS_THAN:
                    return valueAsNumber < this.filterNumber;
                case GREATER_THAN:
                    return valueAsNumber > this.filterNumber;
                default:
                    // should never happen
                    console.warn('invalid filter type ' + this.filterType);
                    return false;
            }  
};

Answer 3

This is because this filter is a native one.

If you want to handle custom behaviour, define your own filter.

Documentation : https://www.ag-grid.com/angular-grid-filtering/index.php

A quick and dirty solution would be to monkey patch the NumberFilter like this :

NumberFilter.prototype.doesFilterPass = function (node) {
            if (this.filterNumber === null) {
                return true;
            }
            var value = this.valueGetter(node);
            if (!value && value !== 0) {
                return false;
            }
            var valueAsNumber;
            if (typeof value === 'number') {
                valueAsNumber = value;
            }
            else {
                valueAsNumber = parseFloat(value.replace(',','.'));
            }
            switch (this.filterType) {
                case EQUALS:
                    return valueAsNumber === this.filterNumber;
                case LESS_THAN:
                    return valueAsNumber < this.filterNumber;
                case GREATER_THAN:
                    return valueAsNumber > this.filterNumber;
                default:
                    // should never happen
                    console.warn('invalid filter type ' + this.filterType);
                    return false;
            }  
};

Then changed line is here :

 valueAsNumber = parseFloat(value.replace(',','.'));