I have combo box bind to sapui5 table . Table has two columns and both are combo assume COLUMN1 and COLUMN2 . Based on the selection of COLUMN1 I want to change the list binding of COLUMN2 of respective row . Column 1 has type property bind to combo , based on type "edge" or "vertex" , it should filter the list of same type in COLUMN2 combo . If edge type is selected in COLUMN1 , COLUMN2 combo should display list of edge type item , for that row only .
Jsbin Link
http://jsbin.com/xihebisowe/1/edit?js,output
var mData = { columnOneList: [{ key: 1, value: "X", type: "edge" }, { key: 2, value: "Y", type: "vertex" }], columnTwoList: [{ key: 1, value: "A", type: 'edge' }, { key: 2, value: "B", type: 'edge' }, { key: 3, value: "C", type: 'vertex' }, { key: 4, value: "D", type: 'vertex' }], tableData: [{ columnOne: "X", columnTwo: 'A' }, { columnOne: "Y", columnTwo: 'C' }] }; var oModel = new sap.ui.model.json.JSONModel(mData); sap.ui.getCore().setModel(oModel); var columnOneCombo = new sap.ui.commons.ComboBox({ items: { path: "/columnOneList", template: new sap.ui.core.ListItem({ key: "{key}", text: "{value}" }) }, value: "{columnOne}", change: function(oEvent) { // Change Event } }); var columnTwoCombo = new sap.ui.commons.ComboBox({ items: { path: "/columnTwoList", template: new sap.ui.core.ListItem({ key: "{key}", text: "{value}" }) }, value: "{columnTwo}", change: function(oEvent) { // Change Event } }); var oTable = new sap.ui.table.Table({ visibleRowCount: 4, firstVisibleRow: 3, width: "70%", columns: [{ label: 'COLUMN1', template: columnOneCombo }, { label: 'COLUMN2', template: columnTwoCombo }] }); oTable.bindRows("/tableData"); oTable.placeAt("content");