We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

GridComponent pageSettings throws Error

I have an Error trying to use pageSettings (after some testing: more specifically using pageSizes creates the error) for GridComponent in my application and also trying to run the samples. Looks like a version conflict.

Now I used the simple sample "Pager with Page Size Dropdown" from:

https://helpej2.syncfusion.com/react/documentation/grid/paging


import { ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-react-grids';
import { GridComponent, Inject, Page } from '@syncfusion/ej2-react-grids';
import * as React from 'react';
import { data } from './datasource';
function App() {
const pageOptions = {
pageSize: 8, pageSizes: true
};
return (<GridComponent dataSource={data} allowPaging={true} height={268} pageSettings={pageOptions}>
<ColumnsDirective>
<ColumnDirective field='OrderID' headerText='Order ID' width='120' textAlign="Right"/>
<ColumnDirective field='CustomerID' headerText='Customer ID' width='100'/>
<ColumnDirective field='ShipCity' headerText='Ship City' width='100'/>
ColumnsDirective>
<Inject services={[Page]}/>
GridComponent>);
}
;
export default App;

And this also throws the same Error:

react-dom.production.min.js:121 TypeError: Cannot read properties of undefined (reading 'ListBase')

at t.createListItems (ej2-dropdowns.min.js:10:15374)

at t.renderItems (ej2-dropdowns.min.js:10:17524)

at t. (ej2-dropdowns.min.js:10:11141)

at t.notify (ej2-base.min.js:10:50632)

at t.trigger (ej2-base.min.js:10:11907)

at t. (ej2-dropdowns.min.js:10:11087)

at t.notify (ej2-base.min.js:10:50632)

at t.trigger (ej2-base.min.js:10:11907)

at t.setListData (ej2-dropdowns.min.js:10:10305)

at t.initialize (ej2-dropdowns.min.js:10:7846)

wf @ react-dom.production.min.js:121

c.callback @ react-dom.production.min.js:121

Fh @ react-dom.production.min.js:92

Ki @ react-dom.production.min.js:180

Ii @ react-dom.production.min.js:179

Ik @ react-dom.production.min.js:178

Sk @ react-dom.production.min.js:197

yb @ react-dom.production.min.js:196

Mi @ react-dom.production.min.js:189

db @ react-dom.production.min.js:79

Sk @ react-dom.production.min.js:198

yb @ react-dom.production.min.js:196

Oi @ react-dom.production.min.js:187

S @ react.production.min.js:17

U @ react.production.min.js:21

react-dom.production.min.js:79 Uncaught TypeError: Cannot read properties of undefined (reading 'ListBase')

at t.createListItems (ej2-dropdowns.min.js:10:15374)

at t.renderItems (ej2-dropdowns.min.js:10:17524)

at t. (ej2-dropdowns.min.js:10:11141)

at t.notify (ej2-base.min.js:10:50632)

at t.trigger (ej2-base.min.js:10:11907)

at t. (ej2-dropdowns.min.js:10:11087)

at t.notify (ej2-base.min.js:10:50632)

at t.trigger (ej2-base.min.js:10:11907)

at t.setListData (ej2-dropdowns.min.js:10:10305)

at t.initialize (ej2-dropdowns.min.js:10:7846)



The package.json:

{
"name": "matool.v2.1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"@syncfusion/ej2-base": "^21.1.38",
"@syncfusion/ej2-data": "^21.1.38",
"@syncfusion/ej2-icons": "^21.1.37",
"@syncfusion/ej2-layouts": "^21.1.37",
"@syncfusion/ej2-navigations": "^21.1.38",
"@syncfusion/ej2-react-base": "^21.1.38",
"@syncfusion/ej2-react-buttons": "^21.1.37",
"@syncfusion/ej2-react-dropdowns": "^21.1.38",
"@syncfusion/ej2-react-grids": "^21.1.38",
"@syncfusion/ej2-react-layouts": "^21.1.37",
"@syncfusion/ej2-react-navigations": "^21.1.38",
"css-loader": "^6.7.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.10.0",
"style-loader": "^3.3.2"
},
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.2",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.77.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.2"
}
}


1 Reply

HS Hemanthkumar S Syncfusion Team April 7, 2023 02:48 PM UTC

Hi Mehdi Nabhani,


Query: GridComponent pageSettings throws Error


We have prepared a sample and tried to reproduce your mentioned issue at our end but it was unsuccessful. Please refer to the below sample for more information.


Sample Link: https://stackblitz.com/edit/react-bgumhd?file=index.js


If you are still facing the issue, please try to reproduce the issue in the above attached sample and If possible please share the issue reproducing grid sample and video demon, which help us to better understand your query.


Regards,

Hemanth Kumar S


Loader.
Live Chat Icon For mobile
Up arrow icon