Skip to Content
0
Former Member
May 12, 2016 at 01:41 PM

sap.m.Table not rendering items that are updated in its model.

1418 Views

Hi UI5 Developers,

I'm having a problem getting the sap.m.Table to update itself (without using 'rerender()'). I have code very similar to this snippix:

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/snippets/92796.html

More Info:

I have a custom control that contains a table which is bound to its own model. The custom control inherits from another custom control that handles some common stuff for all of my custom controls, one of these is an optional service call that will get the items for a table. What I need is to be able to initialize the table, then once the call is made, just update the tables model with the result and have it be displayed.

Sounds simple, but when I implement it similar to how it's done in the snippix, the model is successfully updated, the binding seems to be updated, the call to 'getItems()' even returns the updated list! Yet the table doesn't update the UI with the new list values.

As you can see from the snippix below, everything is updated, but the UI is showing nothing (I've even seen the DOM flashing as it's updated, but still no list items as there should be).

Here's the code from the snippix(with the return of the service call being replicated by a button press):

var counter = 0;
var table = new sap.m.Table();
var listItems = new sap.ui.model.json.JSONModel({'rows' : []});
var itemTemplate = new sap.m.ColumnListItem({
  cells: [
  new sap.m.Label({
  text: '{name}'
  })
  ]
});
table.setModel(listItems);
table.bindItems({
  path: '/rows',
  template: itemTemplate
});
var btn = new sap.m.Button({
  text:'Add Row',
  press: function(){
  console.log('Button Pressed.');
  var rows = table.getModel().getProperty('/rows');
  counter++;
  rows.push({'name': 'test' + counter});
  table.getModel().setProperty('/rows', rows);
  console.log('table.getItems(): [' + table.getItems().map(function(element){
  return element.getCells()[0].getText();
  }) + ']');
  }
});
btn.placeAt('content');
table.placeAt('content');

As I mentioned explicitly triggering a 'rerender()' of the table works, but I don't want to use that call due to its potentially expensive nature and the inherent bad practice.


I'm using SAPUI5 1.36.5, I've also tried unbinding and rebinding on the updated list, as well as using a named model for the table, but nothing seems to be working.


Any help would be greatly appreciated.


Kind Regards,

Robbie O'Brien.

Attachments

bindTableBug.PNG (90.4 kB)