DevExtreme DataGrid External Save Click

Question

enter image description here

As you can see in Image I have one button CLick External Button CLick so when I press that click I want to send updated data which was on data grid. like when I click on table's save Button that time if I press that button so updated data will be send to the api But in External Button Click I didn't get updated data.

Here is my react.js code for better understanding.

/* eslint-disable no-unused-expressions */
/* eslint-disable no-prototype-builtins */
/* eslint-disable no-restricted-syntax */
import {
  Box, Button, Checkbox,
} from '@mui/material';
import React, {
  useCallback, useEffect, useRef, useState,
} from 'react';
import DataGrid, {
  Column, Editing, KeyboardNavigation, Lookup, Pager, Paging,
  RowDragging, Scrolling, Sorting,
} from 'devextreme-react/data-grid';
import { toast } from 'react-toastify';
import SelectBox from 'devextreme-react/select-box';
import { ApiGet, ApiPost } from '../../services/API/api';
import useStyles from './Style';
import { Endpoint } from '../../services/API/Endpoint';

const columnFormateArray = [
  {
    data: 'left',
  },
  {
    data: 'right',
  },
  {
    data: 'center',
  },
];
const displayTypeArray = [
  {
    data: 'n1',
  },
  {
    data: 'n2',
  },
  {
    data: 'n3',
  },
  {
    data: 'n4',
  },
];

const orderByArray = [
  {
    data: 'ASC',
  },
  {
    data: 'DESC',
  },
];

const colorArray = [
  {
    data: 'red',
    colors: 'red',
  },
  {
    data: 'cyan',
    colors: 'cyan',
  },
];
const backColorArray = [
  {
    data: 'red',
    colors: 'red',
  },
  {
    data: 'cyan',
    colors: 'cyan',
  },

];

const CreateReport = ({
  saveButtonClick, setApiCall, apiCall, selectedUsersCreate,
}) => {
  const dataGridRef = useRef(null);
  const classes = useStyles();

  const [tasks, setTasks] = useState([]);

  const [changeData, setChangeData] = useState([]);

  const createReports = async () => {
    if (saveButtonClick) {
      try {
        await ApiPost(`${Endpoint.CREATE_REPORT}`, displayTypeArray)
          .then(() => {
          });
        // eslint-disable-next-line no-empty
      } catch (error) {
      }
    }
  };

  useEffect(() => {
    createReports();
  }, [saveButtonClick]);

  const getReportTable = () => {
    ApiGet(`${Endpoint.GET_REPORT_USER_ROLE_CREATE_ALL_DATA}?id=${1}`)
      .then((res) => {
        setTasks(res?.data?.data);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  };

  useEffect(() => {
    getReportTable();
  }, []);

  const onReorder = useCallback(
    (e) => {
      const visibleRows = e.component.getVisibleRows();
      const newTasks = [...tasks];
      const toIndex = newTasks.findIndex(
        (item) => item.Rd_Id === visibleRows[e.toIndex].data.Rd_Id,
      );
      const fromIndex = newTasks.findIndex((item) => item.Rd_Id === e.itemData.Rd_Id);
      newTasks.splice(fromIndex, 1);
      newTasks.splice(toIndex, 0, e.itemData);
      setTasks(newTasks);
    },
    [tasks],
  );

  const cellRenderBold = ({ data }) => (
    <Checkbox
      checked={data.IsBold}
    />
  );

  const onFocusedCellChanging = (e) => {
    e.isHighlighted = true;
  };

  useEffect(() => {
    changeData && changeData?.forEach((update) => {
      const targetItem = tasks.find((item) => item.Rd_Id === update.key);
      if (targetItem && update.type === 'update') {
        for (const field in update.data) {
          if (targetItem.hasOwnProperty(field)) {
            targetItem[field] = update.data[field];
          }
        }
      }
    }, []);
  });

  const onSaving = useCallback((e) => {
    e.cancel = true;
    setChangeData(e.changes);
    setApiCall(true);
  }, []);

  useEffect(() => {
    if (apiCall) {
      const userId = selectedUsersCreate?.map((item) => item.report_id).join(', ');
      const body = {
        User_Ids: userId.toString(),
        Report_Roles: tasks,
      };

      ApiPost(`${Endpoint.POST_CREATE_UPDATE_REPORT_USER_ROLE}`, body)
        .then((res) => {
          setApiCall(false);
          if (res?.data?.message === 'Report roles apply successfully.') {
            toast.success('Report roles applied successfully.', {
              position: toast.POSITION.TOP_CENTER,
            });
          } else {
            toast.error('Data Not Found.', {
              position: toast.POSITION.TOP_CENTER,
            });
          }
        })
        .catch((error) => {
          console.error('Error while making API request:', error);
        });
    }
  }, [apiCall]);

  const renderColorCell = (colorName) => {
    const colorData = colorArray.find((item) => item.data === colorName);
    return (
      <div style={{
        backgroundColor: colorData?.data, width: '30px', height: '30px', borderRadius: '50%', margin: 'auto',
      }}
      >
        {/* {colorData?.data} */}
      </div>
    );
  };
  const renderColorCellBack = (colorName) => {
    const colorData = colorArray.find((item) => item.data === colorName);
    return (
      <div style={{
        backgroundColor: colorData?.data, width: '30px', height: '30px', borderRadius: '50%', margin: 'auto',
      }}
      >
        {/* {colorData?.data} */}
      </div>
    );
  };

  const statusEditorRender = (cell) => {
    const onValueChanged = (e) => cell.setValue(e.value);
    const itemRender = (data) => (
      <div style={{
        display: 'flex',
        flexDirection: 'row-reverse',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
      >
        <div style={{
          backgroundColor: data?.data, width: '50px', height: '30px',
        }}
        />
        <span className="middle">{data.data}</span>
      </div>
    );
    return (
      <SelectBox
        defaultValue={cell.value}
        {...cell.column.lookup}
        onValueChanged={onValueChanged}
        // inputAttr={statusLabel}
        itemRender={itemRender}
      />
    );
  };

  const statusEditorRenderBack = (cell) => {
    const onValueChanged = (e) => cell.setValue(e.value);
    const itemRender = (data) => (
      <div style={{
        display: 'flex',
        flexDirection: 'row-reverse',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
      >
        <div style={{
          backgroundColor: data?.data, width: '50px', height: '30px',
        }}
        />
        <span className="middle">{data.data}</span>
      </div>
    );
    return (
      <SelectBox
        defaultValue={cell.value}
        {...cell.column.lookup}
        onValueChanged={onValueChanged}
        // inputAttr={statusLabel}
        itemRender={itemRender}
      />
    );
  };

  const renderAddressHeader = (data) => (
    <div style={{
      fontWeight: '900', fontFamily: 'calibri', fontSize: '13px', color: '#fff',
    }}
    >
      {data}
    </div>
  );

  const handleDemo = () => {
    onSaving();
  };

  return (
    <Box>
      <Button
        sx={{
          background: 'linear-gradient(#018BED, rgb(34 108 163) 100%)',
          color: '#fff',
          textTransform: 'capitalize',
          marginRight: '10px',
          borderRadius: '6px',
          '&:hover': {
            backgroundColor: '#002D62',
          },
        }}
        onClick={handleDemo}
      >
        External Button Click
      </Button>
      <div style={{ display: 'flex' }}>
        <DataGrid
          className={classes.devStyle}
          dataSource={tasks}
          keyExpr="Rd_Id"
          showBorders
          onFocusedCellChanging={onFocusedCellChanging}
          allowColumnResizing
          allowColumnReordering
          columnAutoWidth
          onSaving={onSaving}
          showColumnLines
          ref={dataGridRef}
          height="100%"
          columnResizingMode="widget"
        >

          <RowDragging
            allowReordering
            onReorder={onReorder}
          />
          <Scrolling mode="virtual" />
          <Sorting mode="none" />
          <Paging defaultPageSize={50} />
          <Pager visible showPageSizeSelector showInfo showNavigationButtons />
          <KeyboardNavigation
            editOnKeyPress
            enterKeyAction="moveFocus"
            enterKeyDirection="row"
          />
          <Editing
            mode="batch"
            allowUpdating
            allowAdding
                // allowDeleting
            startEditAction="click"
            selectTextOnEditStart
          />

          <Column dataField="Display_Name" alignment="center" caption="Display Name" headerCellRender={() => renderAddressHeader('Display Name')} />
          {/* <Column dataField="Column_Format" caption="Column Format" width={140}/> */}
          <Column
            dataField="Column_Format"
            caption="Column Format"
            alignment="center"
            headerCellRender={() => renderAddressHeader('Column Format')}
          >
            <Lookup
              dataSource={displayTypeArray}
              valueExpr="data"
              displayExpr="data"
            />
          </Column>
          <Column dataField="Width" alignment="center" caption="Width" headerCellRender={() => renderAddressHeader('Width')} />
          <Column dataField="Alignment" alignment="center" headerCellRender={() => renderAddressHeader('Alignment')}>
            <Lookup
              dataSource={columnFormateArray}
              valueExpr="data"
              displayExpr="data"
            />
          </Column>
          <Column
            dataField="Fore_Colour"
            alignment="center"
            caption="Fore Colour"
            cellRender={(data) => renderColorCell(data.value)}
            editCellRender={statusEditorRender}
            headerCellRender={() => renderAddressHeader('Fore Colour')}
          >
            <Lookup
              dataSource={colorArray}
              valueExpr="data"
              displayExpr="data"
            />
          </Column>
          <Column
            dataField="Back_Colour"
            alignment="center"
            caption="Back Colour"
            cellRender={(data) => renderColorCellBack(data.value)}
            editCellRender={statusEditorRenderBack}
            headerCellRender={() => renderAddressHeader('Back Colour')}
          >
            <Lookup
              dataSource={backColorArray}
              valueExpr="data"
              displayExpr="data"
            />
          </Column>
          <Column dataField="IsBold" cellRender={cellRenderBold} headerCellRender={() => renderAddressHeader('Is Bold')} />
          <Column dataField="Short_No" alignment="center" caption="Short No" headerCellRender={() => renderAddressHeader('Short No')} />
          <Column dataField="Order_By" alignment="center" caption="Order By" headerCellRender={() => renderAddressHeader('Order By')}>
            <Lookup
              dataSource={orderByArray}
              valueExpr="data"
              displayExpr="data"
            />
          </Column>
        </DataGrid>
      </div>
    </Box>
  );
};

export default CreateReport;