Tablesheet Bind View Promise Chain vs Async/Await

Tablesheet Bind View Promise Chain vs Async/Await

Posted by: michael.thrift2 on 12 August 2022, 12:20 pm EST

• 

  michael.thrift2

  • Post Options:
  • Link
    Copy

  Posted 12 August 2022, 12:20 pm EST

  Most samples for retrieving and displaying data using the TableSheet plugin use the promise chain pattern seenbelow:

  
  //bind a view to the table sheet
  myTable.fetch().then(function () {
      var view = myTable.addView("myView");
      sheet.setDataView(view);
  });
  
  

  I would like to use the async/await pattern instead and as a result separate the creation of a table, the call to fetch data and the creation of a view into separate async functions. The result is a view that displays no records initially, but as you interact with the table, rows will start to show up. It is as if the TableSheet is no longer in sync with when it should be redrawing the control. Even a call to to refresh() does not help.

  I think there is behavioral differences between promise chaining and async/await, specifically the code inside the then() function executes right BEFORE the finish of the fetch() code. So it may be that things are happening out of order as a result of using async/await.

  
  export function AddDataTable(tableName: string, 
      theme: string, 
      rowOptions: IRowOptions,
      customRowActions,
      tabHelper) {
  
          if (spread) {
              var dataManager = spread.dataManager();
              dataManager.addTable(tableName, {
                  remote: {
                      read: function () { return tabHelper.invokeMethodAsync('GetItemsCallBack'); },
                      update: function (item) { return tabHelper.invokeMethodAsync('UpdateItemCallBack', item); },
                      create: function (item) { return tabHelper.invokeMethodAsync('CreateItemCallBack', item); },
                      batch: function (changes) { return tabHelper.invokeMethodAsync('BatchChangesCallBack', changes); },
                      delete: function (item) { return tabHelper.invokeMethodAsync('DeleteItemCallBack', item); }
                  },
                  batch: true
              });
  
              var sheet: GC.Spread.Sheets.TableSheet.TableSheet = spread.addSheetTab(0, tableName, GC.Spread.Sheets.SheetType.tableSheet);
              sheet.applyTableTheme(GC.Spread.Sheets.Tables.TableThemes[theme]);
              SetRowActions(sheet, rowOptions, customRowActions, tabHelper);
  
          }
  }
  
  export async function GetTableData(tableName: string) {
  
      if (spread) {
          var dataManager = spread.dataManager();
          var tbl = dataManager.tables[tableName];
          if (tbl) {
              await tbl.fetch();
          }
      }
  }
  
  export function CreateView(tableName: string, viewName: string, columns: Array<GC.Data.IColumn>) {
  
      if (spread) {
          var dataManager = spread.dataManager();
          var tbl = dataManager.tables[tableName];
          if (tbl) {
  
              dataViews[viewName] =  tbl.addView(viewName, columns);
              SetActiveView(tableName, viewName);
          }  
      }
      
  }
  
  
  export function SetActiveView(tableName: string, viewName: string) {
  
      if (spread) {
          var sheet: GC.Spread.Sheets.TableSheet.TableSheet = spread.getSheetTab(tableName); 
          sheet.setDataView(dataViews[viewName]);
      }
  
  }
  
  
  

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 17 August 2022, 6:13 am EST

  Hi,

  We are sorry but we are unable to replicate the issue on our end. Could you please share a sample that demonstrates the differences? You may also refer to the attached sample and edit it to replicate the issue.

  sample: https://jscodemine.grapecity.com/share/b7RG99js30idcyPdQI1qcg/

  Regards,
  
  Avinash

• 

  michael.thrift2

  • Post Options:
  • Link
    Copy

  Posted 18 August 2022, 9:43 am EST

  The async/await does work as expected. However I was able to reproduce the issue, but now I realize it isn’t a result of Promise Chain vs async/await pattern.

  I created code sample that you can use to demo the issue from the link below. I created 3 buttons: Load Data, Create View & Set Active View

  Everything works as expected if the last operation is “Set Active View”. But if you create a View first, then set the active view, then click “Load Data”. The view does not update with records.

  Then if you click into the first row (Add New Row placeholder). Once you click into a cell and TAB out, a single record from the loaded data appears. I’m attaching a GIF to demonstrate as it is hard to explain. Below is the code demo.

  https://jscodemine.grapecity.com/sample/rqvEARtv_U2jd1XJRoDxDA/[img]https://gccontent.blob.core.windows.net/forum-uploads/file-3733e36c-ce2c-4263-bb63-e52d44ee02a2.gif[/img]

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 22 August 2022, 2:56 am EST

  Hi,

  This is expected behavior. if the feature after setting the setting view(which is not recommended always create a view and set view after the data is fetched) then you need to restore the view again.

  Please refer to the code snippet and let me know if you face any issues.

  
      loadData.addEventListener('click', async function () {
          var dataManager = spread.dataManager();
          var tbl = dataManager.tables["myTable"];
          var shheetTab = spread.getSheetTab(0)
          await tbl.fetch();
          await shheetTab.restoreView(await sheetTab.getDataView("myView"))
      });
  
  

  Regards,
  
  Avinash