data using functional state variable. Could you please provide a Kendo React Grid functional component (using useState, useEffect..) example?
Below is code i'm working on:
import React, { useEffect, useState } from "react";import { getAllFmsForms } from "../../apis/fmsFormApi";import { Grid, GridColumn } from "@progress/kendo-react-grid";import { process } from "@progress/kendo-data-query";import "@progress/kendo-theme-bootstrap/dist/all.css";const Forms = () => { const [formsList, setFormsList] = useState([]); const dataStateObj = { skip: 0, take: 20, sort: [{ field: "formNumber", dir: "desc" }], group: [{ field: "formNumber" }], }; useEffect(() => { const getAllForms = async () => { try { const response = await getAllFmsForms(); setFormsList(response); } catch (error) { console.log("error in getAllForms ===> ", error); }; getAllForms(); }, []); return ( <> <h3>List</h3> <Grid sortable filterable pageable={{ buttonCount: 4, pageSizes: true }} data={process(formsList,dataState)} ---> error onDataStateChange={(e) => {}} > <GridColumn field="formNumber" title="Form Number" /> <GridColumn field="formTitle" title="Form Title" /> <GridColumn field="revisionDate" title="Revision Date" /> <GridColumn field="formStatus" title="Form Status" /> <GridColumn field="responsibleOffice" title="Office" /> </Grid> </> );};export default Forms;
I've tried below way too:
const [dataState, setDataState] = useState({
dataResult: process(formsList, dataStateObj), ----> error with dataStateObj
dataState: dataStateObj,
});
1 Answer, 1 is accepted
Hello, Ravi,
Thank you for the code.
I assume that the issue occurs as we set the data directly to the response, which could be a promise, and we have to set it to a JSON:
useEffect(() => {
const getAllForms = async () => {
try {
const response = await getAllFmsForms();
setFormsList(response);Also, our latest sample application uses only hooks and has a Grid. The application can be used as a reference:
https://www.telerik.com/kendo-react-ui/components/sample-applications/react-coffee-warehouse-dashboard/
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.