Loading progress in status bar

Loading progress in status bar

Posted by: lpagliaro on 11 August 2021, 9:19 am EST

• 

  lpagliaro

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 11 August 2021, 9:19 am EST

  Hello!! We have an application that uses SpreadJS Designer with React. We were wondering if it is possible to add a custom item to the status bar using designer to show the progress of the loading state of the workbook (something like ‘Loading: 0%’) when using incremental loading.

  Thanks!

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 12 August 2021, 6:38 am EST

  Hi,

  We are sorry but customizing the Designer status bar is currently not supported. Further, It is already in our backlog(internal Tracking ID: SJS-6910) and it will be available in our future release but doesn’t have any ETA for now.

  Regards
  
  Avinash

• 

  lpagliaro

  • Post Options:
  • Link
    Copy

  Posted 12 August 2021, 9:35 am EST

  Hi! We managed to do it by removing from the JSON config file of the designer the option that adds the status bar. This code:

  
  {
    "position": "bottom",
    "command": "statusBarPanel",
    "uiTemplate": "statusBarPanelTemplate"
  }
  
  

  Then we added a new status bar programatically:

  
        const statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(document.querySelector('.bottom-panels'));
  
        statusBar.bind(spread);
        statusBar.add(
          new GC.Spread.Sheets.StatusBar.StatusItem('loadingStatus', {
            menuContent: 'Loading status',
            value: 'Loading: 0%',
            itemName: 'loadingStatus',
            showStatusInContexMenu: false,
          })
        );
  
  

  This way we have a custom item in the status bar. The issue we are facing now is that the value of this item is not updated when doing this:

  
        spread.fromJSON(JSON.parse(workbook), {
          doNotRecalculateAfterLoad: true,
          incrementalLoading: {
            loaded: () => {
              onWorkpaperLoaded()();
            },
            loading: progress => {
              const loadingStatus = statusBar.get('loadingStatus');
              const loadingProgress = (progress * 100).toFixed(2);
  
              loadingStatus.value = `Loading: ${loadingProgress}%`;
  
              statusBar.update();
            },
          },
        });
  
  

  Is there something we are doing wrong when updating the status bar item value?

  The only way we found to solve it was to remove the custom item and add it again with the new value, like this:

  
        spread.fromJSON(JSON.parse(workbook), {
          doNotRecalculateAfterLoad: true,
          incrementalLoading: {
            loaded: () => {
              onWorkpaperLoaded()();
            },
            loading: progress => {
              const loadingProgress = (progress * 100).toFixed(2);
  
              statusBar.remove('loadingStatus');
              statusBar.add(
                new GC.Spread.Sheets.StatusBar.StatusItem('loadingStatus', {
                  menuContent: 'Loading status',
                  value: `Loading: ${loadingProgress}%`,
                  itemName: 'loadingStatus',
                  showStatusInContexMenu: false,
                })
              );
            },
          },
        });
  
  

  But we don’t think is the optimal approach. Any ideas?

  Thanks!

• 

  avinash.pathak

  • Post Options:
  • Link
    Copy

  Posted 13 August 2021, 3:39 am EST

  Hi,

  For this, You need to define the function on the custom status bar item that changes the inner text. Please refer to the following code snippet and attached sample that demonstrates the same.

  
  var spanItem = new GC.Spread.Sheets.StatusBar.StatusItem("spanItem", {
    menuContent: "current span",
    value: "span test"
  });
  spanItem.onCreateItemView = function (container) {
    var statusBarDiv = (this.contentDiv = document.createElement("div"));
    statusBarDiv.innerHTML = `<span>${this.value}</span>`;
    container.appendChild(statusBarDiv);
  };
  [b]spanItem.updateText = function (text) {
    this.contentDiv.children[0].innerText = text;
  };[/b]
  
  var statusBar = new GC.Spread.Sheets.StatusBar.StatusBar(
    document.getElementById("statusBar"),
    { items: [spanItem] }
  );
  statusBar.bind(spread);
  
  //when you need to update just call updateTextMthod
  let item = statusBar.get("spanItem");
     statusBar.get("spanItem").updateText("changed");
  
  

  sample: https://codesandbox.io/s/eloquent-sanderson-l9iyn?file=/src/index.js

  Regards
  
  Avinash