jQuery UI Widgets Forums Plugins Data Adapter Reactjs Jqxgrid has double header on calling databind method

Tagged: 

This topic contains 20 replies, has 6 voices, and was last updated by  humam 1 year, 5 months ago.

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author

  • Ivo Zhulev
    Participant

    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/


    mrkhanakia
    Participant

    Thanks i will try

    • This reply was modified 2 years, 1 month ago by  mrkhanakia.

    mrkhanakia
    Participant

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

    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/

    • This reply was modified 2 years, 1 month ago by  Ivo Zhulev.

    Rishabh
    Participant

    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.


    humam
    Participant

    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.

Viewing 6 posts - 16 through 21 (of 21 total)

You must be logged in to reply to this topic.