Posted 14 September 2022, 9:26 pm 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/flexsheet is not even being rendered. error gets thrown 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;
});
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}
/>
```[img]https://gccontent.blob.core.windows.net/forum-uploads/file-cf0f9ea4-24c6-4631-8cf8-cae8fc7165e4.png[/img]