Progressbar for Grid updates?

[jdhParticipant]

I have a need in my app to modify a field in all selected rows (however many that may be), and while that part is working fine, there’s a big difference in time if the user is updating 1 record or 300, and I want to include a determinate progress bar since I know how many total rows need to be updated, and as I’m updating sequentially with setcellvalue(), I can easily calculate the progress.

My problem is that this update process blocks everything else, so the progress bar is not updated until the loop exits, at which point it’s updated all at once to 100 and is therefore useless as a progress indicator.

Has anyone else faced this? How do I get the progress bar to update as the code is going through and updating the rows?

The below code is a recently refactored trial using setTimeout to get around the synchronicity issue since simply doing this.myGrid.getselectedrowindexes().forEach() didn’t work

  updateStatusOnSelectedRows() {
    const rowsToUpdate = this.dqGrid.getselectedrowindexes();
    //if currently showing open, the action was to reject records
    const newRejectedFieldValue = this.isShowingOpenErrors ? 'Y' : 'N';
    let numRowsUpdated = 0;
    let batchCounter = 0;

    const updateProgress = () => {
      if (numRowsUpdated > rowsToUpdate.length) return;
      numRowsUpdated += 1;
      this.savingProgress = Math.round(numRowsUpdated / rowsToUpdate.length * 100);
      for (let i = 0; i < 50; i++) {
        if (batchCounter > rowsToUpdate.length) break;
        updateGrid();
        batchCounter += 1;
      }
      setTimeout(updateProgress, 16);
    };

    const updateGrid = () => {
      let idx = <number>rowsToUpdate[batchCounter];
      this.dqGrid.setcellvalue(idx, 'rejected', newRejectedFieldValue);
    };

    setTimeout(updateProgress, 0);
    this.savingProgress = 100;
  }

[Peter StoevKeymaster]

hi jdh,

I think it would be better to use the updaterow function to update multiple rows in single function call passing all rows that will be updated as a function argument. The argument’s type is Array.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts