cells rendering issue

[walker1234Participant]

I have a typescript file and having some issues ( I believe re-rendering) inside the cellsrenderer function as shown below:

` cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties): string => {

axios
.get(“api/personnels/”+value)
.then(response => {
this.setState({
createdByName: response.data.displayedValues
}, ()=> {
console.log(‘Inside axios response after setting the state to the name of the project creater’)
})
}).catch(err => console.log(err));

return this.state.createdByName;

}`

When my code runs, I keep seeing the console.log('Inside axios response after setting the state to the name of the project creater') in console for many times even though I have only 30 records to display in total. The browser freezes at some point and I have to close it forcefully. It’s happening only because of an API call that I am making inside cellsrenderer function shown above. If I just do the following, everything works fine:

` cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties): string => {

return value;

}`

What issue is with the API call inside cellsrenderer function which is causing the browser to freeze?

In chrome I am seeing the following:

And then it throws in the browser net::ERR_INSUFFICIENT_RESOURCES related error:

    GET https://myserver.com/api/personnels/12345 net::ERR_INSUFFICIENT_RESOURCES
    dispatchXhrRequest @ xhr.js:160
    xhrAdapter @ xhr.js:11
    dispatchRequest @ dispatchRequest.js:59
    Promise.then (async)
    request @ Axios.js:51
    Axios.<computed> @ Axios.js:61
    wrap @ bind.js:9
    cellsrenderer @ Projects.tsx:261
    _rendercell @ jqxgrid.js:8
    _rendervisualcell @ jqxgrid.js:8
    _rendervisualrows @ jqxgrid.js:8
    l @ jqxgrid.js:8
    _renderrows @ jqxgrid.js:8
    rendergridcontent @ jqxgrid.js:8
    _render @ jqxgrid.js:8
    dataview.update @ jqxgrid.js:8
    q @ jqxgrid.js:8
    l @ jqxgrid.js:8
    callDownloadComplete @ jqxdata.js:8
    success @ jqxdata.js:8
    bw @ jqxcore.js:8
    fireWith @ jqxcore.js:8
    S @ jqxdata.js:8
    H @ jqxdata.js:8
    Projects.tsx:269 Error: Network Error
        at createError (createError.js:16:15)
        at XMLHttpRequest.handleError (xhr.js:69:14)

Here is my complete code:

`import * as React from ‘react’;
import * as ReactDOM from ‘react-dom’;
import {FormikApp} from ‘./forms/AddProjectForm’
import JqxGrid, {IGridProps, jqx} from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’
import {RouteComponentProps} from ‘react-router-dom’
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.material.css’
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.arctic.css’
import {Dialog} from “primereact/dialog”;
import {Button} from “primereact/button”;
import {properties} from “../properties”;
import {Card} from “primereact/card”;
import axios from “axios”;
import {Messages} from “primereact/messages”;
import _ from ‘lodash’

export interface IState extends IGridProps {
projects: [],
selectedProject: [],
createdByName :string,
addDialogVisible: boolean,
blazerId: string,
username: string,
selectedRowIndex: number,
deleteDialogVisible: boolean
}

class Projects extends React.PureComponent<RouteComponentProps<{}>, IState> {
private baseUrl = properties.baseUrlWs
private myGrid = React.createRef<JqxGrid>()
private messages = React.createRef<Messages>()

private editrow: number = -1;

constructor(props: RouteComponentProps) {
super(props);

this.selectionInfo = this.selectionInfo.bind(this)

this.gridOnSort = this.gridOnSort.bind(this);

const columns: IGridProps[‘columns’] = [
{ text: ‘Project Name’, datafield: ‘name’, width: 390 },
{ text: ‘Project Description’, datafield: ‘description’, width: 390 },
{ text: ‘Owner Assigned’, datafield: ‘institutionId’, width: 180,hidden:true },
{ text: ‘Created By’, datafield: ‘createdBy’,

cellsrenderer: (row, columnfield, value, defaulthtml, columnproperties): string => {

axios
.get(“api/personnels/”+value)
.then(response => {

this.setState({
createdByName: response.data.displayedValues
}, ()=> {
console.log(‘Inside axios response after setting the state to the name of the project creater’)
})
}).catch(err => console.log(err));

return this.state.createdByName;

}

}

]

const source:any = {
dataFields: [
{ name: ‘id’, type: ‘long’},
{ name: ‘name’, type: ‘string’ },
{ name: ‘description’, type: ‘string’ },
{ name: ‘url’, type: ‘string’},
{ name: ‘irbProtocol’, type: ‘string’},
{ name: ‘institutionId’, type: ‘long’ },
{ name: ‘projectType’, type: ‘string’ },
{ name: ‘priority’, type: ‘string’},
{ name: ‘researchDataSetType’, type: ‘string’},
{ name: ‘statusIndicatorId’, type: ‘long’},
{ name: ‘createdBy’, type: ‘string’ }
],
dataType: ‘json’,
root: ‘projects’,
sortColumn: ‘name’,
sortdirection: ‘asc’,
url: this.baseUrl + ‘api/projects/search/getProjectsById’,
data: {
value: ”
}
}

const dataAdapter:any = new jqx.dataAdapter(source,
{
autoBind: true,
downloadComplete: (data:any, status:any, xhr:any):void => {
// if (!source.totalrecords) {
source.totalrecords = parseInt(data[‘page’].totalElements);
// }
},
formatData: (data:any):any => {

data.page = data.pagenum
data.size = data.pagesize
if (data.sortdatafield && data.sortorder) {
data.sort = data.sortdatafield + ‘,’ + data.sortorder;
}
return data;
},
loadError (xhr, status, error) {
throw new Error(‘Error occurred in getting Projects for user ‘ + error.toString());
}
}
);

this.state = {
projects: [],
selectedProject: [],
createdByName : ”,
blazerId: ”,
username: ”,
addDialogVisible: false,
selectedRowIndex: null,
deleteDialogVisible: false,
columns: columns,
rendergridrows: (params: any): any[] => {
const data = params.data
return data;
},
source: dataAdapter,

};
}

setValueProperty = (data:any):any => {
if (this.state && this.state.blazerId) {
data.value = this.state.blazerId
}
}

private gridOnSort(event: any): void {
const sortinformation = event.args.sortinformation;
let sortdirection = sortinformation.sortdirection.ascending ? ‘ascending’ : ‘descending’;
if (!sortinformation.sortdirection.ascending && !sortinformation.sortdirection.descending) {
sortdirection = ‘null’;
}
this.myGrid.current.updatebounddata(‘sort’)
};

selectionInfo = (event: any): void => {
const selection = this.myGrid.current.getrowdata(event.args.rowindex)

this.setState({
selectedProject: selection
}, () => {
console.log(‘pushing ‘ + this.state.selectedProject)
this.props.history.push({
pathname: ‘/project’,
state: {
project: this.state.selectedProject,
blazerId: this.state.blazerId
}
})
});
}

componentDidMount() {
console.log(‘In Projects.componentDidMount….’ + sessionStorage.getItem(‘loggedInUser’))
if (sessionStorage.getItem(‘loggedInUser’) != null) {
const loggedInUser = JSON.parse(sessionStorage.getItem(‘loggedInUser’) as string)
this.setState({ employeeId: loggedInUser.employeeId})
}
}

render() {

const defaultView = this.state.addDialogVisible ? null : (this.state.employeeId && !_.isEmpty(this.state.employeeId)) ? (
<div style={{width: ‘100%’, margin: ‘0 auto’, display: ‘table’}}>
<JqxGrid
// @ts-ignore
ref={this.myGrid}
theme={‘arctic’}
altrows={true}
width=”100%”
autoheight={true}
source={this.state.source}
columns={this.state.columns}
pageable={true}
sortable={true}
onSort={this.gridOnSort}
pagesize={20}
virtualmode={true}
rendergridrows={this.state.rendergridrows}
showtoolbar={true}
rendertoolbar={this.state.rendertoolbar}
columnsresize={true}/>
</div>
) : null

return (
<div className=”project-page-main”>
<Messages ref={this.messages} style={{width: ‘100%’, margin: ‘auto’ }}/>
<div className=”content”>

{defaultView}

</div>
</div>
);
}
}
export default Projects;`

[MartinParticipant]

Hello walker1234,

The issue is coming from the fact that you are trying to make an asynchronous call and state update inside the cellsrenderer callback which is not async and it can not support it.
I would suggest you make the necessary API calls before that, outside the grid callbacks, and then refresh the grid when the state has been updated.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts