Skip to Content

sap.m.Table row deleting last row in dynamic addition and removing row with outside buttons

Dear experts,

I am having a sap.m.Table with 3 columns, which is binded to json with empty data.

Ex : this.oTableData = { "Findings" : [] }; this.oTableModel.setData(this.oTableData); this.oFindingsTable.setModel(this.oTableModel,"oTableModel");

Initiall my table is with empty rows. there are 2 buttons outside of the table.

when i click add i am pushing the row in the json data and binding

Adding a row

===========

var oTable = this.oFindingsTable;

var oModel = oTable.getModel("oTableModel"); oModel.refresh();

var latestData = { "Findings" : [] };

var oItems = oTable.getItems();

for (var i=0; i<oItems.length; i++) {

var oRow = oTable.getItems()[i]; var newRow = { "findingno": oRow.getCells()[0].getValue(), "priority": oRow.getCells()[1].getValue(), "longtext": oRow.getCells()[2].getValue(), "Recommendations" : [] }; latestData.Findings.push(newRow); } oModel.setData(latestData);

oTable.setModel( oModel, "oTableModel"); //refresh table with the entered data var oData = oTable.getModel("oTableModel") .getData(); var oNewRow = {"findingno":"", "priority":"", "longtext":"" , "Recommendations" : []};

oData.Findings.push(oNewRow);

oModel.refresh();

oTable.setModel(oModel, "oTableModel");

For deletion using the below Code :

===========================

//refresh table with the entered data var latestData = { "Findings" :[] }; for (var i=0; i<oItems.length; i++) { var oRow = oTable.getItems()[i]; var newRow = { "findingno": oRow.getCells()[0].getValue(), "priority": oRow.getCells()[1].getValue(), "longtext": oRow.getCells()[2].getValue(), "Recommendations" : [] }; latestData.Findings.push(newRow); } oModel.setData(latestData); oTable.setModel(oModel , "oTableModel"); // end of refresh table with the entered data var aData = oTable.getModel("oTableModel").getData(); var aContexts = oTable.getSelectedContexts(); for (var i=aContexts.length -1; i>=0; i--) { var oThisObj = aContexts[i].getObject(); var index = $.map(aData, function(obj, index) { if(obj === oThisObj) { return index; } }); // oTable.removeItem(oTable.getItems()[index]); aData.Findings.splice(index, 1); } //end of for loop oModel.refresh(); oModel.setData(aData); oModel.refresh(); oTable.setModel(oModel , "oTableModel");

Problems

==========

1. In dynamic row adding and deletion with the empty model initially is not reflecting in 2 way, so every time i am fetching the entered data.

2. with this adding of a Row is working fine, but for deletion it is always deleting the last row in the table irrespective of your selection.

3. How to make the above code to work for deletion of selected row

Thanks and Regards

Kalyan

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Sep 25, 2017 at 09:56 AM

    Hi,

    For deletion of row you can do something like below code.

    // Getting row index from the path
    var vIndex = oEvent.getSource().getBindingContext("prodListMdl").getPath().split("/")[2],
        viewMdl = this.getView().getModel("prodListMdl");
    
    //deleting row using index from the model
    viewMdl.getData().prodListData.splice(vIndex,1);
    viewMdl.refresh();
    
    Add comment
    10|10000 characters needed characters exceeded