Functional Component example for KendoReactGrid

[Ravi]

Hi, I'm currently working on react functional component using Kendo React Grid. But, Couldn't process (using process from kendo-data-query)

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

[Stefan]

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

If the issue still occurs, please share with me the value of `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