Hide empty DropdownBox in sapui5 table rows - sapui5

Question

Here is the simple table having three rows, and each row contains a DropdownBox with listItems. But the DropdownBox in the second row is empty. I want to hide the blank DropdownBox. Can we hide the empty DropdownBox from that row, so that it will look just a simple blank cell. Thanks in Advance!
Here, I have simple table.
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: "Column Data", 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);
var inputListBox = new sap.ui.commons.ListBox();
inputListBox.bindAggregation("items","dropList",function(oId,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": 333,
"name": "Row3 Data",
"dropList": [
{"id": 8, "name": "Row3 dropDown Item1"},
{"id": 9, "name": "Row3 dropDown Item2"},
{"id": 10, "name": "Row3 dropDown Item3"}
]
}
]};
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("addSystemPageId", {
content:[demoTbl]
});

Answer 1

There are many ways reading the cells of the table and determining the dropdown values and explicitly setting the visibility. I would propose the best way is to
var oData={
"dataList": [{
"id": 111,
"name": "Row1 Data",
"dropVis" : true,
"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",
"dropVis" : false,
"dropList": []
},
{
"id": 333,
"name": "Row3 Data",
"dropVis" : true,
"dropList": [
{"id": 8, "name": "Row3 dropDown Item1"},
{"id": 9, "name": "Row3 dropDown Item2"},
{"id": 10, "name": "Row3 dropDown Item3"}
]
}
]};
You can see the json object has been modified to get one attribute dropVis this can manually filled you you based on dropList and finally bind this attribute to the call template
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({
visible : "{dropVis}",
"association:listBox" : inputListBox
})
});
The visibility is bound directly and it should work.

Answer 2

You can make use of formatter to toggle visibility based on length of dropList Array.
template: new sap.ui.commons.DropdownBox({
visible: {
path: 'dropList',
formatter: function(aList) {
return aList ? !!aList.length : false;
}
}
});