Issue
I have a handsontable in my componet.ts and when I try to use the dropdown list and click the down arrow it is just turning into a text editor. Just wondering how I get the dropdown to work properly.
componet.ts
dateToday: number = Date.now();
private hotRegisterer = new HotTableRegisterer();
id = 'hotInstance';
hotSettings: Handsontable.GridSettings = {
maxRows: 22,
startRows: 2,
startCols: 2,
contextMenu : true,
height: 'auto',
width: 'auto',
minSpareRows: 1,
columns: [
{
type: 'dropdown',
source: ['sn', 'st']
},
{
editor: 'text'
},
{
type: 'date',
dateFormat: 'MM/DD/YYYY',
correctFormat: true,
defaultDate: this.dateToday+'',
}
],
colHeaders: ['Asset Type','Serial Number','Shipdate'],
rowHeaders: true,
colWidths: 300,
licenseKey: 'non-commercial-and-evaluation'
}
html
<div class="hot">
<hot-table [hotId]="id" [settings]="hotSettings"></hot-table>
</div>
Solution
This is an issue with handsontable. https://github.com/handsontable/handsontable/issues/9452
The work around is add
import { createEmptySpreadsheetData } from 'handsontable/helpers';
in the below
hotSettings: Handsontable.GridSettings = {}
add
data: createEmptySpreadsheetData(4, 4),
This has to be 4 or greater or the dropdown wouldn't work. Then in packages.json under exports you have to add
"./helpers/data.d.ts": "./helpers/data.d.ts",
"./helpers": {
"require": "./helpers/data.js",
"import": "./helpers/data.mjs" },
Answered By - Petahwil
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.