How to use filter in ui5 table

[former_member330322]

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..

[Former Member]

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

[former_member330322]

hi, rajesh

after using this it is showing the following error.

Cannot read property 'filter' of undefined..

Thanks

[vijay_kumar49]

are u using JS View or XML View. if JS View use my code

[former_member330322]

i am using XML View

[venkatachala_ck]

Hi Anupam,

if you are using xml view

check out this link you will get some idea

Bind data to table using filter

[karthikarjun]

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

[former_member330322]

Hi Katthik ,

a have already used that one .. but it is not working for me..

[vijay_kumar49]

as you told you are using XML View. but you pasted the code here javascript code.

please check.

any way if you are using xml view. please check this code: SAPUI5 Explored

[venkatachala_ck]

Hi Anupam,

check out this link you will get some idea

[saivellanki]

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.

[vijay_kumar49]

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

[former_member330322]

Hi Vijay,

I have already used this one.. but it was not working for my application..

Thanks,

[vijay_kumar49]

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]);