Posted 4 March 2022, 9:29 am EST
Sheet with custom cell type
import * as GC from '@grapecity/spread-sheets';
import { defaultG4MUITheme } from '@highradius/g4_ui_components/lib/components/theme/defaultTheme';
export const DEFAULT_HEIGHT = 28;
export const DEFAULT_WIDTH = 180;
const textPrototype: any = GC.Spread.Sheets.CellTypes.Text.prototype;
const ForecastModelCell = new GC.Spread.Sheets.CellTypes.Base();
let _oldPaintFn = ForecastModelCell.paint;
ForecastModelCell.paint = function (
ctx: CanvasRenderingContext2D,
value: any,
x: number,
y: number,
w: number,
h: number,
style: any,
options?: any,) {
// Paints a cell on the canvas.
style.hAlign = GC.Spread.Sheets.HorizontalAlign.left;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style.cellPadding = "0 0 0 10"
style.font = `${defaultG4MUITheme.typography.body1.fontStyle} ${defaultG4MUITheme.typography.body1.fontWeight} ${defaultG4MUITheme.typography.body1.fontSize} ${defaultG4MUITheme.typography.body1.fontFamily}`;
if (value && typeof value === "object") {
let indentaion = ((value.depth || 0) + 1) * 10;
style.cellPadding = `0 0 0 ${indentaion}`
const existingStyle = value.style;
if (existingStyle) {
let format = existingStyle.bold ? 'bold ' : '';
format += existingStyle.italic ? 'italic ' : '';
format += existingStyle.fontSize ? existingStyle.fontSize + 'px' : defaultG4MUITheme.typography.body1.fontSize;
style.font = `${format} ${defaultG4MUITheme.typography.body1.fontFamily}`;
style.foreColor = existingStyle.fontColor;
style.backColor = existingStyle.fillColor;
}
_oldPaintFn.apply(
this,
[ctx,
value.content,
x,
y,
w,
h,
style,
options]
);
}
else {
// default operation
style.cellPadding = "0 0 0 0"
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
_oldPaintFn.apply(this, arguments as any);
}
};
ForecastModelCell.setEditorValue = function (editorContext, value, context) {
console.log("in setEditerValue");
var actualVal = context.sheet.getValue(context.row, context.col);
if (actualVal && typeof actualVal === "object") {
GC.Spread.Sheets.CellTypes.Text.prototype.setEditorValue.call(
this,
editorContext,
actualVal.content,
context
);
} else {
// default operation
textPrototype.setEditorValue.apply(
this,
arguments
);
}
};
ForecastModelCell.getEditorValue = function (editorContext, context) {
console.log("inside geteditorValue");
var actualVal = context.sheet.getValue(context.row, context.col);
var editorVal = textPrototype.getEditorValue.apply(
this,
arguments
);
if (actualVal && typeof actualVal === "object") {
actualVal.content = editorVal;
return actualVal;
} else {
// default operation
return editorVal;
}
};
const _oldWidthFn = ForecastModelCell.getAutoFitWidth;
ForecastModelCell.getAutoFitWidth = function () {
let minWidth = DEFAULT_WIDTH;
let width = _oldWidthFn.apply(this, arguments as any);
return Math.max(minWidth, width);
};
ForecastModelCell.getAutoFitHeight = function (val, text, cellStyle, zoomFactor,
context) {
let height = DEFAULT_HEIGHT;
const existingStyle = val && val.style;
if (existingStyle && existingStyle.fontSize) {
let fontSize = existingStyle.fontSize;
return fontSize > 32 ? 80 : fontSize > 23 ? 35 : height;
}
return height;
}
export const forecastModelCell = ForecastModelCell;
export const forecastModelColumn = { cellType: forecastModelCell };
export const getForecastModelColumns = (colCount: number) => {
const cols = [];
for (let i = 0; i < colCount; i++) {
cols.push(forecastModelColumn);
}
return cols;
}
when I am trying to copy the cell and paste it recieving text as “[object Object]”. in the clipBoardPasting event.
ActiveSheet.getValue(0,0) returns {content : “abcd”,depth : 0,…}.
when I copy this particular cell and paste it we are expecting the same value in the clipBoardPasting event.
i.e.
activeSheet.bind(GC.Spread.Sheets.Events.ClipboardPasting, function (eventType, args) {
console.log(args.pasteData.text); //this should log {content : "abcd",depth : 0,...}.
});
