Reactjs Jqxgrid has double header on calling databind method

[Ivo ZhulevParticipant]

Hi mrkhanakia,

Try this:

componentDidUpdate() {
    //True if props is empty
    const flag = this.source.localdata.length === 0;
                
    this.source.localdata = this.props.entriesList1;
    this.refs.jqxgrid.updatebounddata('cells');
                    
    if(flag) {
        const headers = document.querySelectorAll('.jqx-grid-column-header');
        const lastHeader = headers[headers.length -1];
        lastHeader.parentElement.remove();
    }
}

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[mrkhanakiaParticipant]

Thanks i will try

[mrkhanakiaParticipant]

Hi Ivo,

Your solution worked but partially. Sometimes when my component updates multiple time then it removes all the Column Header Titles.

So is there any other way to find out how many parentelements exists if there is only One parementelement then do not remove.

[Ivo ZhulevParticipant]

Hi mrkhanakia,

You can check if the parentElement has any previousElementSibling or nextElementSibling, or get the parent of the parentElement and check its children.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

[RishabhParticipant]

Hi lvo,

I am also facing the same issue(multi headers are created) even on updatebounddata(‘cells’).
Due to this all operations on table header are not working. Kindly update on this. Thanks.

[humamParticipant]

The Solution Ivo provided didn’t work for me as there can be more than one header generating. But I extended his solution to make it work for me.

 componentDidUpdate (prevProps) {
     if (prevProps !== this.props) {          
       this.source.localdata = this.props.dashboardScoreResult;
       this.refs.jqxgrid.updatebounddata('cells');                
       const headers = document.querySelectorAll('.jqx-grid-header');
       for( let i = 0; i < headers[0].childNodes.length - 1; i++){
         const header = headers[0].childNodes[i];
         header.remove();
       }
       this.setState({dashboardScores: this.props.dashboardScoreResult})
     }
}

TLDR: To explain what I’m doing. I took out the flag which doesn’t save much perfomance here. Second I saw that instead of deleting the last node we have to delete all the nodes except for the last one. Because If you play around in inspector in your browser you would see that header elements like sorting only works on the last node. ..

Shoutout!! to @mrKhanakla for finding the bug!! I could have never thought on my own that there are more than one.

[Author]

Posts