Pieter
Pieter

Reputation: 1831

Applying a sap.ui.model.Filter on two sap.m.Table columns combined

Two columns firstName and lastName. How can the filter method of a binding be used so that a query from a search field where a person enters John Doe keep records where the concatenation of firstName + " " + lastName matches?

Note: I'm doing this on a client side operation mode so no backend filtering solutions please.

Upvotes: 0

Views: 1314

Answers (1)

Rahul Bhardwaj
Rahul Bhardwaj

Reputation: 2343

The correct solution is using Custom Filter as pointed out by: @Andrii.

So, we can create a custom filter which will run for every row in the table and based on the returned boolean value from the custom filter a row is rendererd on screen. Filter API: Filter

So, below is the running code:

handleSearch: function(e) {
    var sQuery = e.getParameter('query'); // Fecth search term
    var oCustomFilter = new sap.ui.model.Filter({
        path:"", // this refers to binding path of each row.
        test: function(oNode) {
            var oValue = oNode.fname + " " +oNode.lname;
            if (oValue.indexOf(sQuery) !== -1) {
                return true; // row will be rendererd
            } else {
                return false; // row will not be rendererd
            }

        }
    });
    var oBinding = this._table.getBinding('items');
    oBinding.filter(oCustomFilter);
}

TABLE:

            <Table
                id='idTable'
                items= "{/}"
            >
                <columns>
                    <Column
                        headerText='FName'
                    />
                    <Column
                        headerText='LName'
                    />  
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <Text
                                text='{fname}'
                            />
                            <Text
                                text='{lname}'
                            />
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>

Let me know if you need any additional infomation. :)

Upvotes: 2

Related Questions