Table Not Getting Refreshed After Deleting a Row - sapui5

Question

I am facing two issues when deleting a record in sap.m.Table as mentioned below.
After deleting a row using delete button, other rows are also getting vanished. Only after refreshing the page, I can see those records.
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:
Use of sap.ui.model.odata.ODataModel which has been out of maintenance since long time ago
There was no $batch operation implemented in the back-end system.