filter row is not refreshed and paging also not reset.

[sonuParticipant]

I am using react with jqxgrid and i have a dropdown based on that dropdown i have call a child component and the child component have jqxgrid. this child component need to reload everytime when i change the dropdown. so i have few problem.

1. Onchange dropdown is change and jqxgrid is re-render but the filter row is not refreshing.
2. On choosing one option to dropdown and select the 2nd page then change the option show by default second page is selected but onchange i want to start from pagenum = 0.
3. Sometime issue with updatebound header coloumn comes twice on filter row.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Leftmenu from '../include/leftmenu';
import { FormControl } from 'react-bootstrap';
import 'react-datepicker/dist/react-datepicker.css';
import { Jqgrid } from './jqgrid';
import '../css/custom_grid.css';
import statusDoc from '../config/status';

export default class AdvancedSearch extends Component {

    constructor() {
        super();
        this.state = {
            retailer_id: [12],
            store_id: [903],
            is_sandbox_on: [0],
            status: [],
            // pagenum: 0,
            // pagesize: 10,
            dataDetails: [],
            selectFilter: [],
            isFilterChange: false,
            letmedebug: 0,
        };
        this.handleClickDropdown = this.handleClickDropdown.bind(this);

    }

    handleClickDropdown(event) {
        //console.log(event.target.value);
        this.setState({ isFilterChange: true });
        this.setState({ status: statusDoc[event.target.value]['status'] });
        this.setState({ selectFilter: [event.target.value] });
    }

    render() {

        const dropdownStyle = {
            marginTop: '25px',
            marginRight: '-20px',
            width: '250px'
        };

        const buttonStyle = {
            marginTop: '25px',
            marginRight: '-20px',
            width: '120px'
        };
        const buttonRightStyle = {
            marginTop: '30px',
            float: 'right',
            marginLeft: '-120px',
            width: '90px'
        };

        const quickFilter = [
            { label: 'Closed Repaired', value: 'closedrepaired' },
            { label: 'Closed Other', value: 'closedother' },
            { label: 'Pending Credit', value: 'pendingcredit' },
            { label: 'Quoted', value: 'quoted' },
            { label: 'Closed External Handling', value: 'closedexternalhandling' },
            { label: '> 25 days', value: 'greater_than_25_days' },
            { label: 'In Store Awaiting Assessment', value: 'instoreawaitingassessment' },
        ];

        return (

            <section className="body-content-section">
                <div className="container">
                    <div className="row content-section">

                        <Leftmenu />

                        <div className="col-lg-12 col-md-12 col-sm-12 main-content-section">

                            <div className="row">
                                <div className="row">

                                    <div className="col-md-4 col-xs-12 form-group" style={dropdownStyle}>
                                        <FormControl componentClass="select" placeholder="select" onChange={this.handleClickDropdown} value={this.state.value}>
                                            <option value="select">Select filter</option>
                                            {quickFilter.map((e, key) => {
                                                return <option key={key} value={e.value}>{e.label}</option>;
                                            })}
                                        </FormControl>
                                    </div>
                                    {/* <span> { this.state.selectFilter}</span> */}

                                    <div className="col-md-2 col-xs-12 form-group" style={buttonStyle}>
                                        <button type="submit" className="btn btn-default search-btn">Save</button>
                                    </div>

                                    <div className="col-md-2 col-xs-12 form-group" style={buttonStyle}>
                                        <button type="submit" className="btn btn-default search-btn">Save As</button>
                                    </div>

                                    <div className="col-md-2 col-xs-12 form-group" style={buttonRightStyle}>
                                        <img alt="download" className="img-space" src="/images/download-to-storage-drive.png" />
                                        <img src="/images/columns-v.png" alt="coloumn" />
                                    </div>

                                </div>

                                <hr />
                            </div>

                            <div className="row" >
                                {this.state.isFilterChange ? <Jqgrid params={this.state} /> : <div>No Record Found</div>}
                            </div>
                            <br />

                        </div>

                        <div className="search-loading-img"></div>

                    </div>
                </div>
            </section>

        );
    }
}
ReactDOM.render(<AdvancedSearch />, document.getElementById('root'));

child component :

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';
const queryString = require('query-string');

export class Jqgrid extends Component {

    constructor(props) {
        super(props);
        let letcheck = this;
        let stringified = queryString.stringify(this.props.params, { arrayFormat: 'bracket' });
        //console.log("stringified "+stringified);
        let source =
        {
            //localdata: this.generatedata(500),
            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: 'status', type: 'number' }
            ],
            datatype: 'json',
            pagenum:0,
            pagesize: 10,
            root: 'Rows',
            cache: false,
            url:'http://my-api.localhost.com/v1/requests/records?'+stringified,
            sort: function () {
                // update the grid and send a request to the server.
                letcheck.refs.myGrid.updatebounddata('sort');
            },
            filter: function () {
                // update the grid and send a request to the server.
                letcheck.refs.myGrid.updatebounddata('filter');
                //letcheck.refs.myGrid.updatebounddata('data');
                //letcheck.refs.myGrid.updatebounddata('refreshfilterrow');
            },
            beforeprocessing: function (data) {
                //console.log(data[0].TotalRows);
                source.totalrecords = data[0].TotalRows;

            },
            pager: function (pagenum, pagesize, oldpagenum) {
                //letcheck.refs.myGrid.updatebounddata('');
                letcheck.refs.myGrid.updatebounddata('data');
                // callback called when a page or page size is changed.
            },
        };

        //console.log("props :"+JSON.stringify(source));
        this.state = {
            dataDetails: [],
            editrow: -1,
            totalNoRecord: 0,
            params: props.params,
            source:source
        };
        //console.log("constructor "+source);
        
        
    }

     componentWillReceiveProps(nextProps) {
        
        //console.log("componentWillReceiveProps "+nextProps.params.selectFilter);
        let stringified = queryString.stringify(nextProps.params, { arrayFormat: 'bracket' });
        //console.log("props :"+stringified);
        let temp = this.state.source;

            temp.url = 'http://my-api.localhost.com/v1/requests/records?'+stringified;
            //temp.localdata = this.generatedata(500);
            temp.recordstartindex = 0;
            temp.recordendindex = 10;
            temp.pagenum = 0;
            temp.pagesize = 0;
            temp.gotopage = 0;
            //console.log("Newdata " +temp.pagesize);
            this.setState({
                source: temp
            });
            
            this.refs.myGrid.updatebounddata('data');
         //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);
            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: 'status', filtertype: 'checkedlist', 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;
        }
        //console.log(columns);
        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}

                />
                {/* <div className="newRow">
                    <strong>Total Number of Cases : </strong>
                </div> */}
                {/* <JqxButton ref='Button' width={125} height={25} value='Remove Filter' style={{ marginTop: 10 }} /> */}
            </div>
        )
    }
}

can you please help me on this..

Thanks,

[HristoParticipant]

Hello imsonujangra,

Could you clarify your issue?
Is there any error message in the console?
You could try to clear a little bit your code. The right approach is to implement the specific argument for a concrete case for example about the filter callback use only letcheck.refs.myGrid.updatebounddata('filter'); and so on.
If you want to save some filtering value you should use updatebounddata with argument filter.
Also, it is possible if you refresh the Grid you could add filter value after that with addfilter method.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[sonuParticipant]

Hi Hristo,

I resolved my issues .

1. Onchange dropdown is change and jqxgrid is re-render but the filter row is not refreshing : In this issue when the data is change the grid is update but not the filter row. so i just set the property under componentWillReceiveProps.so it works fine for me.

this.refs.myGrid.setcolumnproperty(‘product_brand’,’filteritems’,statusDoc[nextProps.params.selectFilter][‘brand_name’]);

2. This issue is resetting the gotopage. : this.refs.myGrid.gotopage(0);

3. Header comes twice when i change the paging : It is fix with pagechanged event need to refresh the updatebounddata.

Now these things are working. thanks Hristo for replying.

Now there is some another problem .

1. I have filter row where is brand and status dropdown have a big list of item and when i select unchecked on option it will send the all data to the api and api fail due to request url is too long. so how can i make a custom list of filter to be sent to server. like if i unchecked one branch can i pass the selected brand with comma seperated string so this way api is not exceed with too long. how can i do this can you help me on this.

[HristoParticipant]

Hello imsonujangra,

You could try to use the beforeSend callback of the jqxDataAdapter and to override the data that you will send to the server.
Which is a similar to the beforeSend of when making an AJAX.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts