We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Active Cell is not being captured.

Active Cell is not being captured, if I click on some other cell and save the sheet, then only it's getting captured.

9 Replies 1 reply marked as answer

SA Salokya April 30, 2023 07:10 PM UTC

Here is the source code ->

let spreadsheet;

    useEffect(() => {
        fetch('http://localhost:5000/get', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            body: JSON.stringify({ Name: "Sheet1" }),
            .then((response) => response.json())
            .then((data) => {
                spreadsheet.openFromJson({ file: data }); // convert the json data to file and loaded into spreadsheet
    }, [])

const handleOnclick = () => {
// console.log(spreadsheet);
spreadsheet.saveAsJson().then(Json => (fetch('http://localhost:5000/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
body: JSON.stringify({ JSONData: JSON.stringify(Json.jsonObject), ContentType: "Xlsx", VersionType: "Xlsx" }), // send the filename, json data, content type, version type from client to server
.then((response) => response.json())
.then((data) => {
spreadsheet.openFromJson({ file: data.JSONData });

return (
<div className='spreadsheet'>
<Header title="Spreadsheet" />
<button onClick={handleOnclick}>Save Filebutton>
ref={(scope) => { spreadsheet = scope }}

div >

SA Salokya April 30, 2023 07:19 PM UTC

Here is Screenshot, you can see, rows[0] has value but rows[1] doesn't.

Screenshot (978).png

SA Salokya May 1, 2023 01:43 AM UTC

This is the same issue I am facing but solution provided here is not working -> https://www.syncfusion.com/forums/156783/how-to-get-current-cell-text-from-saveasjson-method

Screenshot 2023-05-01 071026.jpg

SA Salokya May 1, 2023 01:51 AM UTC

When I click on other cell, you can see 'World' is captured.


SA Salokya May 1, 2023 02:29 AM UTC

Even normal save method is not capturing active cell data.


On clicking other cell.


SP Sangeetha Priya Murugan Syncfusion Team May 1, 2023 09:25 AM UTC

Hi Salokya,

Based on our behavior, the edited cell value gets updated in the cell model after clicking any cell or pressing the Enter key. And this is our behavior, which is not an issue on our end. If you need the edited cell value after loading the saved JSON, you need to call the endEdit method before saving the JSON data. For your reference, we have modified the sample based on our suggestion by using the endEdit method. Please find the link below.

Sample Link: https://stackblitz.com/edit/react-gmavkj-jcugsp?file=index.js,package.json

UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/editing#save-cell

Marked as answer

SA Salokya replied to Sangeetha Priya Murugan May 1, 2023 12:13 PM UTC

Thank You so much!

SA Salokya replied to Sangeetha Priya Murugan May 2, 2023 02:39 AM UTC

One last thing, can I use Datamanager for binding remote data and performing CRUD operations in form of JSON?

SP Sangeetha Priya Murugan Syncfusion Team May 2, 2023 08:51 AM UTC

Hi Salokya,

Yes, you can update the data to spreadsheet using the data manager. For more details regarding remote data binding, please refer to the below links.

Demo Link: https://ej2.syncfusion.com/react/demos/#/bootstrap5/spreadsheet/remote-data-binding

UG Link: https://ej2.syncfusion.com/react/documentation/spreadsheet/data-binding#remote-data

For CRUD operation, dataSourceChanged event handler will be triggered when editing, inserting and deleting a row is made on the datasource range. It is triggered with parameter named action which indicates edit, add and delete for the respective action. By using this event you can do your customization in your end.


public dataSourceChanged (args): void {

    //args.data returns the modified data in spreadsheet

    switch (args.action) {

      case 'edit':

        console.log('Edited Data: ' + JSON.stringify(args.data));

        //Do your customization for edit action


      case 'add':

        console.log('Added Data: ' + JSON.stringify(args.data));

        // Do your customization for insert action


      case 'delete':

        console.log('Deleted Data: ' + JSON.stringify(args.data));

        // Do your customization edit action




Live Chat Icon For mobile
Up arrow icon