Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sebastián Carreira
30
Filtering/sorting not working using a ng-template
posted

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

Parents
No Data
Reply
  • 320
    Verified Answer
    Offline posted

    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.

Children