[Sourcing] [P1] filter on value help dialog component about fundamental-ngx

[droshev]

@sahanaN123 You can configure the filters to be combobox instead of input field as in our example

[sahanaN123]

@droshev : We are using combo box itself and not input field. So, when we select an option from dropdown like "invited", it is listing the items in the table which has value "not invited" as the word "invited" is subset of "not invited". Finally, the fix we are expecting is to list the items which has the value "invited" only and not anything else. I hope i am clear this time??

[mikerodonnell89]

@droshev : We are using combo box itself and not input field. So, when we select an option from dropdown like "invited", it is listing the items in the table which has value "not invited" as the word "invited" is subset of "not invited". Finally, the fix we are expecting is to list the items which has the value "invited" only and not anything else. I hope i am clear this time??

I see, one thing you could do in this case would be to utilize a boolean with a select like the "Product Verified" filter in this example: https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/value-help-dialog#custom-column

If there are options beyond "Invited" and "Not Invited", I believe you should be able to have a select component that has several options and the corresponding model can be an array of strings or something like that

[mikerodonnell89]

Here is a stackblitz where I'm adding a custom column via *fdpValueHelpColumnDef which has three options, 'Invited', 'Not Invited', and 'Some other value'. Note the modified search function that is looking for an exact match, rather than .includes(), when the value is in InvitationStatuses

https://stackblitz.com/edit/bk68g8?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

[sahanaN123]

Here is a stackblitz where I'm adding a custom column via *fdpValueHelpColumnDef which has three options, 'Invited', 'Not Invited', and 'Some other value'. Note the modified search function that is looking for an exact match, rather than .includes(), when the value is in InvitationStatuses

https://stackblitz.com/edit/bk68g8?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

@mikerodonnell89 : We went through the above example and its working fine. So in which version of the library we can expect the same fix at our end??

[mikerodonnell89]

@mikerodonnell89 : We went through the above example and its working fine. So in which version of the library we can expect the same fix at our end??

There is no fix required from fundamental-ngx. The working stackblitz example i linked above is for ng17 but the same principles work for fundamental-ngx 0.43.* and ng15. Also, your linked stackblitz doesn't have a VHD in it so I think it's the wrong link, but I understand the problem you describe.

Please take a look at https://ng-15-downport--fundamental-ngx.netlify.app/#/platform/value-help-dialog#custom-column

In this example there is a custom column created using *fdpValueHelpColumnDef and an <fd-select> is placed inside of a <fdp-value-help-dialog-filter> to filter on this custom column. While this custom column and select is just referring to a boolean, it can really be anything. See my stackblitz example and do a search through the two files (ts/html) for the string "invitationStatus" and you'll get a better idea of how that works and the modifications that need to be made to the example on the documentation website

[sahanaN123]

@mikerodonnell89 : I checked the stackblitz shared and the difference i see is you were making use of fdp-select for dropdown values in the filter. But we are making use of combobox for filters having multiple values as even suggested by @droshev . I was able to replicate the issue here value-help-dialog issue

Uploading Screen Recording 2024-05-09 at 9.07.28 AM.mov…

[mikerodonnell89]

Here is your example working https://stackblitz.com/edit/bk68g8-fgmup9?file=src%2Fapp%2Fcolumn-template%2Fplatform-vhd-column-template-example.component.ts

As most of the filtering logic comes from the application side (like many things in the library), the examples from our documentation or from github are only meant to serve as a demonstration and should be reworked to fit your specific needs