Uncaught ** Assertion failed in Wijmo: Element is already hosting a control

Uncaught ** Assertion failed in Wijmo: Element is already hosting a control

Posted by: abhijeet.jaiswal on 15 September 2022, 6:04 am EST

• 

  abhijeet.jaiswal

  • Post Options:
  • Link
    Copy

  Posted 15 September 2022, 6:04 am EST - Updated 4 October 2022, 7:39 am EST

  I’m using flexsheet in our project. Everything was fine until we thought of upgrading react version from 17.0.2 to 18.2.0.

  I’ve started getting error saying - Uncaught ** Assertion failed in Wijmo: Element is already hosting a control.

  Grid/flesheet is not even being rendered error get throws from initializeFlexSheet function.

  
  flex.deferUpdate(() => {
        const grid = new wjGrid.FlexGrid(document.createElement('div'), {
          itemsSource: data,
          columns: getColumns(),
        });
        flex.addBoundSheet('PriceAssessment', data, 0, grid);
        data.trackChanges = true;
        flex._contextMenu.show = () => false;
      });
  
  

  can someone please help, We are stuck on this from last few days.

  

  1870×439 55.5 KB

• 

  abhijeet.jaiswal

  • Post Options:
  • Link
    Copy

  Posted 15 September 2022, 6:06 am EST

  Versions of packages that I’m using are

  
      "@grapecity/wijmo.grid": "^5.20221.857",
      "@grapecity/wijmo.grid.xlsx": "^5.20221.857",
      "@grapecity/wijmo.react.grid.sheet": "^5.20221.857",
  
  

  
  
  import { FlexSheet } from '@grapecity/wijmo.react.grid.sheet';
  
  export const StyledFlexsheet = styled<any>(FlexSheet)`
    .wj-cell {
      font-size: 12px;
    }
  `;
  
  <StyledFlexsheet
              id="sample-sheet"
              stickyHeaders={true}
              isReadOnly={isReadOnly}
              ref={this.theGrid}
              autoGenerateColumns={false}
              keyActionTab="Cycle"
              isTabHolderVisible={false}
              itemsSource={data}
              selectionChanged={this.flexSelectionChanged}
              itemFormatter={this.formatItem}
              headersVisibility={wjGrid.HeadersVisibility.None}
              allowDragging={wjGrid.AllowDragging.None}
              allowResizing={wjGrid.AllowResizing.None}
              selectionMode={wjGrid.SelectionMode.CellRange}
              initialized={this.initializeFlexSheet}
              loadedRows={this.loadedRows}
              rowEditEnded={this.handleUpdateDataSet}
              cellEditEnded={this.handleCellEditEnded}
              beginningEdit={this.handleBeginningEdit}
            />