Print Page - DataGrid filter reset?

Title: DataGrid filter reset?
Post by: chrwei on July 10, 2020, 10:43:29 AM

I'm using React Router to have multiple pages. several pages have DataGrids with filters and different columns and datasets. If I add a filter on page, then go to a different page, I see no data even though there is nothing in the filters, and if I add something to the filters an onFilterChange event shows my new filter and also shows the filter from the previous page's datagrid.

What do i need to do make sure the filter only applies on a specific datagrid instance? I tried adding a unique value for the key prop but that had no effect.

this also affects multiple datagrids on the same page, type "a" into the first grid's col1 filter, then type "x" into the 2nd grid's col1 filter. you get no results, and the console shows the "a1" filter.

Code:

import React from 'react';
import './App.css';
import { DataGrid, GridColumn } from 'rc-easyui';

function App() {
    const dataA = [
        { a1:"a", b2:"A" },
        { a1:"b", b2:"B" },
        { a1:"c", b2:"C" },
    ];
    const dataB = [
        { b1:"x", b2:"X" },
        { b1:"y", b2:"Y" },
        { b1:"z", b2:"Z" },
    ];

    return (
        <div className="App">
                <DataGrid
                    filterable 
                    data={dataA} 
                    onFilterChange={filter => console.log("filter A", filter)}
                >
                    <GridColumn field="a1" title="Col1" width={110} />
                    <GridColumn field="a2" title="Col2" width={110} />
                </DataGrid>

                <DataGrid
                    filterable 
                    data={dataB} 
                    onFilterChange={filter => console.log("filter B", filter)}
                >
                    <GridColumn field="b1" title="Col1" width={110} />
                    <GridColumn field="b2" title="Col2" width={110} />
                </DataGrid>
        </div>
    );
}

export default App;

Title: Re: DataGrid filter reset?
Post by: Shatki on July 11, 2020, 03:42:34 PM

It seems to me that I have the same bug
My project was stoped, I am not found a solution
I have two dataGrid at different layers. First have filter. After apply filter, second dataGrid do not shows rows and data
I prepared test in my repository https://github.com/Shatki/dg-test

Title: Re: DataGrid filter reset?
Post by: jarry on July 12, 2020, 02:24:13 AM

Please set the 'filterRules' property for each DataGrid component.

Code:

<div className="App">
        <DataGrid
            filterable 
            filterRules={[]}
            data={dataA} 
            onFilterChange={filter => console.log("filter A", filter)}
        >
            <GridColumn field="a1" title="Col1" width={110} />
            <GridColumn field="a2" title="Col2" width={110} />
        </DataGrid>

        <DataGrid
            filterable 
            filterRules={[]}
            data={dataB} 
            onFilterChange={filter => console.log("filter B", filter)}
        >
            <GridColumn field="b1" title="Col1" width={110} />
            <GridColumn field="b2" title="Col2" width={110} />
        </DataGrid>
</div>

Title: Re: DataGrid filter reset?
Post by: Shatki on July 12, 2020, 02:55:11 PM

Yes!!!
Thanks.
This helped me perfectly!

Title: Re: DataGrid filter reset?
Post by: chrwei on July 13, 2020, 12:50:30 PM

that works for me as well. the documentation says this value is the default, so are the docs wrong?

EasyUI Forum

General Category => EasyUI for React => Topic started by: chrwei on July 10, 2020, 10:43:29 AM