Smart UI Components & Libraries – Grid, Scheduler, Gantt, Kanban for Angular, React, Next.js, Vue, Blazor, JavaScript › Forums › Data Grid › Unable to load data into grid.

Tagged: , , , , , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 24, 2020 at 9:12 am #100989
    admin
    Keymaster

    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.

    August 24, 2020 at 9:16 am #100990
    admin
    Keymaster

    This is the screenshot of the grid
    Annotation-2020-08-24-171124

    August 24, 2020 at 9:33 am #100991
    admin
    Keymaster

    <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>

    August 24, 2020 at 9:35 am #100992
    Hristofor
    Member

    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

    August 24, 2020 at 10:08 am #100993
    Hristofor
    Member

    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

    August 24, 2020 at 3:10 pm #100997
    admin
    Keymaster

    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'),
);
    August 25, 2020 at 7:24 am #101003
    Hristofor
    Member

    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
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.