Table Not Getting Refreshed After Deleting a Row

Question

I am facing two issues when deleting a record in sap.m.Table as mentioned below.

1. After deleting a row using delete button, other rows are also getting vanished. Only after refreshing the page, I can see those records.

   

2. I have used success and error message after deleting the rows but it is not appearing.

Table.view.xml

<mvc:View
  xmlns:core="sap.ui.core"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  controllerName="sem.stock_app.controller.table"
>
  <Page
    title="Material Status"
    showNavButton="true"
    navButtonPress="onNavBack"
  >
    <Table id="table"
      growing="true"
      mode="MultiSelect"
      items="{odata>np_on_matid}"
    >
      <columns>
        <Column>
          <CheckBox text="Select Entry"/>
        </Column>
        <Column>
          <Text text="Material ID"/>
        </Column>
        <Column>
          <Text text="Category"/>
        </Column>
        <Column>
          <Text text="Material Desc"/>
        </Column>
        <Column>
          <Text text="Plant"/>
        </Column>
      </columns>
      <items>
        <ColumnListItem type="Active" press="onPress">
          <CheckBox selected="{false}"/>
          <Text text="{odata>Matid}"/>
          <Text text="{odata>Category}"/>
          <Text text="{odata>Matdesc}"/>
          <Text text="{odata>Plant}"/>
        </ColumnListItem>
      </items>
    </Table>
    <Button
      text="Delete"
      enabled="true"
      press="onDelete"
    />
  </Page>
</mvc:View>

Table.Controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "sap/ui/model/Filter",
  "sap/ui/core/routing/History",
  "sap/m/MessageToast",
  "sap/m/MessageBox"
], function(Controller, JSONModel, Filter, History, MessageToast, MessageBox) {
  "use strict";

  return Controller.extend("sem.stock_app.controller.table", {
    onInit: function() {
      this.getOwnerComponent().getRouter().getRoute("r2").attachPatternMatched(this.mynav, this);
    },

    mynav: function(oeve) {
      var key = this.getOwnerComponent().getModel("odata").createKey("matlistSet", {
        "Matid": oeve.getParameters().arguments.noti
      });
      this.getView().bindElement({
        path: "odata>/" + key,
        parameters: {
          expand: "np_on_matid"
        }
      });
    },

    onNavBack: function() {
      var oHistory = History.getInstance();
      var sPreviousHash = oHistory.getPreviousHash();
      if (sPreviousHash !== undefined) {
        window.history.go(-1);
      } else {
        var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
        oRouter.navTo("r1", {}, true);
      }
    },

    onPress: function(oitem) {
      var x = oitem.getSource().getBindingContext("odata").getProperty("Matid");
      this.getOwnerComponent().getRouter().navTo("r3", {
        matnr: x
      });
    },

    onDelete: function() {
      var i, tbl, aSelectedProducts, sPath, oProduct, oProductId;
      tbl = this.byId("table").getSelectedItems();
      aSelectedProducts = this.byId("table").getSelectedItems();
      if (aSelectedProducts.length) {
        for (i = 0; i < aSelectedProducts.length; i++) {
          oProduct = aSelectedProducts[i];
          oProductId = oProduct.getBindingContext("odata").getProperty("Matid");
          sPath = oProduct.getBindingContextPath();
          this.getOwnerComponent().getModel("odata").remove(sPath, {
            success: this._handleUnlistActionResult.bind(this, oProductId, true, i + 1, aSelectedProducts.length),
            error: this._handleUnlistActionResult.bind(this, oProductId, false, i + 1, aSelectedProducts.length)
          });
        }
      } else {
        this._showErrorMessage(this.getModel("i18n").getResourceBundle().getText("TableSelectProduct"));
      }
    },

    _handleUnlistActionResult: function(sProductId, bSuccess, iRequestNumber, iTotalRequests, oData, oResponse) {
      if (iRequestNumber === iTotalRequests) {
        MessageToast.show(this.getModel("i18n").getResourceBundle().getText("StockRemovedSuccessMsg", [iTotalRequests]));
      }
    },

  });
});

Component.js

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/Device",
  "sem/stock_app/model/models"
], function(UIComponent, Device, models) {
  "use strict";

  return UIComponent.extend("sem.stock_app.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      var url = "/sap/opu/odata/sap/ZMATLIST_SRV_03";
      var odata = new sap.ui.model.odata.ODataModel(url, {
        json: true
      });
      this.setModel(odata,"odata");
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
      this.setModel(models.createDeviceModel(), "device");
    }
  });
});

Answer 1

As discussed in the comments, the issues were:

1. Use of sap.ui.model.odata.ODataModel which has been out of maintenance since long time ago
2. There was no $batch operation implemented in the back-end system.