Reactjs Jqxgrid has double header on calling filter change

[sonuParticipant]

I am using jqxgrid for loading the data into grid. I have a dropdown list where all columns are mention and with the help of checkbox i will show the column information into grid. so when i click on multiple checkbox the data is display correct but when i add new coloumn and apply filter on it and then add a new coloumn to display again. so the header comes twice .

import React, { Component } from 'react';
import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css';
import 'jqwidgets-framework/jqwidgets/jqx-all';
import JqxGrid, { jqx } from '../assets/jqwidgets-react/react_jqxgrid';
import JqxDropDownList from '../assets/jqwidgets-react/react_jqxdropdownlist.js';
import statusDoc from '../config/status';
import AlertPopupGrid from '../pages/components/AlertPopupGrid';
import DisplayLabel from '../pages/components/DisplayLabel';
import Moment from 'moment';
import '../css/custom_grid.css';

export class Jqgrid extends Component {

    constructor(props) {
        super(props);
        let letcheck = this;
       
        //console.log(process.env.REACT_APP_SOLVUP_API);
        let source =
            {
                datafields:
                    [
                        { name: 'id', type: 'number' },
                        { name: 'last_name', type: 'string' },
                        { name: 'store', type: 'string' },
                        { name: 'item_descriptor', type: 'string' },
                        { name: 'repairer_name', type: 'string' },
                        { name: 'product_brand', type: 'html' },
                        { name: 'is_floor_stock', type: 'bool' },
                        { name: 'days', type: 'number' },
                        { name: 'created', type: 'date' },
                        { name: 'updated', type: 'date' },
                        { name: 'repairer_status', type: 'string' },
                        { name: 'is_extended_warranty', type: 'bool' },
                        { name: 'is_floor_stock', type: 'bool' },
                        { name: 'is_inhome', type: 'number' },
                        { name: 'is_sandbox_mode', type: 'number' },
                        { name: 'callcentre', type: 'number' },
                        { name: 'retailer', type: 'string' },
                        { name: 'phone', type: 'string' },
                        { name: 'product_serial_number', type: 'string' },
                        { name: 'replacement_serial_number', type: 'string' },
                        { name: 'unique_product_identification', type: 'string' },
                        { name: 'repairer_reference_number', type: 'string' },
                        { name: 'model_no', type: 'string' },
                        { name: 'product_id', type: 'number' }
                    ],
                datatype: 'json',
                data: {
                    params: this.props.params,
                },
                //pagenum:1,
                pagesize: 20,
                type: 'post',
                //gotopage:2,
                root: 'Rows',
                cache: false,
                url: process.env.REACT_APP_SOLVUP_API,
                sort: function () {
                    // update the grid and send a request to the server.
                    //this is remove because in binding we update the data
                    //letcheck.refs.myGrid.updatebounddata('sort');
                },
                filter: function () {
                    // update the grid and send a request to the server.
                    letcheck.refs.myGrid.updatebounddata('filter');
                },
                beforeprocessing: function (data) {
                    //console.log(data[0].TotalRows);
                    if (data != null && data.length > 0) {
                        source.totalrecords = data[0].TotalRows;
                    }
                },
                pager: function (pagenum, pagesize, oldpagenum) {
                    //letcheck.refs.myGrid.updatebounddata('data');
                    // callback called when a page or page size is changed.
                },
                sortcolumn: 'id',
                sortdirection: 'desc'
            };
        
        this.state = {
            dataDetails: [],
            editrow: -1,
            totalNoRecord: 0,
            params: props.params,
            source: source,
            repairerStatus: this.props.params.repairer_status_arr,//statusDoc[this.props.params.selectFilter]['status_name'],
            productBrands: [],//statusDoc[this.props.params.selectFilter]['brand_name']
            repairerObj: [],// statusDoc[this.props.params.selectFilter]['rep_obj']
            msgError: '',
            isloading: true,
            choosenFilters:[]
        };

        //console.log("constructor "+JSON.stringify(source));

    }

    componentDidMount() {

        this.refs.myGrid.on('filter', (event) => {
            document.body.classList.add('reactloader');
            let filterGroups = this.refs.myGrid.getfilterinformation();
            //var info = "";
            var items = [];
            for (var i = 0; i < filterGroups.length; i++) {
                var filterGroup = filterGroups[i];
                
                //info += "Filter Column: " + filterGroup.filtercolumn;
                var filters = filterGroup.filter.getfilters();
                for (var j = 0; j < filters.length; j++) {

                    let valueData = filters[j].value;
                    if(filterGroup.filtercolumn === "created" || filterGroup.filtercolumn === "updated")
                    {
                        valueData = Moment(filters[j].value).format("YYYY-MM-DD");
                        
                    }

                    items.push({"key":filterGroup.filtercolumntext,"value":valueData.toString()}); 
                    
                    // info += "\nFilter: ";
                    // info += "\nValue: " + filters[j].value;
                    // info += "\nCondition: " + filters[j].condition;
                    // info += "\nOperator: " + filters[j].operator;
                    // info += "\n";
            
                }
            }
            
            this.setState({choosenFilters:items});
            
            //console.log(info);
            
        });

        this.refs.myGrid.on('pagechanged', (event) => {
            document.body.classList.add('reactloader');
        });

        this.refs.myGrid.on('isBindingCompleted', (event) => {
            
        });

        this.refs.myGrid.on('sort', (event) => {
            document.body.classList.add('reactloader');
            this.refs.myGrid.updatebounddata('data');
        });

        this.refs.myDropDownList.on('checkChange', (event) => {
            if (event.args) {
                let item = event.args.item;
                if (item) {
                    
                    this.refs.myGrid.beginupdate();
                    if (event.args.checked) {
                        this.refs.myGrid.showcolumn(item.value);
                    } else {
                        
                        this.refs.myGrid.hidecolumn(item.value);
                    }
                    this.refs.myGrid.endupdate();
                }
            }
        });
        //console.log("load is complete");
    }

    componentWillReceiveProps(nextProps) {
        let temp = this.state.source;
        temp.data = {
            params: nextProps.params,
        }
        temp.url = process.env.REACT_APP_SOLVUP_API;
        this.setState({
            source: temp,
            msgError: '',
            repairerStatus: nextProps.params.repairer_status_arr
        });
        this.refs.myGrid.setcolumnproperty('repairer_status', 'filteritems', nextProps.params.repairer_status_arr);
        // this.refs.myGrid.setcolumnproperty('product_brand', 'filteritems', statusDoc[nextProps.params.selectFilter]['brand_name']);
        this.refs.myGrid.updatebounddata('data');
        this.refs.myGrid.gotopage(0);
    }

    loadDataAdapter() {
        let currentComponent = this;
        return new jqx.dataAdapter(currentComponent.state.source, {
            formatData: function (data) { },
            beforeprocessing: function (data) {
                
            },
            loadComplete: function (data) {

            },
            downloadComplete: function (data, status, xhr) {
                document.body.classList.remove('reactloader');
            },
            loadError: function (xhr, status, error) {

                //msgError += xhr.responseText;
                this.setState({ msgError: xhr.responseText });
                document.body.classList.remove('reactloader');
                //console.log(xhr.responseText);
            }.bind(this)

        });
        
    }

    capitaliseFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    /**
     * 
     * @param {handlerPopupClick} event 
     * This function is called when the popup appear of failure
     */
    handlerPopupClick(event) {

        //let eventData = 'Event: ' + this.capitaliseFirstLetter(event.type);
        if (event.type === 'moved') {
            //eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
        }
        let temp = this.state.source;
        if (event.type === 'close') {
           //eventData += ', Dialog result: ';
            if (event.args.dialogResult.OK) {
                //window.location.reload(); 
                //eventData += 'OK';
                document.body.classList.add('reactloader');
                temp.data = {
                    params: this.props.params,
                }
                temp.url = process.env.REACT_APP_SOLVUP_API;
                this.setState({
                    source: temp,
                    msgError: ''
                });
                //console.log(eventData);
                this.refs.myGrid.setcolumnproperty('repairer_status', 'filteritems', statusDoc[this.props.params.selectFilter]['rep_obj']);
                this.refs.myGrid.setcolumnproperty('product_brand', 'filteritems', statusDoc[this.props.params.selectFilter]['brand_name']);
                this.refs.myGrid.updatebounddata('data');
                this.refs.myGrid.gotopage(0);
            } else if (event.args.dialogResult.Cancel) {
                //eventData += 'Cancel';
                //window.location.reload();
            } else {
                //eventData += 'None';
            }
            
        }
    }

    render() {

        let repairerSource =
            {
                datatype: 'array',
                datafields: [
                    { name: 'label', type: 'string' },
                    { name: 'value', type: 'string' }
                ],
                localdata: this.state.repairerStatus
            };

        //let letcheck = this;
        let currentComponent = this;
        let dataAdapter = this.loadDataAdapter();

        var rendergridrows = function () {
            return dataAdapter.records;
        }

        let columns =
            [
                { text: 'Id', columntype: 'textbox', width: '100', cellsalign: 'center', datafield: 'id' },
                { text: 'Customer', columntype: 'textbox', datafield: 'last_name', cellsalign: 'center', hidden: false },
                { text: 'Store', columntype: 'textbox', datafield: 'store', cellsalign: 'center', hidden: false },
                { text: 'Product', datafield: 'item_descriptor', cellsalign: 'center', hidden: false },
                {
                    text: 'Brand',columntype: 'textbox', width: '100', datafield: 'product_brand', cellsalign: 'center', hidden: false
                },
                { text: 'Repairer Name', columntype: 'textbox', datafield: 'repairer_name', cellsalign: 'center', hidden: false },
                {
                    text: 'Age', width: '100', datafield: 'days', filtertype: 'number', cellsalign: 'center', cellsrenderer: function (row, column, value) {
                        return '<div class="jqx-grid-cell-middle-align">' + value + ' days</div>';
                    }
                },
                {
                    text: 'Status', datafield: 'repairer_status', filtertype: 'checkedlist', filteritems: new jqx.dataAdapter(repairerSource), cellsalign: 'center',

                    createfilterwidget: (column, htmlElement, editor) => {
                        editor.jqxDropDownList({ displayMember: 'label', valueMember: 'value' });
                    }
                },
                { text: 'Created', filtertype: 'date', datafield: 'created', cellsformat: 'yyyy-MM-dd', cellsalign: 'center',hidden: true },
                { text: 'Updated', filtertype: 'date', datafield: 'updated', cellsformat: 'yyyy-MM-dd', cellsalign: 'center',hidden: true },
                
                { text: 'Extended Warranty', datafield: 'is_extended_warranty', filterable: false, hidden: true },
                { text: 'Floor Stock', datafield: 'is_floor_stock', filterable: false, hidden: true },
                { text: 'In Home', datafield: 'is_inhome', filterable: false, hidden: true },
                { text: 'SandBox Mode', datafield: 'is_sandbox_mode', filterable: false, hidden: true },
                { text: 'Callcentre', datafield: 'callcentre', filterable: false, hidden: true },
                
                { text: 'Retailer', datafield: 'retailer', hidden: true },
                { text: 'Phone', datafield: 'phone', hidden: true },
                { text: 'Replacement Serial No.', datafield: 'replacement_serial_number', hidden: true },
                { text: 'Unique Product Identification', datafield: 'unique_product_identification', hidden: true },
                { text: 'Product Serial No.', datafield: 'product_serial_number', hidden: true },
                { text: 'Repaierer Reference No.', datafield: 'repairer_reference_number', hidden: true },
                { text: 'Model No.', datafield: 'model_no', hidden: true },
                { text: 'Product Id', datafield: 'product_id', hidden: true },

                {
                    text: 'Action',width:'80px', datafield: 'Edit', sortable: false, filterable: false, showfilterrow: false, columntype: 'button', cellsrenderer: function (row) {

                        let dataRecord = currentComponent.refs.myGrid.getrowdata(row);
                        if (typeof dataRecord !== 'undefined') {
                            return "<i class='fa fa-eye' '> </i> <a href='/requests/view/" + dataRecord.id + "?type=newatstore&offset=1'><span class='link'> View</span> </a>";
                        }
                        //console.log(dataRecord);
                    }
                }
            ];

        var theme = 'light';
        let getLocalization = () => {
            let localizationobj = {};
            localizationobj.filterselectstring = "Please Choose:";
            //localizationobj.emptydatastring = "Custom Mesh";
            if (currentComponent.state.msgError) {

                localizationobj.emptydatastring = this.state.msgError;
            }
            //console.log(localizationobj);

            return localizationobj;
        }

        let listBoxSource =
        [
            { label: 'Id', value: 'id', checked: true }, 
            { label: 'Customer', value: 'last_name', checked: true },
            { label: 'Store', value: 'store', checked: true }, 
            { label: 'Product Description', value: 'item_descriptor', checked: true },
            { label: 'Brand', value: 'product_brand', checked: true },

            { label: 'Repairer Name', value: 'repairer_name', checked: true }, 
            { label: 'Age', value: 'days', checked: true },
            { label: 'Status', value: 'repairer_status', checked: true },
            { label: 'Created', value: 'created', checked: false }, 
            { label: 'Updated', value: 'updated', checked: false },
            { label: 'Extended Warranty', value: 'is_extended_warranty', checked: false },

            { label: 'Floor Stock', value: 'is_floor_stock', checked: false }, 
            { label: 'In Home', value: 'is_inhome', checked: false },
            { label: 'Sandbox Mode', value: 'is_sandbox_mode', checked: false }, 
            { label: 'Callcentre', value: 'callcentre', checked: false },
            { label: 'Retailer', value: 'retailer', checked: false },
            { label: 'Phone', value: 'phone', checked: false }, 
            { label: 'Replacement Serial No', value: 'replacement_serial_number', checked: false },
            { label: 'Unique Product Identification', value: 'unique_product_identification', checked: false }, 
            { label: 'Product Serial No', value: 'product_serial_number', checked: false },
            { label: 'Repairer Reference No', value: 'repairer_reference_number', checked: false },
            { label: 'Replacement Serial No', value: 'replacement_serial_number', checked: false },
            { label: 'Model No', value: 'model_no', checked: false }, 
            { label: 'Product Id', value: 'product_id', checked: false }
        ];

        return (
            <div>
                
                {(this.state.msgError) ? <AlertPopupGrid handlerPopupClick={this.handlerPopupClick.bind(this)} /> : ''}

                { (this.state.choosenFilters.length > 0) ? <DisplayLabel filters={this.state.choosenFilters} /> : '' }

            <div className="dropMenu">
                <JqxDropDownList ref='myDropDownList' 
                    width={200} height={25} source={listBoxSource} checkboxes={true}
                /> 
            </div>

                <JqxGrid
                    ref='myGrid'
                    altrows={true}
                    className='myGrid'
                    width='1106'
                    autoheight={true}
                    sortable={true}
                    source={dataAdapter}
                    filterable={true}
                    columns={columns}
                    showfilterrow={true}
                    showsortmenuitems={false}
                    localization={getLocalization()}
                    theme={theme}
                    pageable={true}
                    virtualmode={true}
                    rendergridrows={rendergridrows}
                    autoloadstate={true}
                    autosavestate={true}
                    sorttogglestates={1}
                    autoshowloadelement={false}
                    columnsresize={true}
                    autorowheight={true}
                />
            </div>
        )
    }
}

so the issue is related to databinding. when i debug into my code and check when i select the dropdown and applying the filter on it so the function componentDidMount is called and under this filter method have setState property where i’m setting the filter value to some array to display the selected filter value to the user. when i comment the setState under filter method so the code is running fine but with the setstate the header comes twice so please help me on this. i have tried to set the updatedatabound as well but didn’t work for me.

[sonuParticipant]

Please check the link .

https://streamable.com/6tiwz

[sonuParticipant]

Please help me on this. if anyone have a solution.

[sonuParticipant]

Please help me on this. i have to solve this urgently.

[MartinParticipant]

Hello imsonujangra,

I have managed to reproduce the issue.
You are right that it happens when you execute setState in the filter handler.
I have tried to find some workaround for this, but unfortunately it was unsuccessful for the moment.
If we find any solution for this we will update you.

Best Regards,
Martin

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

[sonuParticipant]

Hi Martin.

I have face the problem when set up the variable using setState . so for now if we don’t have a solution around it so what you suggest me for should i use plain jquery library for that.

[MartinParticipant]

Hello imsonujangra,

Yes, since we are not able to provide you with a workaround, this would be a solution.
The issue is coming from the usage of setState inside the filter event handler.
Please, note that there is an update of ReactJS components coming on our Roadmap.

Best Regards,
Martin

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

[Author]

Posts