Filteritem is not refreshed for coloumn in react

[sonuParticipant]

I have a dropdown box based on this i have to refresh jqxgrid and add filteritems in coloumns. But for first time when i choose the dropdown filteritems are rendered perfectly but when i change dropdown value then data is not change. It show the old data but it should be the new data. and when i apply shorting the grid header will hide the filter row . please help i tried with both thing updatedatabound with data and cells but won’t me. please help me on this.

export class Jqgrid extends Component {
    constructor(props) {
        super(props);
        let letcheck = this;
        let stringified = queryString.stringify(this.props.params, { arrayFormat: 'bracket' });
        let source =
        {
            datafields:
            [
                { name: 'id', type: 'number' },
                { name: 'last_name', type: 'string' },
                { name: 'item_descriptor', type: 'string' },
                { name: 'product_brand', type: 'html' },
                { name: 'is_floor_stock', type: 'bool' },
                { name: 'created', type: 'number' },
                { name: 'repairer_status', type: 'string' }
            ],
            datatype: 'json',
            root: 'Rows',
            cache: false,
            url:'http://eucalyptus-api.localhost.com/v1/requests/records?'+stringified,
            sort: function () {
                letcheck.refs.myGrid.updatebounddata('sort');
            },
            filter: function () {
                letcheck.refs.myGrid.updatebounddata('filter');
            },
            beforeprocessing: function (data) {
                //console.log(data[0].TotalRows);
                if (data != null)
                {
                    source.totalrecords = data[0].TotalRows;
                }
            },
            pager: function (pagenum, pagesize, oldpagenum) {
                letcheck.refs.myGrid.updatebounddata('data');
            },
        };
        //console.log("props :"+JSON.stringify(source));
        this.state = {
            dataDetails: [],
            editrow: -1,
            totalNoRecord: 0,
            params: props.params,
            source:source,
            repairerStatus:statusDoc[this.props.params.selectFilter]['status_name']
        };
        
    }

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

     componentWillReceiveProps(nextProps) {
        this.setState({ repairerStatus: statusDoc[nextProps.params.selectFilter]['status_name'] });
        let stringified = queryString.stringify(nextProps.params, { arrayFormat: 'bracket' });
        let temp = this.state.source;

            temp.url = 'http://myapi-url.localhost.com/v1/requests/records?'+stringified;
            //console.log("componentWillReceiveProps "+JSON.stringify(temp));
            this.setState({
                source: temp
            });
            
            this.refs.myGrid.updatebounddata('data');
            this.refs.myGrid.gotopage(0);
            //console.log("componentWillReceiveProps "+JSON.stringify(temp));
         //this.setState({ params: nextProps.params });  
       }

    render() {
        
        //let letcheck = this;
        let currentComponent = this;
        let dataAdapter = new jqx.dataAdapter(currentComponent.state.source);

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

        let columns =
            [
                { text: 'Id', columntype: 'textbox', cellsalign: 'center', align: 'center', datafield: 'id', filterable: false },
                { text: 'Customer', columntype: 'textbox', datafield: 'last_name', cellsalign: 'center', align: 'center' },
                { text: 'Product', datafield: 'item_descriptor', height: '45', cellsformat: 'F2', cellsalign: 'center', align: 'center' },
                {
                    text: 'Brand', datafield: 'product_brand', filtertype: 'checkedlist', cellsalign: 'center', align: 'center', height: '100'
                },
                {
                    text: 'Age', datafield: 'created', filtertype: 'number', cellsalign: 'center', align: '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:currentComponent.state.repairerStatus, cellsalign: 'center', align: 'center' },
                {
                    text: 'Action', datafield: 'Edit', filterable: false, showfilterrow: false, cellsalign: 'center', align: 'center', columntype: 'button', width: 75, cellsrenderer: function () {
                        return "View";
                    }, buttonclick: function (row) {
                        currentComponent.setState({
                            editrow: row
                        });
                        let dataRecord = currentComponent.refs.myGrid.getrowdata(currentComponent.state.editrow);
                        alert(dataRecord.id);
                        // open the popup window when the user clicks a button.
                    }
                }

            ];
        var theme = 'light';
        let getLocalization = () => {
            let localizationobj = {};
            localizationobj.filterselectstring = "Please Choose:";
            return localizationobj;
        }
        return (
            <div>  
                <JqxGrid 
                    ref='myGrid'
                    altrows={true}
                    className='myGrid'
                    width='100%'
                    autoheight={true}
                    sortable={true}
                    source={dataAdapter}
                    filterable={true}
                    columns={columns}
                    showfilterrow={true}
                    selectionmode={'multiplecellsextended'}
                    showsortmenuitems={false}
                    localization={getLocalization()}
                    theme={theme}
                    pageable={true}
                    virtualmode={true}
                    rendergridrows={rendergridrows}
                    autoloadstate={true} 
                    autosavestate={true}
                />
                {/* <JqxButton ref='Button' width={125} height={25} value='Remove Filter' style={{ marginTop: 10 }} /> */}
            </div>
        )
    }
}

[HristoParticipant]

Hello imsonujangra,

I saw in your code something that you try to add extra variables to the URL.
I would like to suggest you look at this tutorial, it could be helpful:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm?search=grid
The data property of the source and the formatData callback of the DataAdapter are more important for this case.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts