How to edit the value of a cell in a spreadsheet ?

[Tuan Ardouin]

Hello,

Is there a method, in VueJS, that takes an address and let us edit the value of a cell ?

https://ej2.syncfusion.com/vue/documentation/api/spreadsheet/spreadsheetModel/

I've read the documenting but can't find what I'm looking for.

Thanks,
Tuan

[Saranya Dhayalan]

Hi Tuan, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, you can achieve this by using cell save event. In this event you can get the edited cell range and get the cell address by using getRangeIndexes method. Please find the below code snippet: 

 

  methods: { 

        cellSave: function(args) { 

            var range = args.address.split("!")[1]; 

            console.log("range:" + range); 

            var celladdress = getRangeIndexes(range); 

            console.log(celladdress); 

        } 

    } 

 

For your convenience we have prepared a sample. Please find the below sample link 

 

Sample link: https://codesandbox.io/s/vue-template-forked-pq3bg?file=/src/App.vue 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D 

[Tuan Ardouin]

Hello,

Thanks for your answer but that's not what I'm looking for. I want to edit a cell directly in my code. 

Sort of like :

this.$refs.spreadsheet.editCellValue(address, 'my new cell value')

[Tuan Ardouin]

I tried to use this example but the VueJS API doesn't have the proper methods :

this.XLEdit.updateCellValue({ rowIndex: 1, colIndex: 1 },"Update Cell Value");

https://www.syncfusion.com/forums/121818/how-to-read-and-set-data-in-ejspreadsheet

[Saranya Dhayalan]

Hi Tuan, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, you can achieve to update the cell value by using updateCell method. In this method you can pass the value and address in created event. Please find the below code snippet: 

 

created: function(args) { 

        var spreadsheet = this.$refs.spreadsheet; 

        spreadsheet.updateCell({ value: 'My Value' }, "A3"); 

    } 

 

For your convenience, we have prepared a sample. Please find the below sample link 

 

Sample link: https://codesandbox.io/s/vue-template-forked-kcixq?file=/src/App.vue 

 

API link: https://ej2.syncfusion.com/vue/documentation/api/spreadsheet#updatecell 

 

Please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D 

[Tuan Ardouin]

I fell stupid, that's what I was looking for. Thank you!

Do you know where I could find in the documentation a list of all the cell properties?

Tuan

[Saranya Dhayalan]

Hi Tuan,  

 

Most welcome 

 

Please find the cell model properties in the below table 

 

Cell Model Properties	Description
value: string;	Defines the value of the cell which can be text or number.
formula: string	Defines the formula or expression of the cell.
index: number;	Specifies the index of the cell.
format: string;	Specifies the number format code to display value in specified number format.
hyperlink: string | HyperlinkModel;	Specifies the hyperlink of the cell.
wrap: boolean;	Wraps the cell text to the next line, if the text width exceeds the column width.
isLocked: boolean;	Specifies the cell is locked or not, for allow edit range in spreadsheet protect option.
validation: ValidationModel;	Specifies the validation of the cell.
colSpan: number;	Specifies the column-wise cell merge count.
rowSpan: number;	Specifies the row-wise cell merge count.

 

 

However, we will include this in our documentation in our upcoming release. 

 

Regards, 

Saranya D