Tree table is not reflecting the updated model data changes at the front end

Question

I have two tables ,
1) Provider table(tree table)  2)member table
I have implemented drag and drop functionality using jQuery UI on both tables.
In my scenario when I drag a member from the member table and drop it on the Provider table and also when I delete an assigned member from the provider table I will update the data fetched from odata model and again I will call the method which binds the data to the provider table so that the table will reflect the changes.
here is the code,
on drop:
$("#Provider tbody tr").droppable({
  drop: function(event){
       oController.AssignMember(oProviderId, oMemberId)
  }).disableSelection();
Assign member function:   here am updating the model.
AssignMember : function(oProviderId, oMemberId){
  var oModel = new sap.ui.model.odata.ODataModel("../../../services/provider.xsodata/", true);
  var oParameters = {};
  oParameters.PROVIDER_ID = oProviderId;
  oParameters.MEMBER_ID = oMemberId;
  oParameters.CREATED_ON = new Date();
  oModel.setHeaders({"content-type" : "application/json;charset=utf-8"});
  oModel.create( "/PROVIDERMEMBERS", oParameters, null, function() {
  var oController = sap.ui.controller("adsm.provider.member_assignment_view");
  oController.GetProviderData();
  },function(jqXHR) {
  var errorMessage = jqXHR.response.body;
  var jsondata = JSON.parse(errorMessage);
  sap.ui.commons.MessageBox.alert(jsondata.error.message.value);
GetProviderData function: here i bind the data to the table
GetProviderData: function(){
var oModel = new sap.ui.model.odata.ODataModel("../../../services/provider.xsodata/", true);
var Context = "/PROVIDERS?expand=ASSIGNEDMEMBERS&$select=NAME,ID,ASSIGNEDMEMBERS/NAME,ASSIGNEDMEMBERS/ID,ASSIGNEDMEMBERS/PROVIDER_ID";
  var oTable = sap.ui.getCore().byId("tblProviders");
  oModel.read(Context, null, null, true, onSuccess, onError);
  function onSuccess(oEventdata){
  var outputJson = {};
  var p = 0;
  var r = {};
  if (oEventdata) {
  r = oEventdata;
  try {
  if (oEventdata.d){
  r = oEventdata.d;
  } catch(e){
  //alert('oEventdata.d failed');
  try {
  if (oEventdata.d.results){
  r = oEventdata.d.results;
  } catch(e){
  //alert('oEventdata.d.results failed');
  try {
  if (oEventdata.results){
  r = oEventdata.results;
  } catch(e){
  //alert('oEventdata.results failed');
  $.each(r, function(i, j) {
  outputJson[p] = {};
  outputJson[p]["NAME"] = j.NAME;
  outputJson[p]["ID"] = j.ID;
  outputJson[p]["PROVIDER_ID"] = j.ID;
  outputJson[p]["DELETE"] = 0;
  var m = 0;
  if (j.ASSIGNEDMEMBERS.results.length > 0) {
  $.each(j.ASSIGNEDMEMBERS.results, function(a,b) {
  outputJson[p][m] = { NAME: b.NAME,
  ID : b.ID,
  PROVIDER_ID: b.PROVIDER_ID,
  DELETE: 1};
  m++;
  p++;
var oModel = new sap.ui.model.json.JSONModel();
  oModel.setData(outputJson);
  oTable.setModel(oModel);
  function onError(oEvent){
  console.log("Error on Provider Members");
oTable.bindRows({
  path:"/"
Its working fine in chrome but in IE the model data gets updated but the table is not reflecting the changes at front end.Can anyone suggest me a possible solution to fix this?
Please have a look at the attached screen shots.
Best regards,
Amala Suganya.

Answer 1

Hi Amala,
I think this will help you:
Disabling Cache for CRUD/FI OData scenarios for a UI5 Application on Internet Explorer
Kind regards,
RW