jQuery UI Widgets Forums React cells rendering issue

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 6 months, 1 week ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • cells rendering issue #121429

    walker1234
    Participant

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

    cells rendering issue #121451

    Martin
    Participant

    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

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

You must be logged in to reply to this topic.