Batch mode editing and updating the data in hierarchy grid.

6 Replies
2 Participants

Created by
KJ kapil jain

Platform
React - EJ 2

Platform
React - EJ 2

Control
Grid

Created On
Aug 21, 2023 01:41 PM UTC

Last Activity On
Sep 8, 2023 12:21 PM UTC

Want to subscribe?
SIGN IN

Hi Team,
I am using a free license as my company is having 3 employees as per your policy.
I am facing an issue to update the hierarchy grid with a single click. currently, I am able to edit and update only the parent grid but the child and second value remains the same after modifying.
Client needs only one button to update and another button to cancel. It will be inline editing

Need your help.Thanks in advance.

Below is the code and Json file.

import React, { useState,useEffect } from 'react';

import DataGrid from '../Common/SyncfusionComponents/DataGrid';

import { GridComponent, ColumnsDirective, ColumnDirective ,Inject, DetailRow, Page, Sort,Toolbar,Filter,Edit} from '@syncfusion/ej2-react-grids';

import { style } from '@mui/system';

import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';

import {BackhualOrdersData} from './BackhualOrdersData';

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

import axios from "axios";

const BackhualOrders = (props) => {

// style for save button

const saveButtonStyles = {

width: '100px',

margin: '10px',

height: '35px',

borderRadius: '7px',

color: 'darkgreen',

background: 'white',

fontSize: 'large',

fontWeight: 'bold',

borderColor: 'greenyellow',

borderStyle: 'solid',

borderWidth: '2px'

};

const [editedData, setEditedData] = useState([]);

const [dropdownList, setDropdownList] = useState([]); // used to fromlocation and tolocation autocomplete dropdown componenet

const [isError, SetIsError] = useState("");

const getLocation = async () => {

try {

const response = await axios.get("/BackhaulPOUpload/GetLocations");

const options = response.data.map(item => ({

value: item.loc_Numb,

label: item.loc_Numb,

}));

setDropdownList(options);

} catch (error) {

SetIsError(error.message);

}

};

useEffect(() => {

getLocation();

}, []);

const FromLocEditor = (props) => {

return (

<DropDownListComponent

dataSource={dropdownList}

fields={{ text: 'text', value: 'value' }}

value={props.value}

change={e => {

props.onChange(e.value); // Notify the Grid about the data change

}}

);

};

const [orderData, setOrderData] = useState();

const [ortecorderData, setOrtecorderData] = useState();

const [purchaseOrderData, setPurchaseOrderData] = useState();

const pageSettings = { pageSize: 10 }; // Pagination settings

//search toolbar

//const toolbarOptions = ['Search','Edit','Delete','Update','Cancel'];

const toolbarOptions = ['Search','Update','Cancel'];

const editSettings = {allowEditing:true,allowAdding:false,allowDeleting:true,newRowPosition:'Top', mode:'Batch'};

const validationRule = {required:true} // to Validate field.

//console.log("BackhualOrdersData[0].result",BackhualOrdersData[0].result.orderList);

///console.log("orderData::",props.OrtecOrderData);

//console.log("ortecorderDetailsData::",props.OrtecOrderDetails_);

// console.log("purchaseOrderData::",props.purchaseOrderData);

const secondChildGrid ={

dataSource: props.purchaseOrderData,

allowPaging: true,

allowResizing:true ,

autoFit:true,

// pageSettings: { pageSize: 5, pageCount: 5 },

// toolbar:toolbarOptions,

editSettings:editSettings,

columns: [

{ headerText: 'Purchase Order', textAlign: 'Left', columns: [

{ field: 'id', headerText: 'ID', textAlign: 'Right', width:'50'},

{ field: 'purchaseOrderNumber', headerText: 'purchaseOrderNumber',validationRules:{validationRule}},

{ field: 'pickupNumber', headerText: 'pickupNumber' },

{ field: 'appointmentTime', headerText: 'appointmentTime' },

{ field: 'temperature', headerText: 'temperature', textAlign: 'Right' },

{ field: 'weight', headerText: 'weight'},

{ field: 'orderedBy', headerText: 'orderedBy'},

]}

// mapping value of parentKeyFieldValue from the parent row data in the child grid load event.

load() {

const str = 'purchaseOrderID'; // purchaseOrderID is the foreign key present in parent grid

this.parentDetails.parentKeyFieldValue =

this.parentDetails.parentRowData[str];

queryString: 'id',// id is the Primary key present in child grid

};

const childGrid ={

dataSource: props.OrtecOrderDetails_,

allowPaging: true,

allowResizing:true ,

autoFit:true,

// pageSettings: { pageSize: 5, pageCount: 5 },

// toolbar:toolbarOptions,

editSettings:editSettings,

columns: [

{ headerText: 'Ortec Orders Details', textAlign: 'Left', columns: [

{ field: 'id', headerText: 'ID', width:'50' },

{ field: 'units', headerText: 'units',width:'110'},

{ field: 'trayType', headerText: 'trayType',width:'110' },

{ field: 'trays', headerText: 'trays' ,width:'110'},

{ field: 'stacks', headerText: 'stacks', width:'110'},

{ field: 'routingCube', headerText: 'routingCube' ,width:'150', editType:'numericedit'},

{ field: 'actualCube', headerText: 'actualCube',width:'150'},

{ field: 'traysPerStack', headerText: 'traysPerStack' ,width:'150'},

{ field: 'ortecOrderId', headerText: 'ortecOrderId',width:'150' },

{ field: 'purchaseOrderID', headerText: 'purchaseOrderID',width:'150'},

{ field: 'tripTicketNumber', headerText: 'tripTicketNumber',width:'150'},

{ field: 'ortecOrder', headerText: 'ortecOrder' ,width:'150'},

]}

load() {

const str = 'id';

this.parentDetails.parentKeyFieldValue =

this.parentDetails.parentRowData[str];

queryString: 'ortecOrderId',

childGrid: secondChildGrid

};

const handleSave = () => {

// Access the editedData from the state and perform desired actions

//console.log('Edited Data:', editedData);

});

const handleActionComplete = (args) => {

// console.log("capture data:",args);

debugger;

// Step 2: Update the edited data state with the changes

if (args.requestType === 'batchsave') {

const updatedRecords = args.rows;

};

return (

Save

</button>

<GridComponent dataSource={props.OrtecOrderData} childGrid={childGrid} allowSorting={true} allowResizing={true}

autoFit={true} toolbar={toolbarOptions} editSettings={editSettings} actionComplete={handleActionComplete}>

{/* <ColumnDirective field='deliveryDate' headerText='deliveryDate' width='180'

editType='datepicker' edit={datepickerTemplate}

/> */}

{/* editType='dropdownedit' is used to get the dropdown list */}

</ColumnsDirective>

</GridComponent>

</div>

);

};

export default BackhualOrders;

===========================JSON=============

{

"invokeMayRunArbitraryCode": true,

"result": {

"pdfContent": {

"poNumber": "G076200132435",

"vendor": " PURATOS CORPORATION 3235 16th AVENUE SW Seattle,WA 98134 ",

"vendorID": 3803,

"buyer": " Johanna Rock",

"buyerEmail": "[email protected]",

"shipto": "901 N Elmer Ave Sayre, PA 18840 US",

"shiptoID": null,

"racks": null,

"subtotal": 10944,

"_PoLineItems": [

{

"vendorItem": "4014450",

"uom": "lb",

"quantity": 7600,

"price": 1.44,

"itemSubTotal": 10944,

"dueDate": "2022-07-06T00:00:00"

}

"tax": 0,

"poTotal": 10944

"orderList": [

{

"id": 2405114,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 3803,

"toLoc": 41,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

{

"id": 2405115,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 41,

"toLoc": 38,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

{

"id": 2405116,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 5177,

"toLoc": 5181,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

{

"id": 2405117,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 5177,

"toLoc": 41,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

{

"id": 2405118,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 41,

"toLoc": 41,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

{

"id": 2405119,

"ppMinId": null,

"deliveryDate": "2022-07-06T00:00:00",

"fromLoc": 5181,

"toLoc": 5665,

"launchTime": null,

"latestLaunch": null,

"units": null,

"trays": null,

"stacks": 3,

"routingCube": 340.48,

"actualCube": 340.48,

"trailerSizeCube": null,

"trailerTypeID": null,

"trailerSizeRequired": false,

"origin": null,

"finalDestination": null,

"finalDestinationOpenTime": null,

"finalDestinationCloseTime": null,

"populateDestination": null,

"additionalDeliverServiceTimeMins": null,

"department": null,

"orderKind": null,

"sequenceNumber": null,

"compound1": null,

"latestDepartC1": null,

"compound2": null,

"latestDepartC2": null,

"planAlone": null,

"forceLastStop": null,

"forcePickupLastStop": null,

"copacker": null,

"carrierID": 1,

"launchBucketID": null,

"ordersLookupID": null,

"ortecCapabilityGroupID": null,

"comment": null,

"insertTS": "0001-01-01T00:00:00",

"submitAttemptTS": null,

"submitSuccess": null,

"sendToTTS": false,

"kpiLoad": null,

"ordersBatchGroupID": null,

"isPreload": null,

"nettedOrtecOrderID": null,

"isStoreDoor": null,

"otmTripNumber": null,

"otmStopNumber": null,

"salesDate": null,

"carrier": null,

"finalDestinationNavigation": null,

"fromLocNavigation": null,

"kpiLoadNavigation": null,

"originNavigation": null,

"ortecLoadDocuments": [],

"ortecOrderDetails": [],

"stopOrderMapping": [],

"toLocNavigation": null,

"trailerType": null

}

"orderDetailsList": [

{

"id": 3871005,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405114,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

{

"id": 3871006,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405115,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

{

"id": 3871007,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405116,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

{

"id": 3871008,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405117,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

{

"id": 3871009,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405118,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

{

"id": 3871010,

"units": 3,

"trayType": "PA",

"trays": 3,

"stacks": null,

"routingCube": 340.48,

"actualCube": 340.48,

"traysPerStack": 1,

"ortecOrderId": 2405119,

"purchaseOrderID": 21884,

"pickedUpOrDeliveryQuantity": null,

"deliveryOrPickUpAt": null,

"trailerNumber": null,

"sealNumber": null,

"tripTicketNumber": null,

"commnets": null,

"bolPath1": null,

"bolPath2": null,

"bolPath3": null,

"deliveryOrPickupStatus": null,

"plannerComment": null,

"resolved": null,

"lockTrailerNumberForSubsequentLegs": null,

"ortecOrder": null

}

"purchaseOrderList": [

{

"id": 21884,

"purchaseOrderNumber": "G076200132435",

"pickupNumber": null,

"appointmentTime": null,

"temperature": null,

"weight": 7600,

"orderedBy": "901 N Elmer Ave Sayre, PA 18840 US",

"modified": "0001-01-01T00:00:00",

"modifiedBy": null,

"ortecStandardOrderDetails": []

}

"filepath": "D:\\git\\GHIWebAPILibrary\\GHIWebAPILibrary\\BackHaulPO\\PO1_300000007164024_G076200132435_0.pdf",

"addressMatchFound": "Yes",

"messages": "PO1_300000007164024_G076200132435_0.pdf file saved for Parsing pdf",

"isSuccessfull": false,

"direct": false,

"commandType": "A"

"id": 450,

"exception": null,

"status": 5,

"isCanceled": false,

"isCompleted": true,

"isCompletedSuccessfully": true,

"creationOptions": 0,

"asyncState": null,

"isFaulted": false

}

6 Replies

RR Rajapandi Ravi Syncfusion Team August 23, 2023 12:38 PM UTC

Hi kapil,

Greetings from Syncfusion support

Before we start providing solution to your query we need some more information for our clarification, so please share the below details that would be helpful for us to provide better solution.

1) Share your exact requirement with detailed description.

2) Please confirm you like to perform the changes in all Grids and after done the changes you to save all the Grid changes by clicking save button from the parent Grid.

3) Share your requirement and problem scenario in video demonstration format.

Regards,

Rajapandi R

KJ kapil jain replied to Rajapandi Ravi August 23, 2023 02:48 PM UTC

Hi Rajapandi Ravi,
Thanks for reply.
I already shared my code and Json.

1) Share your exact requirement with detailed description.

Ans: Requirement detailed :

a) Create a Hierarchy Grid with Parent grid, child grid and Second child grid.

Here Parent grid displays orderList.
child grid display orderDetailsList and

The second child grid displays purchaseOrderList.

b) Each grid has an FK relationship.

c) All grids are expandable.

d) Once the user clicks on Parent grid, child grid should be below that and on clicking on child grid, second child grid display.

e) Each grid is inline Editable and the user can update all grid at once by clicking the Save button.
f) if user don't want to edit he can cancel on clciking cancle button.
g) on clicking on the save button I need to send complete Json with modified data and unmodified data in the same fashion as JSON.

Q2. Please confirm you like to perform the changes in all Grids and after done the changes you to save all the Grid changes by clicking save button from the parent Grid.
Ans: YES.

Q3. Share your requirement and problem scenario in video demonstration format.
Ans : The problem I am facing is not able to update the modified data for all the grids. need help!

I belive this information will be helpful to you.
I am looking for forward to hear from you.

Tha

KJ kapil jain replied to kapil jain August 28, 2023 02:07 PM UTC

Hi Rajapandi Ravi,

I am looking forward to hear from you.

Thanks

RR Rajapandi Ravi Syncfusion Team September 5, 2023 10:46 AM UTC

Kapil,

We have checked your shared information and we need some more information for our clarification, so please share the below details that would be helpful for us to provide better solution.

1) Please confirm you are binding data to the Grid with local or remote.

2) In your query you have mentioned that “e) Each grid is inline Editable”, so please confirm what mode of editing (Inline or Batch editing) you are using in your application.

4) Share your Syncfusion package version.

KJ kapil jain September 5, 2023 12:11 PM UTC

Hi,

Below are the required details.

1) Please confirm you are binding data to the Grid with local or remote.
Ans: It's a remote data.

2) In your query you have mentioned that “e) Each grid is inline Editable”, so please confirm what mode of editing (Inline or Batch editing) you are using in your application.
Ans: Batch editing.

3) In your query you have mentioned that “I need to send complete JSON with modified data and unmodified data”, Please confirm for sending unmodified data, did you like to send the previous value in the datasource or not. So please elaborate your requirement with detailed description to sending modified and unmodified data.
Ans: Yes, I need to send complete JSON with modified data (changed value of that row in the grid). along with
the unmodified data(unchanged value of that row in the grid).

4) Share your Syncfusion package version.
Ans:

"@syncfusion/ej2-base": "^22.1.34",
    "@syncfusion/ej2-data": "^22.2.5",
    "@syncfusion/ej2-grids": "^22.1.34",
    "@syncfusion/ej2-react-buttons": "^22.2.5",
    "@syncfusion/ej2-react-calendars": "^22.2.5",
    "@syncfusion/ej2-react-dropdowns": "^22.2.9",
    "@syncfusion/ej2-react-grids": "^22.1.34",
    "@syncfusion/ej2-react-treegrid": "^22.2.9",

RR Rajapandi Ravi Syncfusion Team September 8, 2023 12:21 PM UTC

Kapil,

You can save all levels of Hierarchy Grid (parent and sub-levels) by using the custom toolbar button. In this custom toolbar click event, we can get and loop the all the levels of Grid and invoke the batchSave() method for each Grid to perform the save action. Before invoking batchSave() method, you can get your modified and unmodified row values using the getRowsObject() method. Please refer the below code example for more information.

const toolbarOptions = [{ text: 'CustomSave', tooltipText: 'Save', prefixIcon: 'e-save', id: 'save' }];

function toolbarClick(args) { //toolbarclick event of Grid

if(args.item.text === 'CustomSave') {

var gridCount = document.querySelectorAll('.e-grid'); //get all the Grids

console.log(gridInstance);

for (var i = gridCount.length - 1; i >= 0; i--) {

var changesresult = gridCount[i].ej2_instances[0].getRowsObject().filter((e) => { //use filter function to get the changes

if (e.changes != undefined) {

return e;

}

});

if (changesresult.length) {

console.log('Modified and unModified row values are present in changes and data property');

console.log(changesresult);

console.log('You can get the complete unmodified data using Grids dataSource property');

console.log(gridCount[i].ej2_instances[0].dataSource);

console.log('You can also check the changes by invoking getBatchChanges() method');

console.log(gridCount[i].ej2_instances[0].getBatchChanges());

gridCount[i].ej2_instances[0].editModule.batchSave(); //to perform save action invoke the batchSave() method

}

return (<div className='control-pane'>

<GridComponent dataSource={employeeData.slice(0,2)} childGrid={childGrid} allowSorting={true} toolbar={toolbarOptions} editSettings={editSettings} ref={grid => gridInstance = grid} toolbarClick={toolbarClick}>

</ColumnsDirective>

</GridComponent>

</div>

</div>);

Note: Whenever you invoke the batchSave() method, from the Parent Grid instance the respective Grid gets collapsed, because when saving the batch changes the Grid starts to re-render and initiate refresh. So, at this time the parent Grid gets collapsed. It was the default behavior.

If still you are facing any problem, please share the details about what type of adaptor you are using in your application to bind the remote data.

Need More Help?

Get personalized assistance from our support team.

Contact Support

6 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
KJ kapil jain
Platform
React - EJ 2
Control
Grid
Created On
Aug 21, 2023 01:41 PM UTC
Last Activity On
Sep 8, 2023 12:21 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support