1. Feedback
  2. React
  3. 37517

Welcome to the React feedback portal. We’re happy you’re here! If you have feedback on how to improve the React, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

delete and add data in grid Table

Hi i build a Table that get dataSource from Json server and have this three options : add ,delete , edit

i have two problem :

first editing griddata is work well but when i use delete or add data the table is not update and i should refresh the browser for see changes.

it means i have problem for refreshing table when data has change .

twice : pages size not working , my pageSize is 5 but all my datas show in one page

this is my Grid component Code:


```

import React, { useState, useEffect } from "react";
import {
    GridComponent,
    ColumnDirective,
    ColumnsDirective,
    Page,
    Inject,
    Edit,
    Toolbar,
} from "@syncfusion/ej2-react-grids";
import { getOrders, addOrder, updateOrder, deleteOrder } from "../orderService";
import { Refeesgrid } from "../../data/dummy";

const Referees = () => {

    const editOptions = {
        allowEditing: true,
        allowAdding: true,
        allowDeleting: true
    };
    const toolbarOptions = [
        "Add",
        "Edit",
        "Delete",
        "Update",
        "Cancel"
    ];

    const [data, setData] = useState();
    useEffect(() => {
        console.log("Effect");
        refreshGrid();
    }, []);

    function refreshGrid() {
        console.log("Refreshing");
        getOrders()
            .then(
                data => {
                    setData(data);
                }
            );
    }
    function dataSourceChanged(state) {
        if (state.action === "add") {
            console.log("add");
            addOrder(state.data).then((res) => refreshGrid());
        }
        else if (state.action === "edit") {
            console.log("edit");
            updateOrder(state.data).then((res) => refreshGrid());
        } else if (state.requestType === "delete") {
            deleteOrder(state.data[0].id).then((res) => refreshGrid());
            console.log("delete" + state.data[0].id);
        }
    }


    return (
        <div style={{ margin: "10%", marginTop: "5%" }}>
            <GridComponent
                dataSource={data}
                pageSettings={{ pageSize: 5 }}
                allowPaging
                editSettings={editOptions}
                toolbar={toolbarOptions}
                dataSourceChanged={dataSourceChanged}
            >
                <ColumnsDirective>

                    {Refeesgrid.map((item, index) => <ColumnDirective key={index} {...item} />)}
                </ColumnsDirective>
                <Inject services={[Page, Edit, Toolbar]} />
            </GridComponent>
        </div>
    );
};

export default Referees;


```

and this is my order service:

```

import axios from "axios";

export { };
const baseUrl = "http://localhost:8000";
// get

export function getOrders() {
  return fetch(baseUrl + "/Customers")
    .then((res) => res.json())
    .then((data) => {
      return {
        count: data.length,
        result: data
      };
    });
}


// add
export function addOrder(order) {

  return axios.post('http://localhost:8000/Customers/',
        order
      )
      .then(response =>{
        console.log(response.data);
        return response.data.put} )
      .catch(error => {
        // console.log("jump errpr");
          console.error('There was an error!', error.response.data);
      });
}
// }

// update
export function updateOrder(order) {
 
    console.log(order.id);
    return axios.put('http://localhost:8000/Customers/'+order.id, order)
    .then(response =>{
      console.log(response.data);
      return response.data.updatedAt} )
    .catch(error => {
      // console.log("jump errpr");
        console.error('There was an error!', error.response.data);
    });
  }

// delete
export function deleteOrder(primaryKey) {
  return axios.delete('http://localhost:8000/Customers/'+primaryKey)
  .then(data =>{return data})
  .catch(error => {
    // console.log("jump errpr");
      console.error('There was an error!', error.response.data);
  });
  // return fetch(baseUrl + "/Customers/" + primaryKey, {
  //   method: "delete"
  // })
  //   .then(data => {
  //     return data;
  //   });
}


```

display grid:

Empty