SAPUI5 Table: unbindRows & destroyColumns cause error: Cannot read property 'shouldRender' of undefined

4
votes

I am using the Table object from the SAPUI5's sap.ui.table namespace:

var oTableOverview = new sap.ui.table.Table();

On rowSelectionChange, when selecting one row I populate another table, let's call it oTableDetail, that is filled with some data.

When deselecting the row from the first table, I want to clear the content of the second, and for that I use:

oTableDetail.destroyColumns();

oTableDetail.unbindRows();

When deselecting the row I get the following error:

TableRenderer.js:6 Uncaught TypeError: Cannot read property 'shouldRender' of undefined

I found the method shouldRender of the sap.ui.table.Column class, but I am not sure why would the cells be rerendered in this case.

I also noticed that if I use either oTable.destroyColumns(), or oTable.unbindRows() separately, the error does not appear.

I am using the "1.38.11" version of SAPUI5.

Can you please help me identify why this happens?

EDIT 1: A possible workaround would be to use:

oTableDetail.setModel(new sap.ui.model.json.JSONModel({}));

oTableDetail.destroyColumns();

Although I still don't know why the code mentioned before is not working.

EDIT 2: A behavior that I find a bit weird:

trying to add a setTimeout like this works (the error is not happening):

oTable.destroyColumns();

setTimeout(function(){ oTable.unbindRows(); }, 50);

but this other way it doesn't work (the error still appears) even if the delay is longer:

oTable.unbindRows();

setTimeout(function(){ oTable.destroyColumns(); }, 50);

2
javascriptsapui5
Alina, try to use first oTable.unbindRows() and second oTable.destroyColumns(). – Jaro
Jaro, thank you for the suggestion! I tried it, but unfortunately the error still appears. – alina

2 Answers

0
votes
var oTableOverview = new sap.ui.table.Table();
//your model with new dynamic data
var oModel = new sap.ui.model.json.JSONModel(newData);

oTableDetail.setModel(oModel);
//use rerender method which tries to replace
//its DOM reference by re-rendering with new data.
oTableDetail.rerender();

You don't need to actually delete columns or unbind rows. Rerender method will take care of new data.

0
votes

So if you don't want to set a new model, then just try to clean oData of an existing model.

var oTable = this.byId("oTable")
//your model with new dynamic data
var oModel = oTable.getModel();

oModel.setData(null);
// then if its needed, use updateBindings method to refresh
oModel.updateBindings();