Premium support for our pure JavaScript UI components


Post by MauriceLapre »

Hi,

I'm having an issue with Gantt and the Filterbar feature. I have it enabled and some columns allowed for filtering. My code for one of the columns:

filterable : {
                filterField : statusCombo,                               
filterFn : ({ record, value }) => !value.length || value.includes(record.status) }

The code for the "statusCombo":

const statusCombo = {
    type : 'combo',
    multiSelect : true,
    store: statusCodesStore,    
valueField: 'id', displayField: 'description', chipView: { itemTpl: (record, i) => { return `${record.id}`; } } };

The store is filled properly, and the filterfield on the filterbar is looking correctly. But it seems to have a mind of its own. It filters only correctly when there's just 1 value selected, so when you have multiple values selected, all records are filtered out. And even if I change the filterFn to something that should never return anything (e.g. "filterFn : ({ record, value }) => !value.length || value.includes(record.city)" and I don't have a "city" property), it keeps doing that filtering and seems to completely ignore the filterFn.

Could you have a look at that?

Thank you!

Attachments
filterbar-4.png
filterbar-4.png (23.65 KiB) Viewed 579 times
filterbar-3.png
filterbar-3.png (37.2 KiB) Viewed 579 times
filterbar-2.png
filterbar-2.png (35.58 KiB) Viewed 579 times

Post by Maxim Gorkovsky »

Hello.
You may have misconfigured the combo. So you have records in the combo store like:

{ id : 'R', name : 'Released' },
{ id : 'REJ', name : 'Rejected' }

And records in the main store probably like:

{ status : 'Released' },
{ status : 'Rejected' }

Your combo takes 'id' for value field, which means your filter function would likely be called with arguments:

filterFn    : ({ record, ['R', 'REJ'] }) => !value.length || value.includes('Released') // this would be always false

So your status is different from the id and that filters everything out. I can reproduce similar behavior on our filterbar demo with wrong configuration. You can put a breakpoint to the filterFn and see what it is trying to filter.

If this doesn't help, please provide us a runnable test case with your data sample and we will take a look.


Post by MauriceLapre »

Hi Maxim,

Sorry to disappoint you :) My combo store indeed holds records like you said, with an 'id' and 'description':

filterbar-5.png
filterbar-5.png (37.54 KiB) Viewed 573 times

But my task records have a property 'status' not with the full description, but with the code/id in it:

filterbar-6.png
filterbar-6.png (6.37 KiB) Viewed 573 times

I have set a renderer on that column to get the description from that same store and show that instead of the code. For testing, I had removed that but that doesn't make a difference.

I've created a case based on Advanced demo. Added a text column based on status field and put a combo filter on it. I'm seeing this behavior: when 1 filter value selected, it works okay. When more values are selected, all records disappear.

Attachments
app.module_451903.js
(21.08 KiB) Downloaded 54 times

Post by Maxim Gorkovsky »

No problem, I'm not disappointed at all :)
I reproduced the problem and opened a ticket here: https://github.com/bryntum/support/issues/3209 Thank you for report.
As far as I can see, problem occurs when you have column using same model field before the column you're trying to filter. If you comment out first status column, you snippet works again. I hope this helps


Post by MauriceLapre »

Interesting find, I indeed had a (hidden) column with the same field in front of the other. Commented that out as a workaround and can confirm that's working. Thanks!


Post Reply