Immutability provider grid rerender

Immutability provider grid rerender

Posted by: tdnooij on 12 March 2026, 5:59 am EST

• 

  tdnooij

  • Post Options:
  • Link
    Copy

  Posted 12 March 2026, 5:59 am EST

  I have a grid where users can edit fields directly. However, the grid data can also be updated from the server. When a server update occurs, the grid re-renders.

  If the user currently has an active cell editor open during the re-render, the grid relies on the selection state, which gets lost. As a result, the user has to restart navigation from cell (0,0).

  When a cell is only selected (without the editor being active), this issue does not occur. The problem appears specifically when the cell editor is active and the grid refresh happens.

  In the demo I shared, the server update was mocked to simulate this behavior.

  https://jscodemine.mescius.io/sample/7AfAEv0MCEqgHjCimtNLvg/

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 12 March 2026, 8:01 am EST

  Hi Thomas,
  
  Thank you for sharing the sample. This issue could be expected as the grid’s data source is updated internally during this process, as you already know. However, you can handle a few events of the grid to restore the selection on the same cell after the update. It seems a good solution would be to restore the edit mode again in this situation, so we have updated the sample accordingly.
  
  Please refer to the following updated sample for the same - https://jscodemine.mescius.io/share/hkWKE3y49kSZJGu6Qlr3BA/
  
  For simplicity and a better understanding, you can also refer to the following sample without ImmutiabilityProvider; we used almost the same code in the above sample as well - https://stackblitz.com/edit/react-emxdnu?file=Hello.js
  
  In the above samples, you can keep editing the cells, and the updates will appear to be done asynchronously in the background without any impact on edit behavior. Please note that a small timing mismatch or keystroke register issue might be observed if you try to continuously edit a lot of cells quickly, one after another. It won’t affect the editing a lot, but it could be possible with the above implementation, as we are restoring the edit mode in the grid after the refresh. As per our understanding, it should be acceptable, as it won’t create any major impact, and such a situation only occurs rarely.
  
  However, in case, you still face any issues, or if there is something we missed, please let us know.
  
  Regards

• 

  tdnooij

  • Post Options:
  • Link
    Copy

  Posted 12 March 2026, 8:37 am EST

  Hi vivek, thanks for the examples. However, part of the problem we are experiencing still occurs in both of your demos. After restoring the selected cell, the user can no longer navigate using the keyboard.
  
  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 13 March 2026, 3:20 am EST

  Hi Thomas,
  
  We are unable to replicate the keyboard navigation issue; it seems to be working fine on our end. Probably, the issue replication steps differ on our end. However, we did a deeper investigation, looking for a better solution. We found that the ‘_getRowIndex’ method is causing this issue due to the internal implementation difference in FlexGrid with ImmutabilityProvider from a normal FlexGrid. You can use the following code to avoid this issue -

  import * as wjGrid from "@mescius/wijmo.grid";
  wjGrid.FlexGrid.prototype._getRowIndex = function (e) {
    if (this._cv) {
      var t = this.rows;
      if (e > -1) {
        for (var i = this._cv.items[e]; e < t.length; e++) if (JSON.stringify(t[e].dataItem) === JSON.stringify(i)) return e;
        return -1;
      }
      if (1 == t.length && t[0] instanceof wjGrid._NewRowTemplate) return 0;
      var o = this.selection.row,
        n = o > -1 ? t[o] : null;
      return n && (n instanceof wjGrid.GroupRow || null == n.dataItem) ? o : -1;
    }
    return this.selection.row;
  };

  Please refer to the following updated sample for the same - https://jscodemine.mescius.io/share/hhaPeeX-o0u7c5F9erQxaA/
  
  We have also reported this issue to the engineering team to confirm if this behavior is expected or not, with internal tracking ID - WJM-37620. We will update you on the same when we have an update from the engineering team.
  
  In case, you still face the issue after applying the above workaround, please let us know.
  
  Regards

• 

  tdnooij

  • Post Options:
  • Link
    Copy

  Posted 13 March 2026, 9:10 am EST

  Hi Vivek,

  Your patch works best out of what we have so far, but it’s still not perfect. It only works for the first grid re-render, so if the grid re-renders more than once without any user action, the selection is lost again.
  
  Regards

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 16 March 2026, 12:32 am EST

  Hi Thomas,
  
  In this case, you can try handling the beginningEdit event of the FlexGrid to apply the patch code. Please try using the following code -

  grid.beginningEdit.addHandler(() => {
        grid._getRowIndex = function (e) {
          var _this = grid;
          if (_this._cv) {
            var t = _this.rows;
            if (e > -1) {
              for (var i = _this._cv.items[e]; e < t.length; e++) if (JSON.stringify(t[e].dataItem) === JSON.stringify(i)) return e;
              return -1;
            }
            if (1 == t.length && t[0] instanceof wjGrid._NewRowTemplate) return 0;
            var o = _this.selection.row,
              n = o > -1 ? t[o] : null;
            return n && (n instanceof wjGrid.GroupRow || null == n.dataItem) ? o : -1;
          }
          return _this.selection.row;
        };
      });

  In case, the issue still persists, please update the sample to replicate the issue and share it with us, if possible, so that we can have a better understanding of the issue and look for a solution accordingly.
  
  Regards