Quantcast
Channel: SCN: Message List
Viewing all articles
Browse latest Browse all 1026

ComboBox on change event in table

$
0
0

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");

Viewing all articles
Browse latest Browse all 1026

Trending Articles