How to get selected data for template elements

[Majid Razmjoo]

I am using AutoComplete component in the template of spreadsheet. According to the document, the spreadsheet was supposed to automatically take values from the change event of the component specified in the template. However, saveAsJson returns null values for the cells with custom elements in the template. Here is the codesandbox. 

https://codesandbox.io/s/syncfusion-react-components-forked-ngsyqz?file=/src/App.js

In the sandbox, select a value for any of the autocomplete and type values in column B, C and D, and then press Get Json button. You will notice that only values from the native cells are returned and values from templates are null.

[Sangeetha Priya Murugan]

Hi Majid,

Based on your provided sample, we concluded that you haven’t updated the cell value in the cellModel; you have updated only the template value. For more details regarding the template cell update, please refer to the below link. And we suggest you update the selected value in the autoComplete change event using the updateCell method.

https://support.syncfusion.com/kb/article/11299/how-to-dynamically-add-cell-template-in-javascript-spreadsheet

[Majid Razmjoo]

Hello Sangeetha, the article you shared is for angular. I tried using the same for react but its giving me a type error saying that there is no such field as template in the CellModel (first parameter type of updateCell). Could you perhaps show what you mean in the codesandbox link attached in the original post?

[Majid Razmjoo]

Hello Sangeetha, the article you shared is for angular. I tried using the same for react but its giving me a type error saying that there is no such field as template in the CellModel (first parameter type of updateCell). Could you perhaps show what you mean in the codesandbox link attached in the original post?

[Vasanth Ravi]

Hi Majid,

Currently we are validating your reported requirement and will update you further details on June – 08, 2023. We appreciate your patience until then.

[Vasanth Ravi]

Hi Majid,

We have validated your reported issue on the sample shared and modified it as expected. We have added the change event to the drop down select and updated the value being selected to the active cell of the spreadsheet via updateCell() method. We have attached the video and sample along with the code block for reference.

CODE BLOCK:

 

<AutoCompleteComponent

        allowCustom={false}

        dataSource={["ABC", "DEF"]}

        className="abc"

        change={onChange.bind(this)}

        showPopupButton

      ></AutoCompleteComponent>

 

 

function onChange(args) {

  var spreadsheet = getComponent(

    document.querySelector(".e-spreadsheet"),

    "spreadsheet"

  );

  let actCell = spreadsheet.getActiveSheet().activeCell;

  spreadsheet.updateCell({ value: args.value }, actCell);

}

 

Sample Link: ​https://codesandbox.io/s/syncfusion-react-components-forked-19tj4m?file=/src/App.js

We have moved some minor fixes regarding template feature in spreadsheet into our latest version (21.2.9). Therefore, we strongly recommend you update to the latest version (package) and check with your reported case. We have enclosed the latest package for your reference.

Package Link: https://www.npmjs.com/package/@syncfusion/ej2-react-spreadsheet

Also attached the API links for reference.

https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#updateCell

https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#change

Get back to us if you need any other further assistance on this regard.