Im having trouble filtering/sorting a column using an ng-template. For instance, I created a simple array of objects with an Id and an objectLink object (which is showed as an anchor) per row.
this.data = [{ "id": 10, "objectLink": { "link": "localhost", "title": "Localhost" }}, {"id": 11, "objectLink": { "link": "http://external", "title": "External" } } {"id": 12, "objectLink": { "link": "http://external", "title": "External" } } {"id": 13, "objectLink": { "link": "http://external", "title": "External" } } {"id": 14, "objectLink": { "link": "http://external", "title": "External" } } {"id": 15, "objectLink": { "link": "http://external", "title": "External" } } {"id": 16, "objectLink": { "link": "http://external", "title": "External" } } {"id": 17, "objectLink": { "link": "http://external", "title": "External" } } {"id": 18, "objectLink": { "link": "http://external", "title": "External" } } {"id": 19, "objectLink": { "link": "http://external", "title": "External" } } {"id": 20, "objectLink": { "link": "http://external", "title": "External" } }
<igx-column field="id" header="ID" sortable=true filterable=true resizable=true movable=true> </igx-column> <igx-column field="objectLink" header="Link" sortable=true filterable=true resizable=true movable=true> <ng-template igxCell let-cell="cell" let-val> <a href="val.link">{{val.title}}</a> </ng-template> </igx-column>
When I try to filter it by "Title", in this case "Localhost", the grid shows a "No records found." message.
Also, the filtering dropdown has a wrong z-index.
Is there anything wrong with my code or is this feature not supported? if the latter, can it be added to the backlog?
Thank you
Version: IgniteUI for Angular 6.0.3
Hello,
Thank you for contacting Infragistics Support.
This feature that you describe is not supported as default behavior, but you can implement a custom filtering logic that correspond to your use case. The only things that are necessary to do is to extend one of the basics filtering operand classes - IgxFilteringOperand, IgxBooleanFilteringOperand, IgxNumberFilteringOperand, IgxStringFilteringOperand according your column data type and to define the custom logic that you need and also to set filters property to the column in which you want to perform custom filtering operations.
I am sending you a small example to see how this works.
If you have any further questions please contact me.
Hi!
Thanks for the answer and the example, was very helpful and it's seems to work as expected, but what about the sorting? There is a way to manage/solve it?
Version upgraded to IgniteUI for Angular 6.2.0-beta.1
Hello,I am glad to hear that the provided solution solve your issue. About the sorting, currently, we do not support this functionality but this feature request has been already addressed, and here you can track it's progress.
If you have any further questions please contact us.