Binding dyanmic data to DropdownBox in SAPUI5 table - sapui5

Question

I want to bind the dynamic Dropdowns for each row in SAPUI5 table. There should be the row-specific data for each row-Dropdown. Here is the sample json having three rows. But I'm unable to bind the row-specific data for each dropdown. Thanks in Advance!
Here, I have simple table.
// Table goes here
var demoTbl = new sap.ui.table.Table({
visibleRowCount: 10,
width : "100%",
selectionMode: sap.ui.table.SelectionMode.Multi,
});
var systemColumn = new sap.ui.table.Column({
width:"12%",
label: new sap.ui.commons.Label({text: "System", design:sap.ui.commons.LabelDesign.Bold}),
template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "name"),
sortProperty: "name",
filterProperty: "name",
sorted : false,
filtered : false
});
demoTbl.addColumn(systemColumn);
bind list data for 1st row-Dropdown List here-
var inputListBox = new sap.ui.commons.ListBox();
inputListBox.bindAggregation("items","/listData/dataList/0/dropList",function(oId,oContext){
console.log(oContext);
return new sap.ui.core.ListItem({
key: oContext.getProperty("id"),
text: oContext.getProperty("name")
});
});
var connectorIpColumn = new sap.ui.table.Column({
width:"12%",
label: new sap.ui.commons.Label({text: "Dropdown Data", design:sap.ui.commons.LabelDesign.Bold}),
template: new sap.ui.commons.DropdownBox({
"association:listBox" : inputListBox
})
});
demoTbl.addColumn(connectorIpColumn);
And, here is the Data -
var oData={
"dataList": [{
"id": 111,
"name": "Row1 Data",
"dropList": [
{"id": 1, "name": "Row1 dropDown Item1"},
{"id": 2, "name": "Row1 dropDown Item2"},
{"id": 3, "name": "Row1 dropDown Item3"},
{"id": 4, "name": "Row1 dropDown Item4"}
]
},
{
"id": 222,
"name": "Row2 Data",
"dropList": [
{"id": 5, "name": "Row2 dropDown Item1"},
{"id": 6, "name": "Row2 dropDown Item2"},
{"id": 7, "name": "Row2 dropDown Item3"}
]
},
{
"id": 333,
"name": "Row3 Data",
"dropList": [
{"id": 8, "name": "Row3 dropDown Item1"},
{"id": 9, "name": "Row3 dropDown Item2"},
{"id": 10, "name": "Row3 dropDown Item3"}
]
}
]};
Bind data here-
var mappingModel = new sap.ui.model.json.JSONModel({listData:oData});
sap.ui.getCore().setModel(mappingModel, "mappingModel");
demoTbl.setModel(mappingModel);
demoTbl.bindRows("/listData/dataList");
mappingModel.refresh(true);
var addSystemPage = new sap.m.Page( {
content:[demoTbl]
});

Answer 1

You'll have to provide the aggregation binding path for ListBox template as 'dropList'.
inputListBox.bindAggregation("items","dropList",function(oId,oContext){
return new sap.ui.core.ListItem({
key: oContext.getProperty("id"),
text: oContext.getProperty("name")
});
});