Grid not sorting or filtering (no state change)

[Nick Wood]

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>
    );
}

[Stefan]

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