Grid not sorting or filtering (no state change)

1 Answer 12 Views
Grid
Nick Wood
Top achievements
Rank 1
Nick Wood asked on 02 May 2021, 11:26 PM

Hi All

I am using the below functional component.

It triggers the function setGridState1 when any sort, filter, etc changes are made but the rows do no actually change in the grid.

Is there something simple that I could be missing here


const ReferralListSeg: React.FC<ReferralListSecProps> = (props: ReferralListSecProps) => {
    const [referrals, setReferrals] = React.useState<Referral[]>([]);
    const [gridState, setGridState] = React.useState({ filter: null, group: null, skip: 0, sort: null, take: 100, editField: undefined });

    const setGridState1 = (e) => {
        const { filter, group, skip, sort, take } = e.dataState;
        const newState = { filter, group, skip, sort, take, editField: undefined };
        setGridState(newState);
    }

    const totalRecords = (): number => {
        return referrals.length;
    }

    React.useEffect(() => {
        axios.get(apiAppendCode(apiURL('/ClientReferralsOpen/' + props.clientid)))
            .then((response) => {
                setReferrals(response.data);
            }, (error) => {
                debugger;
            });
    }, []);

    React.useEffect(() => {
    }, [gridState, setGridState]);

    return (
        <div className="container-fluid">
            {referrals &&
                <Grid
                    filterable={true}
                    sortable={true}
                    resizable={true}
                    pageable={true}
                    data={referrals}
                    total={totalRecords()}
                    {...gridState}
                    onDataStateChange={setGridState1}
                >
                    <Column sortable={true} field="createdon" title="Created" width="150px" cell={KendoGridDateCell} />
                    <Column field="name" title="Name" width="250px" />
                    <Column field="status" title="Status" cell={KendoGridRefStatusCell} />
                    <Column filterable={false} cell={KendoGridNavRefCell} width="180px" />
                </Grid>
            }
        </div>
    );
}

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 03 May 2021, 07:02 AM

Hello, Nick,

Thank you for the code.

This is expected as the developer has to programmatically process the data based on the new state. In the provided example the Grid always takes the same data from referrals:

                <Grid
                    filterable={true}
                    sortable={true}
                    resizable={true}
                    pageable={true}
                    data={referrals}
I can suggest checking the following articles for more details:

https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations/

Notice how we progress the data based on the new state, to return the sorted, filtered, etc version of the data:

    <Grid
        data={process(products, this.state.dataState)}

 

Regards,
Stefan
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Tags
Grid
Asked by
Nick Wood
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or