Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Custom sorter and filter in SAPUI5 Table

$
0
0

 

Hi!

 

I've been working with sap.ui.table.Table to adding some sorters and filters. The main purpose of this blog is overwrite default sorting by adding a custom menu to table column header. This code fragment will create a column with default sorting:

 

//Define the columns and the control templates to be used     
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"
}));

SAPUI5 table sort column algorithm depends on model type. number = number sorting, text = text sorting, etc.

 

Sometimes we use datasources (external or public services, etc) which contain bad typed attributes like numeric values typed as string. It is possible override default table column header menu to add a custom sorter.

 

This is an example of wrong sorting:

 

screenshot1.PNG

 

Step 1. Create function addColumnSorterAndFilter


This function will add a custom menu with sorting asc, desc and filtering functionality.

 

/**
 * Adds a custom sort menu for a given table
 * 
 * @param oColumn Target table column to add custom menu
 * @param comparator Function to compare two values of column oColumn
 */
function addColumnSorterAndFilter(oColumn, comparator) {  var oTable = oColumn.getParent();  var oCustomMenu = new sap.ui.commons.Menu();        oCustomMenu.addItem(new sap.ui.commons.MenuItem({                text: 'Sort ascending',                icon:"/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_sort_asc.gif",                select:function() {                 var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);                 oSorter.fnCompare=comparator;                 oTable.getBinding("rows").sort(oSorter);                                  for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);                                  oColumn.setSorted(true);                 oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);                }    }));    oCustomMenu.addItem(new sap.ui.commons.MenuItem({     text: 'Sort descending',        icon:"/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_sort_desc.gif",        select:function(oControlEvent) {             var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);             oSorter.fnCompare=comparator;             oTable.getBinding("rows").sort(oSorter);                              for (var i=0;i<oTable.getColumns().length; i++) oTable.getColumns()[i].setSorted(false);                          oColumn.setSorted(true);             oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);        }    }));        oCustomMenu.addItem(new sap.ui.commons.MenuTextFieldItem({  text: 'Filter',  icon: '/com.sap.scn.demo/resources/sap/ui/table/themes/sap_goldreflection/img/ico12_filter.gif',  select: function(oControlEvent) {      var filterValue = oControlEvent.getParameters().item.getValue();      var filterProperty = oControlEvent.getSource().getParent().getParent().mProperties.sortProperty;      var filters = [];      if (filterValue.trim() != '') {      var oFilter1 = new sap.ui.model.Filter(filterProperty, sap.ui.model.FilterOperator.EQ, filterValue);      filters = [oFilter1];          }      oTable.getBinding("rows").filter(filters, sap.ui.model.FilterType.Application);  }    }));        oColumn.setMenu(oCustomMenu);    return oColumn;
}

 

Step 2. Create your custom comparator


/**
 * Integer comparator
 */
function compareIntegers(value1, value2) {  if ((value1 == null || value1 == undefined || value1 == '') &&  (value2 == null || value2 == undefined || value2 == '')) return 0;  if ((value1 == null || value1 == undefined || value1 == '')) return -1;  if ((value2 == null || value2 == undefined || value2 == '')) return 1;  if(parseInt(value1) < parseInt(value2)) return -1;  if(parseInt(value1) == parseInt(value2)) return 0;  if(parseInt(value1) > parseInt(value2)) return 1;            
};


Step 3. Apply new menu to column

 

var oColumn = 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"  });  oTable.addColumn(oColumn);
addColumnSorterAndFilter(oColumn, compareIntegers);

 

Result


screenshot2.PNG


Any suggestions are welcome!

 

Kind regards



Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>