Functional Component example for KendoReactGrid

2 posts, 0 answers
  1. Ravi
    Ravi avatar
    10 posts
    Member since:
    Jun 2020

    Posted 15 Jun 2020 Link to this post

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

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 16 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top