[SAPUI5] How to apply Filter for sap.ui.table.TreeTable?

[former_member813322]

Hello all.

I would like to apply filter for sap.ui.table.TreeTable.

Do you happen to know what the problem is?

I think this codes make errors.

->

const oTable = this.byId("TreeTableForAddTag");

const oBinding = oTable.getBinding("rows");

oBinding.filter([oFilter]);

And here is my code.

<t:TreeTable

id="TreeTableForAddTag"

showNoData="False"

selectionMode="MultiToggle"

enableSelectAll="false"

ariaLabelledBy="title"

>

<t:extension>

<OverflowToolbar style="Clear">

<SearchField id="searchTags" placeholder="Search" search="onSearchTags" width="300px"/>

<ToolbarSpacer/>

<Button text="Filter"/>

<Button text="Save"/>

</OverflowToolbar>

</t:extension>

<t:columns>

<t:Column width="100%" id="column">

<Label text="Category"/>

<t:template>

<Text text="{name}" wrapping="false" visible="true"/>

</t:template>

</t:Column>

</t:columns>

</t:TreeTable>

onSearchTags: function (oEvent) {

const sQuery = oEvent.getParameter("query");

const oFilter = new Filter("name", FilterOperator.Contains, sQuery);

const oTable = this.byId("TreeTableForAddTag");

const oBinding = oTable.getBinding("rows");

oBinding.filter([oFilter]);

},

Thanks in advance

[priteshpatel65 · Accepted solution]

Hey hyoseo

Find below code for Tree table filter. Its working fine for me.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
],
    function (Controller, JSONModel, Filter, FilterOperator) {
        "use strict";
        return Controller.extend("treetbl.controller.View1", {
            onInit: function () {
                var data = {
                    "clothing": {
                        "categories": [
                            {  "name": "Women", "categories": [
                                    {  "name": "Clothing", "categories": [
                                            {  "name": "Dresses", "categories": [
                                                    { "name": "Casual Red Dress", "amount": 16.99, "currency": "EUR", "size": "S" }
                                                ]   },
                                            {   "name": "Tops", "categories": [
                                                    { "name": "Printed Shirt", "amount": 24.99, "currency": "USD", "size": "M" }
                                                ]  },
                                            {   "name": "Pants", "categories": [
                                                    { "name": "Red Pant", "amount": 32.99, "currency": "USD", "size": "M" }
                                                ] },
                                            {   "name": "Skirts", "categories": [
                                                    { "name": "Striped Skirt", "amount": 24.99, "currency": "USD", "size": "M" }
                                                ]    }
                                        ]     },
                                    { "name": "Jewelry", "categories": [
                                            { "name": "Necklace", "amount": 16.99, "currency": "USD" }
                                        ]},
                                    { "name": "Handbags", "categories": [
                                            { "name": "Little Black Bag", "amount": 16.99, "currency": "USD", "size": "S" }
                                        ]   },
                                    {  "name": "Shoes", "categories": [
                                            { "name": "Pumps", "amount": 89.99, "currency": "USD" }
                                        ]}
                                ] },
                              { "name": "Girls", "categories": [
                                    { "name": "Clothing", "categories": [
                                            { "name": "Shirts", "categories": [
                                                    { "name": "Red T-shirt", "amount": 16.99, "currency": "USD", "size": "S" }
                                                ] },
                                            { "name": "Pants", "categories": [
                                                    { "name": "Blue Jeans", "amount": 24.99, "currency": "USD", "size": "M" }
                                                ] },
                                            {         "name": "Shorts", "categories": [
                                                    { "name": "Jeans Short", "amount": 32.99, "currency": "USD", "size": "M" }
                                                ]}
                                        ] },
                                    {     "name": "Accessories", "categories": [
                                            { "name": "Necklace", "amount": 26.99, "currency": "USD" }
                                        ]
                                    },
                                    {      "name": "Shoes", "categories": [
                                            { "name": "Sport Shoes", "amount": 39.99, "currency": "USD" }
                                        ]}
                                ]},
                        ]},
                }
                var oModel = new JSONModel(data);
                this.getView().setModel(oModel);
            },
            onSearchTags: function (oEvent) {
                debugger;
                const sQuery = oEvent.getParameter("query");
                const oFilter = new Filter("name", FilterOperator.Contains, sQuery);
                const oTable = this.byId("TreeTableForAddTag");
                const oBinding = oTable.getBinding("rows");
                oBinding.filter([oFilter]);
            }
        });
    });

<mvc:View controllerName="treetbl.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"    xmlns:t="sap.ui.table"
        xmlns:u="sap.ui.unified"
        xmlns:core="sap.ui.core">
    <Page id="page" title="{i18n>title}">
        <content>
            <t:TreeTable id="TreeTableForAddTag" showNoData="False" selectionMode="MultiToggle"  rows="{path:'/clothing', parameters: {arrayNames:['categories']}}" enableSelectAll="false" ariaLabelledBy="title">
                <t:extension>
                    <OverflowToolbar style="Clear">
                        <SearchField id="searchTags" placeholder="Search" search="onSearchTags" width="300px" />

                        <ToolbarSpacer />

                        <Button text="Filter" />

                        <Button text="Save" />
                    </OverflowToolbar>
                </t:extension>

                <t:columns>
                    <t:Column width="100%" id="column">
                        <Label text="Category" />

                        <t:template>
                            <Text text="{name}" wrapping="false" visible="true" />
                        </t:template>
                    </t:Column>
                </t:columns>
            </t:TreeTable>
        </content>
    </Page>
</mvc:View>

Regards Pritesh Patel

[former_member813322 · Accepted solution]

Thank you for your reply, it works well.

I found that the problem was not about my code, but the datas inside of the rows.

Best,

Eileen