Is it possible to add a new row to an existing table in SAP UI5?
Below is the code snippet:
onInit: function() {
var oModel = new sap.ui.model.json.JSONModel("Model/Clothing.json");
this.getView().setModel(oModel);
var table = this.getView().byId("tableid");
table.bindItems("/catalog/clothing/categories", new sap.m.ColumnListItem({
type: "Navigation",
press: function(evt) {},
cells: [
new sap.m.Text({
text: "{name}"
}), new sap.m.Text({
text: "{amount}"
}), new sap.m.Text({
text: "{currency}"
}), new sap.m.Text({
text: "{size}"
})
]
}));
table.setModel(oModel);
},
onPress: function(oEvent) {
var table = this.getView().byId("tableid");
var items = table.getSelectedItems();
for (var i = 0; i < items.length; i++) {
var data = new sap.m.ColumnListItem({
cells: [new sap.m.Text({
text: "new Row1"
}), new sap.m.Text({
text: "new row1"
}), new sap.m.Text({
text: "new row1"
}), new sap.m.Text({
text: "new row1"
})]
});
table.addItem(data);
}
},
<Table id="tableid" mode="MultiSelect" select="addRows">
<columns>
<Column>
<Text text="column1" />
</Column>
<Column>
<Text text="column2" />
</Column>
<Column>
<Text text="column3" />
</Column>
<Column>
<Text text="column4" />
</Column>
</columns>
</Table>
<Button text="Edit" press="onPress" />
See the output image here:
https://i.sstatic.net/8TId3.png
What I aim to do:
- Select a checkbox.
- Press the
Editbutton. - When
Editis pressed, I want to insert a new row below the selected checkbox row.
Can this be achieved?
Please note the new row is currently being added at the end of the table