Posted 29 June 2023, 4:38 pm EST - Updated 29 June 2023, 4:44 pm EST
Hello,
I’m trying to put an autcomplete in the cell to fetch a list of values. I’ve read some answers but it still didn’t help me.
I’m using the latest version of spread with angular 8. I created a class to customize autocomplete, but some things still don’t work, like opening the list for selection.
export class AutoCompleteCellType extends GC.Spread.Sheets.CellTypes.Base {
data: Array<{ id: number; value: string }>;
constructor(data: Array<{ id: number; value: string }>) {
super();
this.data = data;
}
createEditorElement(context?: any): HTMLElement {
const editor: any = document.createElement('div');
editor.setAttribute('gcUIElement', 'gcEditingInput');
const select = document.createElement('select');
editor.appendChild(select);
editor.children[0].style.width = '100%';
editor.children[0].style.height = '100%';
const cellRect = context.sheet.getCellRect(context.row, context.col);
editor.style.width = cellRect.width + 'px';
editor.style.height = cellRect.height + 'px';
$(editor)
.find('select')
.on('select2:select', function (_e) {
context.sheet.endEdit();
});
$(editor)
.find('select')
.on('select2:open', function (_e) {
$('.select2-dropdown').attr('gcUIElement', 'gcEditingInput');
});
return editor;
}
paint(
ctx: CanvasRenderingContext2D,
value: any,
x: number,
y: number,
w: number,
h: number,
style: GC.Spread.Sheets.Style,
context?: any
): void {
if (value) {
GC.Spread.Sheets.CellTypes.Base.prototype.paint.apply(this, [ctx, value.value, x, y, w, h, style, context]);
}
}
activateEditor(editorContext: HTMLElement, _cellStyle: GC.Spread.Sheets.Style, _cellRect: GC.Spread.Sheets.Rect, _context?: any): void {
const data: OptionData[] = this.data.map((valor) => {
return {
disabled: false,
element: null,
id: valor.id.toString(),
text: valor.value,
title: '',
selected: false,
};
});
$(editorContext).find('select').select2({
data: data,
});
setTimeout(() => {
$(editorContext).find('select').select2('open');
});
}
deactivateEditor(editorContext: HTMLElement, _context?: any): void {
$(editorContext).find('select').select2('destroy');
}
getEditorValue(editorContext: HTMLElement, _context?: any) {
const data = $(editorContext).find('select').select2('data');
if (!data || !data.length) {
return null;
}
return Object.assign(
{},
{
id: data[0].id,
value: data[0].text,
}
);
}
setEditorValue(editorContext: HTMLElement, value: any, _context?: any): void {
if (!value) {
return;
}
const op = new Option(value.value, value.id, true, true);
$(editorContext).find('select').append(op).trigger('change');
}
isReservedKey(e: KeyboardEvent, context?: any): boolean {
if (context.isEditing && (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 13 || e.keyCode === 27)) {
return true;
}
return GC.Spread.Sheets.CellTypes.Text.prototype.isReservedKey.apply(this, arguments);
}
}
