jQWidgets Forums

jQuery UI Widgets Forums React How to trigger OnFilter with Typescript to Set State Value?

This topic contains 8 replies, has 4 voices, and was last updated by  svetoslav_borislavov 2 years, 6 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author

  • tdoll
    Participant

    I have written below onFilter function and the results in the console are correct. However, when setting the value for setRecordNum, the jqxGrid filtering stops working. If I comment out this (setRecordNum(myGrid.current!.getdisplayrows().length)), then the filtering works fine. So, how do I set a value based on results returned from jqxGrid and have it filter the results in the grid?

    code snippets:

    const onFilter = (): void => {

    if (myGrid.current?.getrows().length != undefined) {
    console.log(myGrid.current?.getrows().length);
    console.log(myGrid.current!.getdisplayrows().length);

    setRecordNum(myGrid.current!.getdisplayrows().length);
    }

    }

    <JqxGrid
    ref={myGrid}
    theme={‘bootstrap’}
    width={‘100%’}
    source={dataAdapter}
    columns={columns as any}
    filterable={true}
    showfilterrow={false}
    filtermode={‘excel’}
    enabletooltips={true}
    sortable={true}
    onFilter={onFilter}
    />


    Yavor Dashev
    Participant

    Hi tdoll,

    I have create a complete code example that showcases how to use the functionality of the getdisplayrows method.
    Code example:

    
    import * as React from 'react';
    import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
    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 =
            {
                datafields: [
                    { name: 'CompanyName', type: 'string', map: '0' },
                    { name: 'ContactName', type: 'string', map: '1' },
                    { name: 'Title', type: 'string', map: '2' },
                    { name: 'Address', type: 'string', map: '3' },
                    { name: 'City', type: 'string', map: '4' },
                    { name: 'Country', type: 'string', map: '5' }
                ],
                datatype: 'array',
                localdata: [
                    ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                    ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                    ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'],
                    ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'],
                    ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'],
                    ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'],
                    ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'],
                    ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C\/ Araquil, 67', 'Madrid', 'Spain'],
                    ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'],
                    ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'],
                    ['B

    s Beverages’, ‘Victoria Ashworth’, ‘Sales Representative’, ‘Fauntleroy Circus’, ‘London’, ‘UK’],
    [‘Cactus Comidas para llelet’, ‘Patricio Simpson’, ‘Sales Agent’, ‘Cerrito 333’, ‘Buenos Aires’, ‘Argentina’],
    [‘Centro comercial Moctezuma’, ‘Francisco Chang’, ‘Marketing Manager’, ‘Sierras de Granada 9993’, ‘Mxico D.F.’, ‘Mexico’],
    [‘Chop-suey Chinese’, ‘Yang Wang’, ‘Owner’, ‘Hauptstr. 29’, ‘Bern’, ‘Switzerland’],
    [‘Comrcio Mineiro’, ‘Pedro Afonso’, ‘Sales Associate’, ‘Av. dos Lusadas, 23’, ‘Sao Paulo’, ‘Brazil’],
    [‘Consolidated Holdings’, ‘Elizabeth Brown’, ‘Sales Representative’, ‘Berkeley Gardens 12 Brewery’, ‘London’, ‘UK’],
    [‘Drachenblut Delikatessen’, ‘Sven Ottlieb’, ‘Order Administrator’, ‘Walserweg 21’, ‘Aachen’, ‘Germany’],
    [‘Du monde entier’, ‘Janine Labrune’, ‘Owner’, ’67, rue des Cinquante Otages’, ‘Nantes’, ‘France’],
    [‘Eastern Connection’, ‘Ann Devon’, ‘Sales Agent’, ’35 King George’, ‘London’, ‘UK’],
    [‘Ernst Handel’, ‘Roland Mendel’, ‘Sales Manager’, ‘Kirchgasse 6’, ‘Graz’, ‘Austria’]
    ]
    };
    this.state = {
    columns: [
    { text: ‘Company Name’, datafield: ‘CompanyName’, width: 200 },
    { text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
    { text: ‘Contact Title’, datafield: ‘Title’, width: 100 },
    { text: ‘Address’, datafield: ‘Address’, width: 100 },
    { text: ‘City’, datafield: ‘City’, width: 100 },
    { text: ‘Country’, datafield: ‘Country’ }
    ],
    source: new jqx.dataAdapter(source)
    }

    }
    onFilter = (): void => {

    if (this.myGrid.current?.getrows().length != undefined) {
    console.log( this.myGrid.current!.getdisplayrows() );
    console.log( this.myGrid.current!.getdisplayrows().length );
    }
    }
    render() {
    return (
    <JqxGrid
    ref={this.myGrid}
    theme={‘bootstrap’}
    width={800}
    source={this.state.source}
    columns={this.state.columns}
    filterable={true}
    showfilterrow={false}
    filtermode={‘excel’}
    enabletooltips={true}
    sortable={true}
    onFilter={this.onFilter}
    />
    );
    }
    }
    export default App;`

    Let me know if that works for you!
    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com


    tdoll
    Participant

    Thanks for the example script! Below is an updated script using a FC and a hook. When the onFilter is triggered the recordNum is set, but the grid no longer functions properly (the filtering does not work) when the value is set. If you comment out setRecordNum, the grid works fine. I am using jqwidgets-scripts 12.0.0.

    import * as React from ‘react’;
    import { useState } from ‘react’;
    import { Card, Col, Container, Row } from ‘react-bootstrap’;
    import JqxGrid, { jqx } from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’;

    const Automation: React.FC<{}> = () => {

    const myGrid = React.createRef<JqxGrid>();

    const [recordNum, setRecordNum] = useState(0);

    const onFilter = (): void => {

    if (myGrid?.current != undefined && myGrid?.current != null) {
    console.log(myGrid!.current.getrows().length);
    console.log(myGrid!.current.getdisplayrows().length);

    setRecordNum(myGrid!.current.getrows().length);

    }

    }

    const source: any =
    {
    datafields: [
    { name: ‘CompanyName’, type: ‘string’, map: ‘0’ },
    { name: ‘ContactName’, type: ‘string’, map: ‘1’ },
    { name: ‘Title’, type: ‘string’, map: ‘2’ },
    { name: ‘Address’, type: ‘string’, map: ‘3’ },
    { name: ‘City’, type: ‘string’, map: ‘4’ },
    { name: ‘Country’, type: ‘string’, map: ‘5’ }
    ],
    datatype: ‘array’,
    localdata: [
    [‘Alfreds Futterkiste’, ‘Maria Anders’, ‘Sales Representative’, ‘Obere Str. 57’, ‘Berlin’, ‘Germany’],
    [‘Ana Trujillo Emparedados y helados’, ‘Ana Trujillo’, ‘Owner’, ‘Avda. de la Constitucin 2222’, ‘Mxico D.F.’, ‘Mexico’],
    [‘Antonio Moreno Taquera’, ‘Antonio Moreno’, ‘Owner’, ‘Mataderos 2312’, ‘Mxico D.F.’, ‘Mexico’],
    [‘Around the Horn’, ‘Thomas Hardy’, ‘Sales Representative’, ‘120 Hanover Sq.’, ‘London’, ‘UK’],
    [‘Berglunds snabbkp’, ‘Christina Berglund’, ‘Order Administrator’, ‘Berguvsvgen 8’, ‘Lule’, ‘Sweden’],
    [‘Blauer See Delikatessen’, ‘Hanna Moos’, ‘Sales Representative’, ‘Forsterstr. 57’, ‘Mannheim’, ‘Germany’],
    [‘Blondesddsl pre et fils’, ‘Frdrique Citeaux’, ‘Marketing Manager’, ’24, place Klber’, ‘Strasbourg’, ‘France’],
    [‘Blido Comidas preparadas’, ‘Martn Sommer’, ‘Owner’, ‘C\/ Araquil, 67’, ‘Madrid’, ‘Spain’],
    [‘Bon app’, ‘Laurence Lebihan’, ‘Owner’, ’12, rue des Bouchers’, ‘Marseille’, ‘France’],
    [‘Bottom-Dollar Markets’, ‘Elizabeth Lincoln’, ‘Accounting Manager’, ’23 Tsawassen Blvd.’, ‘Tsawassen’, ‘Canada’],
    [‘Bs Beverages’, ‘Victoria Ashworth’, ‘Sales Representative’, ‘Fauntleroy Circus’, ‘London’, ‘UK’], [‘Cactus Comidas para llelet’, ‘Patricio Simpson’, ‘Sales Agent’, ‘Cerrito 333’, ‘Buenos Aires’, ‘Argentina’], [‘Centro comercial Moctezuma’, ‘Francisco Chang’, ‘Marketing Manager’, ‘Sierras de Granada 9993’, ‘Mxico D.F.’, ‘Mexico’], [‘Chop-suey Chinese’, ‘Yang Wang’, ‘Owner’, ‘Hauptstr. 29’, ‘Bern’, ‘Switzerland’], [‘Comrcio Mineiro’, ‘Pedro Afonso’, ‘Sales Associate’, ‘Av. dos Lusadas, 23’, ‘Sao Paulo’, ‘Brazil’], [‘Consolidated Holdings’, ‘Elizabeth Brown’, ‘Sales Representative’, ‘Berkeley Gardens 12 Brewery’, ‘London’, ‘UK’], [‘Drachenblut Delikatessen’, ‘Sven Ottlieb’, ‘Order Administrator’, ‘Walserweg 21’, ‘Aachen’, ‘Germany’], [‘Du monde entier’, ‘Janine Labrune’, ‘Owner’, ’67, rue des Cinquante Otages’, ‘Nantes’, ‘France’], [‘Eastern Connection’, ‘Ann Devon’, ‘Sales Agent’, ’35 King George’, ‘London’, ‘UK’], [‘Ernst Handel’, ‘Roland Mendel’, ‘Sales Manager’, ‘Kirchgasse 6’, ‘Graz’, ‘Austria’]
    ],

    };

    const columns =
    [{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 200 },
    { text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
    { text: ‘Contact Title’, datafield: ‘Title’, width: 100 },
    { text: ‘Address’, datafield: ‘Address’, width: 100 },
    { text: ‘City’, datafield: ‘City’, width: 100 },
    { text: ‘Country’, datafield: ‘Country’ }];

    let dataAdapter = new jqx.dataAdapter(source);

    return (

    <div>

    <Container>

    <Row>
    <Col md=”12″>
    <Card>

    <Card.Header>
    <div className=”row”>

    <div className=”col-12″>
    <h3>Project List</h3>
    </div>

    </div>
    </Card.Header>
    <Card.Body>

    <JqxGrid
    ref={myGrid}
    theme={‘bootstrap’}
    width={‘100%’}
    source={dataAdapter}
    columns={columns as any}
    filterable={true}
    showfilterrow={false}
    filtermode={‘excel’}
    enabletooltips={true}
    sortable={true}
    onFilter={onFilter}
    />

    <div>Records: {recordNum}</div>

    </Card.Body>

    </Card>
    </Col>
    </Row>
    </Container>

    </div>

    );

    }

    export default Automation;


    Yavor Dashev
    Participant

    Hi tdoll,

    I have tested the jqxGrid with the settings from your reply and this is definitely a bug/issue and I will add a work item for this case and we will work on to fixing it as soon as we are able to.

    I’m using the v12.1.2 of jQWidgets and the problem is really coming from the state hook, because it clears the filter of the jqxGrid and I also would like to thank you for your cooperation as it helps us improve our products constantly!

    Please, do not hesitate to contact us if you have any additional questions.

    Best Regards,
    Yavor Dashev
    jQWidgets team
    https://www.jqwidgets.com


    tdoll
    Participant

    Thank you for the confirmation and looking forward to getting the bug fix for this!


    Corith
    Participant

    August 31, 2021 at 3:18 pm

    That was 16 months ago, and I’m running into the same problem with extracting the column sum to display elsewhere on a page (not just the footer).
    It happens with a function embedded in the aggregates call, the aggregatesrenderer call, and the onCellvaluechanged event.

    Echoing to the console works just fine, but when attempting to use a setState hook function, the grid begins to fail; in my case, it destroys any values stored in cells.

    I’m using the licensed version 15.0.0.

    onCellvaluechanged={() => {
                    var summaryData = costGrid.current?.getcolumnaggregateddata('Cost', ['sum']);
                    console.log(summaryData)
                    if (summaryData == undefined) {
                      summaryData = '0';
                  }
                    setTotalCost(summaryData); //clears table
                    console.log(summaryData);
                  }}

    Hi,

    May you please provide an example so we can work on it?

    We are happy to help you!

    Best regards,
    Svetoslav Borislavov

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


    Corith
    Participant
    
    onCellvaluechanged={() => {
                    var summaryData = costGrid.current?.getcolumnaggregateddata('Cost', ['sum']);
                    console.log(summaryData)
                    if (summaryData == undefined) {
                      summaryData = '0';
                  }
                    setTotalCost(summaryData); //clears table
                    console.log(summaryData);
                  }}
    

    Hi,

    I have just tried to reproduce the problem, but I could not.
    Please send a working demo here: support@jqwidgets.com

    Best regards,
    Svetoslav Borislavov

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.