Delete Multiple Rows (sap.ui.table.Table)

Question

I am working on SAPUI5 Table, I have created a functionality to delete selected rows from the table but when I select to delete more than one rows, it is deleting wrong rows. Although first selected row is deleted correctly, others are not.

fDeleteRow: function(oEvent) {
    var oTable = this.getView().byId("tbl");
    var data = oTable.getModel();
    var selRowCount = oTable._oSelection.aSelectedIndices.length;
    var Flag = false;
    for (var i = 0; i < selRowCount; i++) {
        var rowNum = oTable._oSelection.aSelectedIndices[i];
        data.oData.splice(rowNum, 1);
        data.oData.refresh();
        Flag = true;
    }
    if (Flag) {
        var oModelJson = new sap.ui.model.json.JSONModel();
        oModelJson.setData(data.oData);
        oTable.unbindColumns();
        oTable.unbindRows();
        oTable.setModel(oModelJson);
        oTable.bindRows("/");
    }
}

D. Seah D. Seah · Accepted Answer · 2018-01-24T22:55:11

Here is an example http://jsbin.com/ducuyah/edit?html,js,output

You need to reverse the selected indices first before splicing. and please do not use private member in the table

var oTable = new sap.ui.table.Table({
  rows: '{/d/results}',
  title: new sap.m.Button({
    icon: 'sap-icon://delete',
    press: function() {
      var oModel = oTable.getModel();
      var oData = oModel.getProperty('/d/results');
      var reverse = [].concat(oTable.getSelectedIndices()).reverse();
      reverse.forEach(function(index) {
        oData.splice(index, 1);
      });
      oModel.refresh();
      oTable.setSelectedIndex(-1);
    }
  }),
  columns: [
    new sap.ui.table.Column({
      width: '100px',
      label: new sap.ui.commons.Label({text: "District Name"}),
      template: new sap.ui.commons.TextView({text:"{District}"})
    }),
    new sap.ui.table.Column({
      width: '80px',
      label: new sap.ui.commons.Label({text: "County"}),
      template: new sap.ui.commons.TextView({text:"{County}"})
    })]
});


var model = new sap.ui.model.json.JSONModel({
  d: {
    results: [
      { District: "D1", County: "C1"},
      { District: "D2", County: "C2"},
      { District: "D3", County: "C3"},
      { District: "D4", County: "C4"},
      { District: "D5", County: "C5"},
      { District: "D6", County: "C1"},
      { District: "D7", County: "C2"},
      { District: "D8", County: "C3"},
      { District: "D9", County: "C4"},
      { District: "D5", County: "C5"},
      { District: "D10", County: "C1"},
      { District: "D11", County: "C2"},
      { District: "D12", County: "C3"},
      { District: "D13", County: "C4"},
      { District: "D14", County: "C5"},
    ] 
  }
});

oTable.setModel(model);
oTable.placeAt('content');
oTable.setFirstVisibleRow(10);
oTable.setSelectedIndex(10);

Delete Multiple Rows (sap.ui.table.Table)

1 Answers