HTML Elements Forums Data Grid Unable to load data into grid.

This topic contains 6 replies, has 2 voices, and was last updated by Avatar Hristofor 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #100989
    Avatar
    Hao Siong Ng
    Participant

    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.

    #100990
    Avatar
    Hao Siong Ng
    Participant

    This is the screenshot of the grid

    Annotation-2020-08-24-171124

    #100991
    Avatar
    Hao Siong Ng
    Participant

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

    #100992
    Avatar
    Hristofor
    Participant

    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

    #100993
    Avatar
    Hristofor
    Participant

    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

    #100997
    Avatar
    Hao Siong Ng
    Participant

    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'),
    );
    
    #101003
    Avatar
    Hristofor
    Participant

    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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.