SAPUI5 dynamic binding of table cells

Question

I have the following Problem:
I want to dynamically create table rows and cells with different settings.
The Solution mentioned here: Dynamic binding of table column and rows
was a good starting point for my problem, but I still could not get it to work.

The table should display each object of the model in a new row with the binding for the given attributes of that object.
The checked attribute should be displayed in/as a checkbox that is either checked or unchecked depending on the value (true or false) of checked.

Now, this works perfectly fine if I define the bindings and columns as they are in the SAPUI5 Table Example

The Problem:
Depending on value (true or false) of the objects existsLocal attribute I want the checkbox of that row to be either enabled or disabled. Further that row should get a new class - called existsLocalClass wich sets its background to grey if existsLocal is true.

I was thinking that this can be solved with a factory function that creates my rows and its cells. Unfortunately my factory does not work as intended.

Here is my code:

Model definition:

var model = [
  {name: "name1", description: "description1", checked: true, existsLocal: true},  
  {name: "name2", description: "description2", checked: false, existsLocal: false}
]
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: model});

Table plus factory function:

var oTable = new sap.ui.table.Table({
visibleRowCount: 7,
firstVisibleRow: 3,
selectionMode: sap.ui.table.SelectionMode.None
});

var tableRowFactory = function (sId, oContext) {
  console.log("row factory");
  var exists = oContext.getProperty("existsLocal");

  if(exists){
    return new sap.ui.table.Row(sId)
    .addCell(new sap.ui.commons.TextView()
    .bindProperty("text", oContext.sPath + "/name"))
    .addCell(new sap.ui.commons.TextView()
    .bindProperty("text", oContext.sPath+ "/description"))
    .addCell(new sap.ui.commons.CheckBox()
    .bindProperty("checked", oContext.sPath+ "/checked").setEnabled(false))
    .addStyleClass("existsLocal");
 }else{
   return new sap.ui.table.Row(sId)
   .addCell(new sap.ui.commons.TextView()
   .bindProperty("text", oContext.sPath + "/name"))
   .addCell(new sap.ui.commons.TextView()
   .bindProperty("text", oContext.sPath+ "/description"))
   .addCell(new sap.ui.commons.CheckBox()
   .bindProperty("checked", oContext.sPath+ "/checked"))
  }

};

oTable.setModel(oModel);
oTable.bindRows("/modelData",tableRowFactory); // does not work
oTable.bindAggregation("rows", "/modelData", tableRowFactory); //doesn't work either

The browser does not show any errors and the table stays empty. I think the function does not even get called but I could not manage to fix it. Maybe my entire approach is wrong - I don't really understand sapui5's binding and context thingy.
I hope that you can help me with this.

Edit:

I found a kinda hacky solution for this:

var model = oTable.getModel();
var rows = oTable.getRows();
var indicesOfRows = [];
$.each(rows, function (index, row){
  indicesOfRows.push(oTable.indexOfRow(row));
});
$.each(rows, function(index, row){
  var rowIndex = indicesOfRows[index];
  var exists = model.getProperty("existsLocal", oTable.getContextByIndex(rowIndex));
  var cells = row.getCells();
  if(exists){
    $.each(cells, function(index, cell){
      if(cell instanceof sap.ui.commons.CheckBox){
        row.$().toggleClass("existsLocal", true);
        cell.setEnabled(false);
      }
    })
  }
})

After a couple houres of trying and fiddling around, I came to the conclusion that it is not possible to create rows programmatically like I wanted to. — armmie

aborjinik aborjinik · Accepted Answer · 2014-07-10T22:19:29

Instead you could bind to column with template. You have only rows binding and table does not know the columns. BTW, You can define "enable" property of the checkbox with formatters. You need factory only for addStyleClass when necessary So something like that: http://jsbin.com/poyetoqa/1/edit

SAPUI5 dynamic binding of table cells

2 Answers