Dynamic binding of table column and rows

sapui5

Solution

I have done something similar before using factory functions see jsbin example for similar example to yours

var oTable = new sap.ui.table.Table({
    title: "Table column and data binding",
    showNoData : true,  
    columnHeaderHeight : 10,
    visibleRowCount: 7
});
oTable.setModel(oModel);
oTable.bindColumns("/columns", function(sId, oContext) {
    var sColumnId = oContext.getObject().columnId;
    return new sap.ui.table.Column({
        id : sColumnId,
        label: sColumnId, 
        template: sColumnId, 
        sortProperty: sColumnId, 
        filterProperty: sColumnId
    });
});
oTable.bindRows("/rows");

you could use 2 globally named models in this scenario, one for the metadata one for the data eg

sap.ui.getCore().setModel(oMetaModel, 'meta');
sap.ui.getCore().setModel(oDataModel, 'data');
..
oTable.bindColumns("meta>/columns" function...
oTable.bindRows("data>/rows");

Heres an example jsbin example of dynamic columns based on OData metadata

Problem

I'm having troubles getting dynamic binding of both my table columns and rows to work. Suppose I have two models, one holding the table column info: ``` var aColumnData = [ { columnId : "col1" }, { columnId : "col2" }, { columnId : "col3" }, { columnId : "col4" }, { columnId : "col5" } ]; ``` and one with the data: ``` var aData = [ { col1 : "Row 1 col 1", col2 : "Row 1 col 2", col3 : "Row 1 col 3", col4 : "Row 1 col 4", col5 : "Row 1 col 5" }, { col1 : "Row 2 col 1", col2 : "Row 2 col 2", col3 : "Row 2 col 3", col4 : "Row 2 col 4", col5 : "Row 2 col 5" } ]; ``` I then set the model : ``` var oModel = new sap.ui.model.json.JSONModel(); oModel.setData({ columns : aColumnData, rows : aData }); ``` I then create my table in the view: ``` var oTable = new sap.ui.table.Table(); var oColumnTemplate = new sap.ui.table.Column({ label : "{columnDesc}", template : new sap.ui.commons.TextView().bindProperty("text", "<this_should_be_dynamic_but_how?>") }); oTable.bindColumns("/columns", oColumnTemplate); oTable.bindRows("/rows"); ``` The part that bugs me is the binding to the current column in the TextView template; this should be dynamic ("col1", "col2", etc) and done on the fly -- that's what bindings are for anyway I assume -- but I can't get it to work... I guess I'm missing something simple and trivial, but I'm a bit lost now... Any help is highly appreciated! ============================== EDIT: I got it to work by iterating through the columns array and using the addColumn() method: ``` jQuery.each(aColumnData, function(i, v) { oTable.addColumn(new sap.ui.table.Column({ label : v.columnDesc, template: new sap.ui.commons.TextView().bindProperty("text", v.columnId) })); }); ``` ...but I was hoping there would be a more cleaner approach using the bindColumns() / bindRows() approach:

Original source