Posted 23 August 2023, 9:21 am EST
Hi,
I would like to implement a shape, where the enter button commits the editing and does not enter the next line.
Is this possible?
Thanks, Thom
Forums Home / Spread / SpreadJS
Posted by: thom.prosch on 23 August 2023, 9:21 am EST
Posted 23 August 2023, 9:21 am EST
Hi,
I would like to implement a shape, where the enter button commits the editing and does not enter the next line.
Is this possible?
Thanks, Thom
Posted 24 August 2023, 6:13 am EST - Updated 24 August 2023, 6:18 am EST
Hi Thom,
You could handle the ShapeChanged Event that gets triggered when the Shape is selected. Then you could add the keydown event listener on the ShapeEditor, check for the “Enter” key down.
Kindly refer to the following code snippet and the sample:
// Bind the ShapeChanged Event
spread.bind(GC.Spread.Sheets.Events.ShapeChanged, function (sender, args) {
let shape = args.shape;
if (args.propertyName === "isSelected" && shape.isSelected()) {
setTimeout(() => {
let shapeEditorEl = spread.getHost().querySelector("div.gcSpread.shape-editor");
if (shapeEditorEl) {
// Add KeyDown Event Handler
shapeEditorEl.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
// Prevent the Default
event.preventDefault();
// Take the focus out
shapeEditorEl.blur();
// Remove the last "\n" from the Shape's text
shape.text(shape.text().replace(/\n$/, ''))
}
})
}
})
}
});
References:
ShapeChanged Event: https://www.grapecity.com/spreadjs/api/v15/classes/GC.Spread.Sheets.Events#shapechanged
Please let us know if you face any issues.
Regards,
Ankit
Posted 27 August 2023, 7:17 am EST
Perfect, thanks a lot.
BR, Thom