Posted 14 December 2023, 8:29 am EST
Hi,
Based on my understanding, you intend to delete a chart or shape that the user selects while in read-only mode, where the sheet’s options.protectionOptions.allowEditObjects is set to false.
If allowEditObjects is set to false, users won’t be able to select a shape or chart, making it impossible to identify when a user has selected one. Please provide more details about your use case so that we can offer better assistance and understand your specific requirements.
There is not direct method to obtain shape/chart which is within a specified range of cells. But you can achieve by following below steps:
Create a range array of all shapes/charts of sheet using startRow, startColumn, endRow and endColumn methods of shapes/charts. Refer below snippet.
const sheet = spread.getActiveSheet();
let chartRange = function getShapesRange( sheet){
const ranges = sheet.shapes.all().map( shape => {
const range = new GC.Spread.Sheets.Range(shape.startRow(), shape.startColumn(), (shape.endRow() - shape.startRow() + 1), (shape.endColumn() - shape.startColumn() + 1));
return {range: range, shape: shape};
})
return ranges;
}
let shapesRange = function getChartRange( sheet){
const ranges = sheet.charts.all().map( chart => {
const range = new GC.Spread.Sheets.Range(chart.startRow(), chart.startColumn(), (chart.endRow() - chart.startRow() + 1), (chart.endColumn() - chart.startColumn() + 1));
return {range: range, chart: chart};
})
return ranges;
}
Now in GC.Spread.Sheets.Events.SelectionChanged event, check if any shape/chart present in selection range using containsRange method to identify whether the current range contains the shape/chart range. Refer below snippet.
spread.getSheet(0).bind(GC.Spread.Sheets.Events.SelectionChanged, function (e, info) {
if(shapesRange && chartRange){
for( let i = 0; i < shapesRange.length; i++ ){
if(info.newSelections[0].containsRange(shapesRange[i].range)){
console.log(shapesRange[i].shape.name())
}
}
for( let i = 0; i < chartRange.length; i++ ){
if(info.newSelections[0].containsRange(chartRange[i].range)){
console.log(chartRange[i].chart.name())
}
}
}
});
Sample link: https://jscodemine.grapecity.com/share/9hF7ubV90E29o62vshbabQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fstyle.css"]%2C"ActiveFile"%3A"%2Findex.html"}
References:
shape: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Shapes.Shape#class-shape
chart: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Charts.Chart#class-chart
Range: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Range#class-range
Best regards,
Ankit
