Pre-requisites
1.sapui5 framework
2.basic javascript knowledge
What we are going to do is simple.We have two comboboxes.Based on first combobox value second combobox values should change.ie when value changes second combobox binding should change(dynamic binding).
Steps
1.Our odata should look like this.Here iam using custom data.Set data to the core so we can access it.
2.Create first combobox and bind data to it.Here is the tricky part.In the selectionchange event of combobox call a function for binding the secondcombo passing the selected key as parameter.
3.Function for binding second combobox.
4.You Should set initial binding of second combo by calling function passing 0 as parameter
What we are going to do is simple.We have two comboboxes.Based on first combobox value second combobox values should change.ie when value changes second combobox binding should change(dynamic binding).
Steps
1.Our odata should look like this.Here iam using custom data.Set data to the core so we can access it.
var oModel = new sap.ui.model.json.JSONModel({ "Data": [{ "no": 10, "key": 0, "sub": [{ "subno": 100 }, { "subno": 101 }, { "subno": 102, }] }, { "no": 11, "key": 1, "sub": [{ "subno": 110 }, { "subno": 111 }, { "subno": 112 }] }, { "no": 11, "key": 2, "sub": [{ "subno": 110 }, { "subno": 111 }, { "subno": 112 }] }] }); sap.ui.getCore().setModel(oModel, "myModel");
2.Create first combobox and bind data to it.Here is the tricky part.In the selectionchange event of combobox call a function for binding the secondcombo passing the selected key as parameter.
jQuery.sap.require("sap.m.ComboBox"); rComboItem = new sap.ui.core.ListItem("itemsr", { key: '{myModel>key}', text: '{myModel>no}' }); numCombo = new sap.m.ComboBox("numCombo", { items: { path: "myModel>/Data", template: rComboItem, }, selectionChange: function(evt) { var b = ""; b = evt.getParameter("selectedItem").getKey(); alert(b); subComboBind(b); } });
3.Function for binding second combobox.
function subComboBind(b) { sap.ui.getCore().getControl("subCombo").bindAggregation("items", { path: "myModel>/Data/" + b + "/sub", template: bComboItem, }); }
4.You Should set initial binding of second combo by calling function passing 0 as parameter
bComboItem = new sap.ui.core.ListItem({ text: '{myModel>subno}' }); subCombo = new sap.m.ComboBox('subCombo', {}); subComboBind(0);
5.All done.See it in action.I have shared jsbin code.(try to open in chrome if mozilla doesn't work)
If you enjoyed this post, Please Share!!
0 comments :
Post a Comment