Onunmount clear grid data

[ganeshParticipant]

Hi there,
I want grid content clear when I move on to another page in react I written in

public componentWillUnmount() {
    let grid= this.refs.myGrid as jqxGrid;
    grid.clear();
  }

but not working which method need to use to clear grid.
Thanks
Ganesh

[MartinParticipant]

Hello Ganesh,

Please, look at the following example of how to refer the JqxGrid component and invoke its clear method:

import * as React from 'react';

import JqxGrid, { IGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid';

class App extends React.PureComponent<{}, IGridProps> {
    
    private myGrid = React.createRef<JqxGrid>();

    constructor(props: {}) {
        super(props);

        const source: any = {
            datatype: 'array',
            localdata: this.generateData()
        };
        this.state = {
            columns: [
                { datafield: 'firstname', text: 'First Name', width: 100 },
                { cellsalign: 'right', datafield: 'quantity', text: 'Quantity', width: 80 },
                { cellsalign: 'right', cellsformat: 'c2', datafield: 'price', text: 'Unit Price', width: 90 },
                { cellsalign: 'right', cellsformat: 'c2', datafield: 'total', text: 'Total', width: 120 },
                { cellsalign: 'right', cellsformat: 'c2', datafield: 'total2', text: 'Total 2', width: 120 },
                { cellsalign: 'right', cellsformat: 'c2', datafield: 'total3', text: 'Total 3', width: 120 }
            ],
            source: new jqx.dataAdapter(source)
        }
    }

    public componentDidMount() {
        this.myGrid.current!.clear();
    }

    public render() {
        return (
            <div>
                <JqxGrid ref={this.myGrid}
                    width={663} columns={this.state.columns} source={this.state.source} />
            </div>
        );
    }

    private generateData() {
        const data = new Array();
        const firstNames = [
            "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];

        const productNames = [
            "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];
        const priceValues = [
            "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];
        for (let i = 0; i < 10; i++) {
            const row: any = {};
            const productindex = Math.floor(Math.random() * productNames.length);
            const price = parseFloat(priceValues[productindex]);
            const quantity = 1 + Math.round(Math.random() * 10);

            /* tslint:disable:no-string-literal */

            row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
            row["price"] = price;
            row["quantity"] = quantity;
            row["total"] = price * quantity;
            row["total2"] = price * quantity;
            row["total3"] = price * quantity;
            data[i] = row;
        }

        return data;
    }
}
export default App;

Best Regards,
Martin

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

[Author]

Posts