Forums Home / Spread / SpreadJS
Posted by: adisa.craig on 4 June 2024, 7:03 am EST
adisa.craig
Posted 4 June 2024, 7:03 am EST
Previously in v15 of spreadjs we extended the worksheet object by using the following function
GC.Spread.Sheets.Worksheet.$n('excellentableProtectedRanges' , {
init : function(){},
toJson : function(sheetJSON){},
fromJson : function(sheetJSON){},
});This no longer works in v17, we get an error that $n is not a function. What is the updated way to extend the worksheet object?
priyam.kushwaha
Posted 4 June 2024, 11:51 pm EST
Hi,
We are still investigating the issue at our end. We will let you know about our findings as soon as possible.
Regards,
Priyam
priyam.kushwaha
Posted 5 June 2024, 8:25 pm EST
Hi,
As per my understanding, you wish to preserve custom properties after importing and exporting in JSON.
To achieve this, you have been trying to access internal properties/methods in version 15 to achieve your requirement, but in version 17, it is not working. Since you are using internal properties/methods, they can change or be removed in higher versions, which is not recommended.
Instead, you can store custom properties in tags. These tags will be preserved even after importing and exporting the file in JSON. Note that tags are a SpreadJS-specific feature, so if you export to Excel, the tags will be cleared. Refer to the attached snippet and sample.
function initSpread(spread) {
// init spread
var sheet = spread.getActiveSheet();
const custom = {
message: "Hello world"
}
const str = JSON.stringify(custom);
sheet.setTag(0,0, str);
}
designer.bind(GC.Spread.Sheets.Designer.Events.FileLoaded, (event, data)=>{
console.log("file has loaded");
const tag = spread.getActiveSheet().getTag(0,0);
const custom = JSON.parse(tag);
console.log(custom.message);
});
If there is any misunderstanding of your requirement, could you please elaborate more and explain your exact use case so that we can assist you better?
Regards,
Priyam
adisa.craig
Posted 6 June 2024, 5:33 am EST
Our specific use case is that we are creating charts using an external service, we were using the above to load the charts into the worksheet, specifically the init functionality. I will check to see if we are able to achieve the same behavior with tags. However I believe that tags existed in v15 as well so we may have already explored doing it that way and identified it wasnt possible
priyam.kushwaha
Posted 6 June 2024, 9:11 pm EST
Hi,
Yes, please try to see if your requirement can be achieved using tags. If tags do not fulfill your requirement, could you share a sample of v15 where you are creating charts using an external service and loading them into the worksheet, particularly focusing on the init functionality? This will help us better understand your implementation in v15 and provide the appropriate assistance for v17. You could also modify the previously shared sample to add your v15 implementation.
Regards,
Priyam
adisa.craig
Posted 11 June 2024, 3:46 am EST
We were using the above function to add our own json object to the top level of the Sheet json. The added JSON would be in the spreadJSON as shown below.
GC.Spread.Sheets.Worksheet.$n('excellentableCharts' , {
init : function(){
this.excellentableCharts = new Chart.Manager();
},
toJson : function(sheetJSON){
if( this.excellentableCharts ){
const charts = this.excellentableCharts.all();
sheetJSON.ExcellentableCharts = {};
const chartIds = Object.keys(charts);
for (let i = 0; i < chartIds.length; i++ ){
sheetJSON.ExcellentableCharts[chartIds[i]] = charts[chartIds[i]].toJSON();
}
}
},
fromJson : function(sheetJSON){
if( sheetJSON.ExcellentableCharts ){
const chartIds = Object.keys(sheetJSON.ExcellentableCharts);
const spread = this.getParent();
for( let i = 0; i < chartIds.length; i++ ){
let chartJSON = sheetJSON.ExcellentableCharts[chartIds[i]]
const sheetName = chartJSON.data.sheetName;
const sourceSheet = spread.getSheetFromName(sheetName);
let newChart = this.excellentableCharts.createFromJSON(ChartEvents.mergeRowsDataIntoChart(sourceSheet, chartJSON));
newChart.setSheet(sourceSheet);
}
}
},
});{
"sheets" : {
"Sheet1": {
"data":{},
"rows":{},
"pivotTables":{},
"ExcellentableCharts":{}
}
}
}priyam.kushwaha
Posted 11 June 2024, 11:41 pm EST
Hi,
We are still investigating the issue at our end. We will let you know about our findings as soon as possible.
Regards,
Priyam
priyam.kushwaha
Posted 12 June 2024, 4:00 pm EST
Hi,
As per my understanding, you are adding some custom properties to the sheet JSON for your requirements.
You can achieve this by overriding the toJSON and fromJSON methods of the worksheet in version 17. Please refer to the snippet and sample below.
const oldToJSONFunc = GC.Spread.Sheets.Worksheet.prototype.toJSON;
GC.Spread.Sheets.Worksheet.prototype.toJSON = function () {
const sheetJSON = oldToJSONFunc.apply(this, arguments);
// add your custom property
sheetJSON.ExcellentableCharts = {id:1, chart: "chart"}
return sheetJSON;
}
const oldFromJSONFunc = GC.Spread.Sheets.Worksheet.prototype.fromJSON;
GC.Spread.Sheets.Worksheet.prototype.fromJSON = function (sheetJSON) {
const result = oldFromJSONFunc.apply(this, arguments);
// use your custom property
console.log(sheetJSON.ExcellentableCharts)
return result;
}References:
toJSON: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#tojson
fromJSON: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Worksheet#fromjson
Regards,
Priyam
