Pro Features not working/not displaying

Getting help Issues
1

I bought a developer license for handsontable. However the Pro features such as filtering and export to file are not displaying and not working on handsontable even though I already put the license such as shown below:

settings={
data: this.spreadsheetData,
exportFile: true,
rowHeaders: true,
licenseKey: ‘xxxxx-xxxxx-xxxxx-xxxxx-xxxxx’,
dropdownMenu: true,
filters: true,
}

Here are my versions:
@handsontable-pro/angular . version 2.0.0
“handsontable-pro”: “6.2.0”,
“@angular/core”: “~7.0.0”,
“@angular/cli”: “~7.0.3”,
“@angular/compiler-cli”: “~7.0.0”,
“typescript”: “~3.1.1”

Does HandsonTable Pro support the versions of angular and typscript mentioned above to make the Pro features work such as filtering and export to file? Or do I need to lower my version of angular and Typescript to make handsontable Pro features such as filtering and export to file work?

Reynaldo Santos

2

Welcome @canvas-dev

The Angular should be a problem. Can you send the project .zipped? I think that you might be missing some import lines in the code.

3

Hi Aleksandra,

Here is the stackblitz demo code. I will send a separate zip file as well to the support email. Please let me know what I’m missing as to why the Pro Features are not displaying

4

Can you check if you have the import

image.png501×100 3.7 KB

@import ‘~handsontable-pro/dist/handsontable.full.css’

in the main styles.css file?

image.png254×144 3.55 KB

5

Hi Aleksandra,

After adding the @import ‘~handsontable-pro/dist/handsontable.full.css’; the Filtering now works. Thank you. However, the export to File Pro Feature is still not displaying. Can you give me some advice on how to make the Export to File feature to work.

The docs says that I just need to add exportFile:true as follows:

settings={
colHeaders: true,
data: this.spreadsheetData,
exportFile: true,
rowHeaders: true,
licenseKey: ‘xxxxx-xxxxx-xxxxx-xxxxx-xxxx’,
search: true,
columnSorting: true,
dropdownMenu: true,
filters: true,
}

6

I only have a Vue demo but it should work the same for Angular https://codepen.io/anon/pen/QVKBLZ?editors=1010

Basically, you need to create a method that refers to the instance of Handsontable.

Please notice that I have also added a reference in the <hot-table> element

..ref="myTable

7

Hi Aleksandra,

The Pro Features are now working for both the “Filter” and the “Export To File” using Angular.

Here is the method in Angular that I added to make it work.

exportToFile(){
const hotInstance = this._hotRegisterer.getInstance(this.instance);

hotInstance.getPlugin('exportFile').downloadFile('csv', {
   filename: 'MyFile',
   colHeaders: true
   });

}

We can now close the support ticket. Thank you for your help!

Rey Santos

1 Like
8

Thank you for an update.

I keep my fingers crossed for further progress.