Reactjs Jqxgrid has double header on calling databind method

[mrkhanakiaParticipant]

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()

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;

[Peter StoevKeymaster]

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/

[mrkhanakiaParticipant]

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

[adminKeymaster]

We are unable to reproduce such behavior.

[mrkhanakiaParticipant]

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

[Ivo ZhulevParticipant]

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/

[mrkhanakiaParticipant]

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;

[mrkhanakiaParticipant]

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 ZhulevParticipant]

Hi mrkhanakia,

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

Best Regards,
Ivo

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

[mrkhanakiaParticipant]

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

[mrkhanakiaParticipant]

Any update ?

[Ivo ZhulevParticipant]

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/

[mrkhanakiaParticipant]

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

[mrkhanakiaParticipant]

Hi Ivo,

Any update on the issue ?

[mrkhanakiaParticipant]

Have you checked the issue yet ?

[Author]

Posts