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, 10 months ago.

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author

  • mrkhanakia
    Participant

    I have jqxgrid in Reactjs but when new data comes i update the datadapter using databind method which causing to show Header two times in Jqxgrid
    this.source.localdata = this.props.entriesList.slice()
    this.dataAdapter.dataBind()
    Jqxgrid

    
    import React, { Component } from "react";
    
    import JqxGrid from '../jqwidgets-react/react_jqxgrid.js';
    // import AccountHelper from '../../helpers/AccountHelper'
    
    class AccountGrid extends Component {
    	constructor(props) {
            super(props);
        }
    
    	static defaultProps = {
            entriesList : [],
            onDataUpdate: function() {},
            editItem: function(account_id){}
           
        }
    
        componentWillMount() {
            this.initDataAdapter()
            console.log(this.refs.jqxgrid)
        }
    
        componentDidUpdate() {
            this.source.localdata = this.props.entriesList.slice()
            this.dataAdapter.dataBind()
        }
    
        initDataAdapter() {
             var datafields = [
                { name: '_id', type: 'string' },
                { name: 'account_name', type: 'string' },
                { name: 'limit', type: 'number' },
                { name: 'status', type: 'boolean' },
                { name: 'hide', type: 'boolean' },
            ];
    
            this.source = {
                datatype: 'json',
                datafields: datafields,
    
                id: '_id',
                localdata: this.props.entriesList.slice(),
            };
    
            this.dataAdapter = new $.jqx.dataAdapter(this.source);
    
            this.columns = [
                { text: 'Id', datafield: '_id', width: 50 },
                { text: 'Name', datafield: 'account_name', width: 230 },
                { text: 'Limit', datafield: 'limit', width: 100 },
                { text: 'Status', datafield: 'status', width: 50, columntype: 'checkbox' },
                { text: 'Hide', datafield: 'hide', width: 50, columntype: 'checkbox' },
            ];
        }
    
        render() {
            return (
                <div>
             		<JqxGrid ref="jqxgrid" key1={Math.random()}
                       source={this.dataAdapter} columns={this.columns}
                        width={"100%"} height={400} pageable={true} pagermode={'simple'} pagesize={1000}
                        sortable={true} altrows={false} enabletooltips={true}
                        editable={false} 
                        filterable={true} showfilterrow={true} />
                </div>
            );
        }
    }
    
    export default AccountGrid;
    
    • This topic was modified 2 years, 7 months ago by  mrkhanakia.

    Peter Stoev
    Keymaster

    The picture does not match the settings or you’re missing javascript references. Filter Row is enabled in this code as well as filtering. None of these is shown on the image.

    Best Regards,
    Peter Stoev

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


    mrkhanakia
    Participant

    The picture matches the settings this is the issue I am talking about it shows double headers instead of Filter Row. When page loads.

    Check Video link i created https://screencast.com/t/bfmNXgo3o7a


    admin
    Keymaster

    We are unable to reproduce such behavior.


    mrkhanakia
    Participant

    The issue occurs when i try to databind in order load the updated data this.dataAdapter.dataBind()


    Ivo Zhulev
    Participant

    Hi mrkhanakia,

    I could not reproduce this behavior too. I see you use the dataAdapter with $. In our latest version, we use it without the $.
    So if you are not on the latest version of our product, please update and try with the following code below.

    This is the exact code I’ve used:

    import React from 'react';
    
    import JqxGrid from './assets/jqwidgets-react/react_jqxgrid.js';
    import { jqx } from './assets/jqwidgets-react/react_jqxgrid.js';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
        }
    
        static defaultProps = {
            entriesList: [
                { '_id': 1, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 2, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 3, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false }
            ],
            entriesList1: [
                { '_id': 4, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 5, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 6, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false }
            ],
            onDataUpdate: function () { },
            editItem: function (account_id) { }
        }
    
        componentWillMount() {
            this.initDataAdapter()
        }
    
        componentDidMount() {
            this.source.localdata = this.props.entriesList1;
            this.dataAdapter.dataBind();
        }
    
        initDataAdapter() {
            var datafields = [
                { name: '_id', type: 'string' },
                { name: 'account_name', type: 'string' },
                { name: 'limit', type: 'number' },
                { name: 'status', type: 'boolean' },
                { name: 'hide', type: 'boolean' },
            ];
    
            this.source = {
                datatype: 'json',
                datafields: datafields,
    
                id: '_id',
                localdata: this.props.entriesList
            };
    
            this.dataAdapter = new jqx.dataAdapter(this.source);
    
            this.columns = [
                { text: 'Id', datafield: '_id', width: 50 },
                { text: 'Name', datafield: 'account_name', width: 230 },
                { text: 'Limit', datafield: 'limit', width: 100 },
                { text: 'Status', datafield: 'status', width: 50, columntype: 'checkbox' },
                { text: 'Hide', datafield: 'hide', width: 50, columntype: 'checkbox' },
            ];
        }
    
        render() {
            return (
                <div>
                    <JqxGrid
                        source={this.dataAdapter} columns={this.columns}
                        width={"100%"} height={400} pageable={true} pagermode={'simple'} pagesize={1000}
                        sortable={true} altrows={false} enabletooltips={true}
                        editable={false}
                        filterable={true} showfilterrow={true}
                    />
                </div>
            );
        }
    }
    
    export default App;

    Best Regards,
    Ivo

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


    mrkhanakia
    Participant

    Hi Ivo,

    Issue is occurring when using databind method on componentDidUpdate check below code I just modified the example you provided.

    
    import React, { Component } from "react";
    
    import JqxGrid from '../jqwidgets-react/react_jqxgrid.js';
    import { jqx } from '../jqwidgets-react/react_jqxgrid.js';
    
    class App extends React.Component {
        constructor(props) {
            super(props);
    
            this.state = {
                count : 0
            }
        }
    
        static defaultProps = {
            entriesList: [
                { '_id': 1, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 2, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 3, 'account_name': 'AAA', 'limit': 1, 'status': true, 'hide': false }
            ],
            entriesList1: [
                { '_id': 4, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 5, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false },
                { '_id': 6, 'account_name': 'BBB', 'limit': 1, 'status': true, 'hide': false }
            ],
            onDataUpdate: function () { },
            editItem: function (account_id) { }
        }
    
        componentWillMount() {
            this.initDataAdapter()
        }
    
        componentDidMount() {
            this.setState({
                count: 1
            })
        }
    
        componentDidUpdate() {
            this.source.localdata = this.props.entriesList1;
            this.dataAdapter.dataBind();
        }
    
        initDataAdapter() {
            var datafields = [
                { name: '_id', type: 'string' },
                { name: 'account_name', type: 'string' },
                { name: 'limit', type: 'number' },
                { name: 'status', type: 'boolean' },
                { name: 'hide', type: 'boolean' },
            ];
    
            this.source = {
                datatype: 'json',
                datafields: datafields,
    
                id: '_id',
                localdata: this.props.entriesList
            };
    
            this.dataAdapter = new jqx.dataAdapter(this.source);
    
            this.columns = [
                { text: 'Id', datafield: '_id', width: 50 },
                { text: 'Name', datafield: 'account_name', width: 230 },
                { text: 'Limit', datafield: 'limit', width: 100 },
                { text: 'Status', datafield: 'status', width: 50, columntype: 'checkbox' },
                { text: 'Hide', datafield: 'hide', width: 50, columntype: 'checkbox' },
            ];
        }
    
        render() {
            return (
                <div>
                    <JqxGrid
                        source={this.dataAdapter} columns={this.columns}
                        width={"100%"} height={400} pageable={true} pagermode={'simple'} pagesize={1000}
                        sortable={true} altrows={false} enabletooltips={true}
                        editable={false}
                        filterable={true} showfilterrow={true}
                    />
                </div>
            );
        }
    }
    
    export default App;
    
    
    • This reply was modified 2 years, 7 months ago by  mrkhanakia.

    mrkhanakia
    Participant

    Hi,

    Any update on this. I also created an live working example of issue check here

    https://www.jseditor.io/?key=new-document-1-2-3-4-5-6-7-8-9

    Please help me to solve the issue it’s very urgent. My whole application is using Jqwidgets.

    Regards,


    Ivo Zhulev
    Participant

    Hi mrkhanakia,

    I cant access it. Did you share it to everyone?

    Best Regards,
    Ivo

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


    mrkhanakia
    Participant

    Hi Ivo,

    Check now i shared it to everyone https://www.jseditor.io/?key=new-document-1-2-3-4-5-6-7-8-9


    mrkhanakia
    Participant

    Any update ?


    Ivo Zhulev
    Participant

    Hi mrkhanakia,

    Use the updatebounddata method to update the grid:

    instead of:

    componentDidUpdate() {
        this.source.localdata = this.props.entriesList1;
        this.dataAdapter.dataBind();
    }

    use this:

    componentDidUpdate() {
        this.source.localdata = this.props.entriesList1;
        this.reference.updatebounddata('cells');
    }

    Best Regards,
    Ivo

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


    mrkhanakia
    Participant

    Hi Ivo,

    Your solution worked only if I pass some default Items with Props if I pass empty props then it does not works.
    Check this link please https://www.jseditor.io/?key=jqxgrid-header

    Regards,
    Aman


    mrkhanakia
    Participant

    Hi Ivo,

    Any update on the issue ?


    mrkhanakia
    Participant

    Have you checked the issue yet ?

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.