Skip to Content
0
Jan 23, 2021 at 02:46 PM

Multi input Column filtering in Sap.ui.table is not working

814 Views

Hello Experts,

I am trying to implement sap.ui.table.column multi input Filtering in sap.ui.table . I am able to successfully create filters but it's not working. Please check below code which I implemented to create filters for multiple columns.

I have applied two input in first column separated by comma

Again applied two input in fourth column.

Xml view

<Table id="idParentTable" rows="{DetailData>/ProductCollection}" selectionMode="MultiToggle" visibleRowCount="10" visibleRowCountMode="Fixed" enableCellFilter="true" filter="filterCols" enableSelectAll="true" alternateRowColors="true">

<columns>

<Column id="idWBS1ID" filterProperty="Name" width="10rem" filterType="sap.ui.model.type.String"> <m:Label text="{i18n>WBS1ID}"/> <template> <m:Text text="{DetailData>Name}" wrapping="false"/> </template> </Column>

<Column width="10rem" filterProperty="Quantity" filterType="sap.ui.model.type.Integer"> <m:Label text="{i18n>WBS4_1_Element_ID}"/> <template> <m:Text text="{DetailData>Quantity}" wrapping="false"/> </template> </Column>

Controller


filterCols: function(oEvent) {

var that = this; oEvent.getParameter("column").setFiltered(true);

this.filterFormation();

},

filterFormation: function() {

var that = this;

that._oLFilter;

this.filteredColumn = [];

var oColumns = this.byId("idParentTable").getColumns();

oColumns.forEach(function(column) {

if (column.getFiltered()) {

var filterValue = column.getAggregation("menu").getAggregation("items")[0].getProperty("value");

filterValue.split(",").forEach(function(value) {

that.filteredColumn.push(new sap.ui.model.Filter(column.getProperty("filterProperty"), sap.ui.model.FilterOperator.Contains, value)); }) } });

this.aColArray = [];

this.previous = null;

this.aMainFilter = [];

this.bFlag = true;

that.filteredColumn.forEach(function(value) {

if (value.sPath === that.previous || that.previous === null) {

that.previous = value.sPath;

that.aColArray.push(value);

} else {

that.bFlag = false;

var aOrFilter = that.globalFilterFormation(that.aColArray);

that.aMainFilter.push(aOrFilter);

that.aColArray = [];

that.aColArray.push(value);

that.previous = value.sPath; }

})

if (this.bFlag = true) {

var aOrFilter = this.globalFilterFormation(this.aColArray);

that.aMainFilter.push(aOrFilter);

}

var goFil = new Filter(that.aMainFilter, true); //goFil Value is highlighted in below screenshot

this.byId("idParentTable").getBinding("rows").filter(goFil, "Application");

},

globalFilterFormation: function(aFilter) {

var oLFilter = new sap.ui.model.Filter(

{ filters: aFilter, and: false }

);

return oLFilter;

},

Attachments

mqtyt.png (12.3 kB)
emvfo.png (38.1 kB)
ecvtg.png (38.1 kB)