Unable to load data into grid.

[admin]

I am trying out the grid component on React with this sample code. However, I am getting an empty grid with the message No Rows Loading.

[admin]

This is the screenshot of the grid

[admin]

<div>
<div>Below is my source code:</div>
<div></div>
<div>import * as React from ‘react’;</div>
<div>import AppPage from ‘common/layout/appPage’;</div>
<div>import { Grid, Smart } from ‘smart-webcomponents-react/grid’;</div>
<div>const ProjectCategoryPage = () => {</div>
<div>  const dataSource = new Smart.DataAdapter({</div>
<div>    dataSource: [</div>
<div>      {</div>
<div>        EmployeeID: 1,</div>
<div>        FirstName: ‘Nancy’,</div>
<div>        LastName: ‘Davolio’,</div>
<div>        ReportsTo: 2,</div>
<div>        Country: ‘USA’,</div>
<div>        Title: ‘Sales Representative’,</div>
<div>        HireDate: ‘1992-05-01 00:00:00’,</div>
<div>        BirthDate: ‘1948-12-08 00:00:00’,</div>
<div>        City: ‘Seattle’,</div>
<div>        Address: ‘507 – 20th Ave. E.Apt. 2A’,</div>
<div>      },</div>
<div>    ],</div>
<div>    keyDataField: ‘EmployeeID’,</div>
<div>    parentDataField: ‘ReportsTo’,</div>
<div>    id: ‘EmployeeID’,</div>
<div>    dataFields: [</div>
<div>      ‘EmployeeID: number’,</div>
<div>      ‘ReportsTo: number’,</div>
<div>      ‘FirstName: string’,</div>
<div>      ‘LastName: string’,</div>
<div>      ‘Country: string’,</div>
<div>      ‘City: string’,</div>
<div>      ‘Address: string’,</div>
<div>      ‘Title: string’,</div>
<div>      ‘HireDate: date’,</div>
<div>      ‘BirthDate: date’,</div>
<div>    ],</div>
<div>  });</div>
<div>  const columns = [</div>
<div>    {</div>
<div>      label: ‘First Name’,</div>
<div>      dataField: ‘FirstName’,</div>
<div>      width: 200,</div>
<div>    },</div>
<div>  ];</div>
<div>  return (</div>
<div>    <AppPage screen=”administration.projectCategory”></div>
<div>      <div className=”col-12″></div>
<div>        <Grid</div>
<div>          id=”grid”</div>
<div>          dataSource={dataSource}</div>
<div>          columns={columns}</div>
<div>        /></div>
<div>      </div></div>
<div>    </AppPage></div>
<div>  );</div>
<div>};</div>
<div>export default ProjectCategoryPage;</div>
</div>

[Hristofor]

Hi Hao Siong Ng,
it looks like you are missing the ‘smart-webcomponents-react’ file references. If no errors are thrown in the console, check if all JS and CSS files for the Smart.Grid are imported and present in their source folders. If you follow the example on the website you won’t have any issues loading the element. If you wish you can share your code or a link to a codepen to help you find the trouble.
Check out this topic for a complete guide on using the Smart.Grid with React.
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Hristofor]

Hi Hao Siong Ng,
the ProjectCategoryPage function seems to be working properly when loaded in a default React App:

import React from "react";
import ReactDOM from "react-dom";
import { Smart, Grid } from 'smart-webcomponents-react/grid';
const ProjectCategoryPage = () => {
	const dataSource = new Smart.DataAdapter({
		dataSource: [
			{
				EmployeeID: 1,
				FirstName: 'Nancy',
				LastName: 'Davolio',
				ReportsTo: 2,
				Country: 'USA',
				Title: 'Sales Representative',
				HireDate: '1992-05-01 00:00:00',
				BirthDate: '1948-12-08 00:00:00',
				City: 'Seattle',
				Address: '507 – 20th Ave. E.Apt. 2A',
			},
		],
		keyDataField: 'EmployeeID',
		parentDataField: 'ReportsTo',
		id: 'EmployeeID',
		dataFields: [
			'EmployeeID: number',
			'ReportsTo: number',
			'FirstName: string',
			'LastName: string',
			'Country: string',
			'City: string',
			'Address: string',
			'Title: string',
			'HireDate: date',
			'BirthDate: date',
		],
	});
	const columns = [
		{
			label: 'First Name',
			dataField: 'FirstName',
			width: 200,
		},
		{
			label: 'Last Name',
			dataField: 'LastName',
			width: 200,
		},
		{
			label: 'Reports To',
			dataField: 'ReportsTo',
			width: 200,
		},
	];
	return (
		//  <AppPage screen='administration.projectCategory'>
		<div className='col-12'>
			<Grid
				id='grid'
				dataSource={dataSource}
				columns={columns}
			/>
		</div>
    /* </AppPage>  */
   );
 };
class App extends React.Component {
	render() {
		return ProjectCategoryPage();
	}
}
ReactDOM.render(<App />, document.querySelector("#root"));
export default App;

Can you provide the code for the AppPage React component because the issue seems to be there ?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[admin]

Hi Hristofor, thank you so much for your reply.
I checked my package.json and I already have smart-webcomponents-react@7.7.2 installed.
I didn’t manage to get the CSS imported as shown in this example as it causes loader error.
AppPage is a common layout.

...
const AppPage = ({
  children, screen, notReady, routeParams,
}) => (
  <div className="app-page-container">
    <UserSessionModal />
    <LoadingBar className="loading-bar fixed-top" />
    <AppBar />
    <div className="app-page-body">
      <Sidebar screen={screen} routeParams={routeParams} />
      <div className="app-page-content">{ notReady || children }</div>
    </div>
    <div className="app-page-footer">
      <AppFooter />
    </div>
    <ModuleTracker screen={screen} />
  </div>
);
export default AppPage;

This is my App.jsx:

...
const App = () => (
  <Provider store={Store}>
    <ErrorGlobalPage>
      <ThemeProvider />
      <PersistGate
        persistor={reduxPersistor}
      >
        <Localization>
          <ToastContainer
            hideProgressBar
            position="bottom-right"
            draggable={false}
          />
          <Socket />
          <Routes />
        </Localization>
      </PersistGate>
    </ErrorGlobalPage>
  </Provider>
);
export default App;

This is my index.jsx

...
ReactDOM.render(
  <App />,
  document.getElementById('root'),
);

[Hristofor]

Hi Hao Siong Ng,
you need the import the CSS files in order to use the Smart.Grid. It should work out of the box if you are following the React tutorial. What is the error thrown when trying to import the styles?
Best Regards,
Christopher
Smart HTML Elements Team
https://www.htmlelements.com

[Author]

Posts