Components are onrganized in simple hierarchical structure like this below
<Window>
<Grid>
<GridColumn
cell= {props => <MultiColumnComboBox />}
></GridColumn>
</Grid>
<Window>
When one row which means one multicolumncombobox exists inside <Grid>, No problem,
But, When two rows which mean two multicolumncombbox exist, An Error has happend.
"ResizeObserver loop completed with undelivered notifications."
my package.json is
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
"@microsoft/signalr": "^6.0.3",
"@mui/icons-material": "^5.11.9",
"@mui/material": "^5.6.4",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.17.2",
"@progress/kendo-file-saver": "^1.1.1",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-react-animation": "^5.9.0",
"@progress/kendo-react-buttons": "^5.18.0",
"@progress/kendo-react-charts": "^5.18.0",
"@progress/kendo-react-common": "5.18.0",
"@progress/kendo-react-data-tools": "^5.18.0",
"@progress/kendo-react-dateinputs": "^5.18.0",
"@progress/kendo-react-dialogs": "^5.18.0",
"@progress/kendo-react-dropdowns": "^5.18.0",
"@progress/kendo-react-form": "^5.18.0",
"@progress/kendo-react-grid": "^5.18.0",
"@progress/kendo-react-indicators": "^5.18.0",
"@progress/kendo-react-inputs": "^5.18.0",
"@progress/kendo-react-intl": "^5.18.0",
"@progress/kendo-react-labels": "^5.18.0",
"@progress/kendo-react-layout": "^5.18.0",
"@progress/kendo-react-listbox": "^5.18.0",
"@progress/kendo-react-listview": "^5.18.0",
"@progress/kendo-react-notification": "^5.18.0",
"@progress/kendo-react-pdf": "^5.18.0",
"@progress/kendo-react-popup": "^5.18.0",
"@progress/kendo-react-progressbars": "^5.18.0",
"@progress/kendo-react-scrollview": "^5.18.0",
"@progress/kendo-react-spreadsheet": "^5.18.0",
"@progress/kendo-react-tooltip": "^5.18.0",
"@progress/kendo-react-treeview": "^5.18.0",
"@progress/kendo-react-upload": "^5.18.0",
"@progress/kendo-svg-icons": "^1.9.0",
"@progress/kendo-theme-default": "^6.7.0",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.0",
"calculate-size": "^1.1.1",
"cldr": "^7.2.0",
"cldr-core": "^41.0.0",
"cldr-dates-full": "^41.0.0",
"cldr-numbers-full": "^41.0.0",
"dotenv": "^16.0.0",
"dragselect": "^2.3.0",
"hammerjs": "^2.0.8",
"mobx": "^6.6.1",
"mobx-react": "^7.5.2",
"monaco-editor": "^0.32.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-error-boundary": "^3.1.4",
"react-intersection-observer": "^9.4.3",
"react-router": "^5.3.4",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"react-simple-image-viewer": "^1.2.2",
"react-to-print": "^2.14.7",
"typescript": "^4.5.5",
"web-vitals": "^2.1.3"
And error image is.
Please. help me.
1 Answer, 1 is accepted
Hi,
I have tried the structure that you have shared in the following example, but I was not able to reproduce the error in question:
If the issue on your side persists, please share a stackblitz example replicating the error, so we can test and debug it locally.
As a side note, please have in mind that custom cells should not be inline functions and you need to set only the name of the custom component that will be defined outside of the main component:
<Column cell={MultiComboCell} />Having inline functions as custom cells will force React to re-mount the entire component on each change in the state.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
1. cannot repoduce => ummh... other case? like version. my all versions are "5.18.0" but you are using "6.0.3"
the other case is rendering problem, i'm using mobx state library.
My application is large sized web application. So I need to test the application by removing other library and code in order
Anyway, I never use "ResizeObserver" in my application.
Lastly, I have a question. "Is ResizeObserver not used in MultiColumnComboBox component or Window Component or GridComponent? "
2. Inline function - > I'm building Low Code(LC) Web Application.
all options are dynamic, not static. I have no choice but to use inline function. haha.
Managing state is very hard....
Hi Da,
I have tested the same example with version 5.18.0 of the components, but I was still not able to reproduce the error in question.
As for the error in question, you can take a look at the following forum thread and see if any of the suggestions will resolve the error in your project:
For the inline functions, please note that the functionality of the Grid will break with them, so you must use the approach that I have shared. You can achieve the same with dynamic options and using React Context for passing any references from the main component to the custom cells.