SAPUI5 table sort problem

[former_member550150]

Hi,

I'm facing a problem with the sort in the table using sortProperty.

Have you ever experienced this problem?

[Ivan-Mirisola]

Hi Cleber,

Some features used by Tables in SAPUI rely heavily on OData calls. By convention (item 4.2), sorting happens based on odata calls with the command "$orderby=". So when you specify sortProperty all you are telling to your UI5 component issue an Odata with something like:

"$orderby=<sortProperty> <asc/des>

When you click on such table column an event is issued so the framework will perform the corresponding odata call and rebind the data accordingly. Remember that it will also issue a $top command with the rows that are allowed for your table. Imagine what would happen if the amount of data is 1K records and you would perform sorting of just 5 rows. So, in other words, your UI should never perform sorting of any kind - this is the sole job of your server.

To check, open your "Network" tab via developer tools (SHIFT+CTRL+I) and check the odata URI being called. If it does indeed contain the orderby command and it still doesn't fetch the data sorted, than your odata implementation doesn't know how to sort this property.

Regards,
Ivan

[former_member550150]

Hi Ivan,

when I click in the icon to sort the framewwork doesn't perform odata call.

I think I have to implement an event to perform another call using "$orderby=".

Regards.

[Ivan-Mirisola]

Sory for misleading you. Yes, you need to create the event handler for the table column in order to push the sorter to the odata source. Here is an example on how to achieve this. This approach is a little different: it puts a button that will display a pop-over menu to select additional table things, like filters, etc.

If you are using a Smart Table component, than this can be achieved by implementing the event "onBeforeRebindTable". But if you are using a simpler component like "sap.m.Table", then you need to create the event for the column, and push the sorter to the odata service like this:

onColumnClick: function(oEvent) {
  var oTable = this.getView().byId("myTableID");
  var oItems = oTable.getBinding("items"); // get the table's odata source binding for rows
  var oBindingPath = oEvent.getSource().getBindingContext().sPath; // get the sPath related to column clicked
  var bDescending = false;
  var oSorter = new sap.ui.model.Sorter(oBindingPath, bDescending); //create a new sorter for your model based on the column clicked. 
  oItems.sort(oSorter); // push the sorter to your model's binding
}

Or you may define your sorter directly on your XML view:

<table:Table rows="{
    path: '/table', 
    filters: [{
        path: 'field3', 
        operator: 'EQ',
        value1: 'test'
    }],
    sorter: [{
        path: 'field1', 
        descending: false
    }, {
        path: 'field2', 
        descending: true
    }]
 }">
...
</table:Table>

Regards,
Ivan

[irfan_gokak]

Hi,

What's the type of Amount in your odata. Please check that first. If its type Edm.String then it'll be an issue.

[former_member550150]

Hi,

It isn't string is Edm.Int32.

[former_member182862]

Can you kindly elaborate? and how does your data model look like?

Thanks

[former_member550150]

I'm using the sap.ui.table.Table and in the property sortProperty from sap.ui.table.Column I'm passing the field name in order to enable the sort in the column. The field type is Edm.Int32.

If you check the SAPUI5 demo kit the smart table it has the same problem.