GridComponent pageSettings throws Error

[Mehdi Nabhani]

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"

}

}

[Hemanthkumar S]

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