Here is my reactjs code
import * as React from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective, Page, Inject }from '@syncfusion/ej2-react-grids';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
export default class Gridku extends React.Component{
constructor() {
super(...arguments);
this.data = new DataManager({
url: './getMenu',
adaptor: new WebApiAdaptor
});
}
render() {
return( <div className='control-pane'>
<div className='control-section'>
<GridComponent id="Grid" dataSource={this.data} allowPaging={true} ref={grid => this.gridInstance = grid} pageSettings={{ pageSize: 6,pageSizes: true }}>
<ColumnsDirective>
<ColumnDirective field='nodeId' headerText='Node ID' width='150' textAlign="Right"/>
<ColumnDirective field='nodeText' headerText='Node Text' width='150'/>
</ColumnsDirective>
<Inject services={[Page]} />
</GridComponent>
</div>
</div>
)
}
};
this is return form API
{"Items":[{"nodeId":0,"nodeText":"Sistem"},{"nodeId":1,"nodeText":"Master"},{"nodeId":2,"nodeText":"Purchase"},{"nodeId":3,"nodeText":"Sales"},{"nodeId":4,"nodeText":"Production"},{"nodeId":5,"nodeText":"Inventory"},{"nodeId":6,"nodeText":"Stock"},{"nodeId":7,"nodeText":"Finance"},{"nodeId":8,"nodeText":"Purchase Report"},{"nodeId":9,"nodeText":"Sales Report"},{"nodeId":10,"nodeText":"Finance Report"},{"nodeId":11,"nodeText":"Stock Report"}],"Count":12}
Here is the result