[ANGULAR] : Need help with combo type filter on grid

[satya]

Team, implemented a grid with one of the columns having a combo filter. Filter drop down is static list except for one use case. If json has null for the field, grid needs to display N/A . And also applying filter on N/A in combo filter should filter the grid.

Below is able to show N/A when value is null, however filter grid when N/A is selected to show rows with null values on that column is not working. Tried few options with no success. Request your help

{
"filterable": {
"filterField" : {
"type" : "combo",
"multiSelect" : true,
"editable" : true,
"items" : ["Pending ", "Completed", "Canceled", "Restricted", "N/A"]
}
},
"renderer" :"({ value, record, field }) => {if(value && value != null){return '<div style=\"text-overflow:ellipsis; white-space:nowrap; \">' + value+'</div>'; } else {return 'N/A';}}",

[tasnim]

Hi,

Are you using JSON data for renderer, you can't pass a function inside JSON, you should use javascript object for this.
And using a JS object would make it work.

If you have any other questions or concerns, please don't hesitate to reach out to us.

Best regards,
Tasnim

[satya]

Thank you. Just to clarify on the ask
a. The renderer code is working fine above . Which is , when json payload underlying has null for the field it displays N/A on the grid
b. THe combo box filter for column is static list of values given in items . THat displays fine as well
c. When i select N/A value from the filter, somehow grid is not filtering the data although there is matching values -- how to ensure this happens?

[Animal]

There are records in which the field for that column has the value 'N/A'?

[satya]

In json data , value is null . renderer code above is showing that in grid as 'N/A'. But filter needs to translate N/A to null somehow

[Animal]

If you want the input field value "N/A" to mean "filter in records where the field is the empty string", then see this tweak to the online Grid filterbar example:

Screenshot 2024-08-07 at 15.14.42.png (622.97 KiB) Viewed 1035 times

[Animal]

A cell renderer only places the value in the UI. It does not affect the value of your data. Of course. We cannot change your data.

[satya]

Thank you
Json value for the field: \"StatusDescription\":null

Grid value shown for field : N/A

I included below filterfn to the combo filter. When i apply N/A in combo filter, grid did not show those records with null. Please let me know.

{
"filterable": {
"filterField" : {
"type" : "combo",
"multiSelect" : true,
"editable" : true,
"items" : ["Pending - Credit", "Completed", "Canceled", "Restricted", "N/A"],
"filterFn": "function({value, record}){return record.StatusDescription === ((value === 'N/A') ? '' : value);}"
}
},
"renderer" :"({ value, record, field }) => {if(value && value != null){return '<div style=\"text-overflow:ellipsis; white-space:nowrap; \">' + value+'</div>'; } else {return 'N/A';}}"

[joakim.l]

Hi!

If the record value is null, you need to check for null, not empty string. Something like this:

{
    filterable : {
        filterField : {
            type : "combo",
            multiSelect : true,
            editable : true,
            items : ["Pending - Credit", "Completed", "Canceled", "Restricted", "N/A"],
            filterFn : function({ value, record }){
                return record.StatusDescription === ((value === 'N/A') ? null : value);
            }
        }
    },
    renderer : ({ value, record, field }) => {
        if (value && value != null) {
            return '<div style="text-overflow:ellipsis; white-space:nowrap;">' + value +'</div>';
        } 
        else {
             return 'N/A';
        }
    }
}

[satya]

Yes did check with null too, sorry forgot to mention. Grid shows empty value when null , so thought of checking this way too. Didnt work both ways. Thank you.