Skip to Content
avatar image
Former Member

How to use filter in ui5 table

Hi,

I am  trying to use filter but after clicking in button event all the data are coming. It is not filtering any  data..

var oModel = this.getView().getModel();

  var oIn1 = this.getView().byId("in1").getValue(); 

   var oTable = this.getView().byId("Tab2");

      oTable.addColumn(new sap.ui.table.Column({

           label : new sap.m.Label({ text : "MaterialNo"}),

           template : new sap.m.Text({ text : "{MaterialNo}", filterProperty:aFilter  }),

           }

       ));

       oTable.addColumn(new sap.ui.table.Column({

           label : new sap.m.Label({ text : "SalesOrderNo" }),

           template : new sap.m.Text({ text : "{SalesOrderNo}", filterProperty:aFilter }),

           }

       ));

       oTable.getBinding("rows").filter([aFilter]);

       //Filter values for a certain Sales Number

       var aFilter=new sap.ui.model.Filter( "SalesOrderNo", sap.ui.model.FilterOperator.Contains, oIn1) ;

      

       oTable.bindRows({ path: "/MaterialNode", filters: [aFilter], });

  }

Thanks..

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

5 Answers

  • Oct 26, 2015 at 10:37 AM

    oTable.addColumn(new sap.ui.table.Column({      

    label: new sap.ui.commons.Label({text: "years"}),      

    template: new sap.ui.commons.TextView().bindProperty("text", "years"),      

    sortProperty: "years",      

    filterProperty: "years",      

    width: "200px" 

    }));



    Example

    Add comment
    10|10000 characters needed characters exceeded

    • this is my code working fine. please try

      var searchPartnerGroup = new sap.ui.layout.HorizontalLayout('search-screen-form',{

        editable: true,

        layout: "ResponsiveGridLayout",

        labelSpanL:2,

              labelSpanM:4,

              columnsL:4,

              columnsM:4,

              emptySpanM: 4,

        content : [ //Create an instance of the table control

        oTable2 = new sap.ui.table.Table({

        title:lang.tittleName4,

        visibleRowCount: 12,

        firstVisibleRow: 10,

        selectionMode: sap.ui.table.SelectionMode.Single,

        navigationMode: sap.ui.table.NavigationMode.Paginator

        //fixedColumnCount: 2

        }).addStyleClass('.sapUiTable .sapUiTableHdrTitle')

        //Define the columns and the control templates to be used

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.country}),

        template: new sap.ui.commons.TextView().bindProperty("text", "countryName"),

        sortProperty: "Country",

        filterProperty: "Country",

        width: "100px"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.groupId}),

        template: new sap.ui.commons.TextView().bindProperty("text", "groupId"),

        sortProperty: "grpid",

        filterProperty: "grpid",

        width: "100px"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.groupName}),

        template: new sap.ui.commons.TextView().bindProperty("text", "groupName"),

        sortProperty: "name",

        filterProperty: "name",

        width: "100px"

        //hAlign: "Center"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.brand}),

        template: new sap.ui.commons.TextView().bindProperty("text", "brandName"),

        sortProperty: "brand",

        filterProperty: "brand",

        width: "100px"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.comments}),

        template: new sap.ui.commons.TextView().bindProperty("text", "comment"),

        sortProperty: "comments",

        filterProperty: "comments",

        width: "100px"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.create}),

        template: new sap.ui.commons.TextView().bindProperty("text", "created"),

        sortProperty: "created",

        filterProperty: "created",

        width: "100px"

        }))

        .addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text:lang.deactivated}),

        template: new sap.ui.commons.TextView().bindProperty("text", { parts: [ {path : "deactivated"}, { path: "deactivatedBy" }], formatter : function(str1, str2) { return (str1!=null)? str1 + " By " + str2 : "" } }),

        sortProperty: "deactivated",

        filterProperty: "deactivated",

        width: "100px"

        })).addColumn(new sap.ui.table.Column({

        label: new sap.ui.commons.Label({text: "Test"}),

        template: new sap.m.Button({id : "Edit",text :lang.editBtn,

        press: function(event) {

        // alert('Hello');

        

        var oSelectedCountry = new sap.ui.model.json.JSONModel();

        oSelectedCountry.setData(sap.ui.getCore().getModel("oModel").getProperty(event.getSource().getBindingContext().getPath()));

        sap.ui.getCore().setModel(oSelectedCountry,"oSelectedCountry");

        getCountryDetails();

        UpdatePrtGrpDialog.open();

        

        }}).addStyleClass('hidden1 query formBtn'),

        //sortProperty: "deactivated",

        //filterProperty: "deactivated",

        width: "50px"

        })).addColumn(new sap.ui.table.Column({

        template: new sap.m.Button({id : "De-Activate",text :lang.deactivateBtn,

        text: { parts: [ {path : "deactivated"}], formatter : function(str1) { return (str1!=null)? "Delete" : "Deactivate" } },

        press: function(event) {

        var action = this.getText();

        //template: sap.ui.commons.Button({id : "De-Activate",text :lang.deactivateBtn,visible:{},press: function(event) {

        var oDeActiveGroupId = new sap.ui.model.json.JSONModel();

        oDeActiveGroupId.setData(sap.ui.getCore().getModel("oModel").getProperty(event.getSource().getBindingContext().getPath()));

        sap.ui.getCore().setModel(oDeActiveGroupId,"oDeActiveGroupId");

        if(action == ("Deactivate")){

        deActivateDialog.open();

        }

        else{

        deletePrtGroupDialog.open();

        }

        }}).addStyleClass('hidden1 query formBtn'),

        //sortProperty: "deactivated",

        //filterProperty: "deactivated",

        width: "100px"

        })).addColumn(new sap.ui.table.Column({

        template: sap.ui.commons.Button({id : "Re-Activate",text:lang.reactivateBtn, visible: { parts:[ {path: "deactivated"}], formatter : function(deactivated) { return deactivated == null ? false : true;}},press: function(event){

        var oReactiveGroupId = new sap.ui.model.json.JSONModel();

        oReactiveGroupId.setData(sap.ui.getCore().getModel("oModel").getProperty(event.getSource().getBindingContext().getPath()));

        sap.ui.getCore().setModel(oReactiveGroupId,"oReactiveGroupId");

        reActivateDialog.open();

        }}).addStyleClass('.sapUiBtnS.sapUiBtnNorm.sapUiBtnStd'),

        //sortProperty: "deactivated",

        //filterProperty: "deactivated",

        width: "100px"

        }))

        ]

        })

        .setModel(oModel)

        //.bindItems("/ptnerGroups/ptnerGroup")

        .addStyleClass('hidden');

        //Create a model and bind the table rows to this model

        var oModel2 = sap.ui.getCore().getModel("oModel");

        //oModel2.setData({modelData: aData});*/

        oTable2.setModel(oModel2);

        oTable2.bindRows("/ptnergrpdetails");

        //Initially sort the table

        oTable2.sort(oTable2.getColumns()[0]);

  • Oct 26, 2015 at 10:37 AM

    Hi,

    put this line of code

    var aFilter=new sap.ui.model.Filter( "SalesOrderNo", sap.ui.model.FilterOperator.Contains, oIn1) ;


    before applying filter.ie

    oTable.getBinding("rows").filter([aFilter]);


    regards

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2015 at 10:40 AM

    Hi Anupam,

    This sample might be helpful for you: JS Bin - Collaborative JavaScript Debugging

    You can filter the table using customer number that you provide in text field placed at bottom.

    Regards,

    Sai Vellanki.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2015 at 12:44 PM

    Hi Anupam,

    check out this link you will get some idea

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 26, 2015 at 01:05 PM

    Hi Anupam,

    oTable.addColumn(new sap.ui.table.Column({

               label : new sap.m.Label({ text : "MaterialNo"}),

               template : new sap.m.Text({ text : "{MaterialNo}", filterProperty:aFilter  }),

               }

           ));

    aFilter - give your model property name.


    Examples are already available here: Table - SAPUI5 Demo Kit


    Thanks,

    Karthik A


    Add comment
    10|10000 characters needed characters exceeded