UI5 - Insert/Delete functionality into a bound table within an XML view

[gary_king2]

The trouble with searching for help on a lot of things are the red herrings you often get, whereby you think you have found the answer, but the solution leads you down the wrong avenue and by the time you've discovered this a few hours have passed and then you restart the process. 😉

SO I'm hoping someone can help me with my issue. Here's what I am trying to achieve:

I have a XML view showing a table which is bound to a JSON model by the controller. The XML displays the table items (10 at present, with data) with a [Delete] button as the last item shown on the row. I also have an [Insert row] button shown in the toolbar above the table. All cells/rows are editable, which is what is required.

I now need to create two functions in my controller to insert an empty row in the table and also delete a row (current) from my table

In my controller I have:

myData = [ { Firstfield: "Roger", .... }, {...} ];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(myData);
this.getView.byId("myTable").setModel(oModel);
// Can I use this.getView.byId("myTable").setModel(oModel,"alias");

and then in my XML I have:

....
// Would like to use <Table items={alias}...
<Table items="{/}" editable="true" id="myTable" headerText=.... >
....
// Would like to use <Input value={alias/Firstfield}/>
<Input value={Firstfield}/>

That's keeping it as simple as possible, and using simple names for this example.

Any advice, and sample code example would be very much appreciated. And I would hope to return the favour some day.

[namrata_d]

you can try something like this -

var simData = [];

var oModelSim = new sap.ui.model.json.JSONModel();

var oTableinsert = this._oView.byId("insertsmartTable").getTable(); //Create a model and bind the table rows to this model

var data = oTableinsert.getModel().getData();

if(data!=null)

var model = oTableinsert.getModel().getData().modelData;

if(data==null|model==null)

{ var oModelSim = new sap.ui.model.json.JSONModel();

oModelSim.setData({modelData: simData});

oTableinsert.setModel(oModelSim);

oTableinsert.bindRows("/modelData"); }

var row = {}; row.ABC<columns identifier> = "";

oTableinsert.getModel().getData().modelData.splice(0,0,row);

oTableinsert.getModel().refresh();

this.onRender(this._oView.byId("insertsmartTable"))

[gary_king2]

I'll take a look at that method as well. I do have it working now, based in the Plunker example provided though. But will look at your method to see if offers a better method of achieving this.

[former_member227918]

Hi, check below link may help you.

Insert/Delete Row

[gary_king2]

Excellent answer, and always much better when there's a working example via Plunker or JsFiddle. I personally always seem to have an issue with JSBin though, as half of the examples I find there do not work, or are not on the subject initially discussed.

But thanks for the really good example. Very much appreciated.