I want to add table row in xml.view using js controller. I tried many times but i couldn't figure out.. Please help me senior Ui developers!!
xml.view
<object:ObjectPageSection title ="Item"/>
<content>
<t:Table id ="itemTable" visibleRowCount = "1" firstVisibleRow = "1">
<t:toolbar>
<Toolbar>
<ToolbarSpacer/>
<Button icon = "sap-icon://add" press = "Add" />
</Toolbar>
</t:toolbar>
<t:Column autoResizable = "true">
<Label text = "MM#"/>
<t:template><c:TextField value = "{mm}"/></t:template>
</t:Column>
<t:Column autoResizable = "true">
<Label text = "Description" />
<t:template><c:TextView text = "{des}" /></t:template>
</t:Column>
<t:Column autoResizable = "true">
<Label text = "Qty" />
<t:template><c:TextView text = "{qty}"/></t:template>
</t:Column>
<t:Column autoResizable = "true">
<Label text = "Unit" />
<t:template><c:TextView text = "{unit}"/></t:template>
</t:Column>
<t:Column autoResizable = "true">
<Label text = "@ Price" />
<t:template><c:TextView text = "{price}"/></t:template>
</t:Column>
<t:Column autoResizable = "true">
<Label text = "Net Amount" />
<t:template><c:TextView text = "{net}"/></t:template>
</t:Column>
</t:Table>
controller.js
sap.ui.controller("zhmmatest.CreatePR", {
onInit: function() {
},
Add: function (oEvent) {
var oTable = sap.ui.getCore().byId("itemTable");
var oPath = oTable.getBinding().getPath();
var oModel = oTable.getModel().getProperty(oPath);
console.log(oModel);
oModel.unshift({
mm: 6,
des: "hello",
qty: 12,
unit: 13,
price: 12,
net: 12
});
oTable.getModel().setProperty(oPath, oModel);
otable.bindRows(oPath);
}
});