Can't export with Angular ui grid, "Cannot read property 'querySelectorAll' of undefined"

2
votes

I'm using the code provided in the ui-grid documentation to implement export functionality to my data grid, as given here: http://ui-grid.info/docs/#/tutorial/206_exporting_data

This line is throwing two errors:

exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location"))

First error, in grunt build: 'document' is not defined

Second error, in browser console: TypeError: Cannot read property 'querySelectorAll' of undefined

I've made sure to inject 'ui.grid.exporter', 'ui.grid.selection', and 'ui.grid' in the angular module.

Why would "document" fail as undefined?

3
angularjsangular-uiangular-ui-grid
I'm having the same problem with the same error (minus the grunt build error), and when I try just not setting exporterCsvLinkElement I get this error: Exporter asked to export as csv, but no element provided. Perhaps you should set gridOptions.exporterCsvLinkElement? - Samsquanch
There's also an issue opened on github: github.com/angular-ui/ng-grid/issues/2698 - Samsquanch
Yes, I get that same "Exporter asked to export as csv, but no element provided. Perhaps you should set gridOptions.exporterCsvLinkElement?" error when I don't set the exporterCsvLinkElement option. - JMax2012
Question solved, sort of: I'm getting the error because the code sample came from the latest unstable release of ui grid, but I have an older version installed. - JMax2012
I'm currently running 3.x RC 18 and still getting the issue.. I don't know how far ahead unstable is. - Samsquanch

3 Answers

1
votes

The moment I installed csv.js, it worked like a charm.

0
votes

I had the same issue and got mine to work. The documentation is not complete. First make sure you add csv.js to your project. You can do it via bower install, then include the js file.

Then in your html add, this will bind with the property and will be found in the document. If the query doesn't find anything it returns undefined

<div class="custom-csv-link-location">
        <label>Download your CSV:</label>
        <span class="ui-grid-exporter-csv-link">&nbsp</span>
</div>
0
votes

I included ui-grid-exporter in my HTML and it's working for me.

Before:

div class="myGridRuleInfo" id="gridTrades1" ui-grid="ri.gridOptions" ui-grid-resize-columns ui-grid-grouping ui-grid-move-columns

After:

div class="myGridRuleInfo" id="gridTrades1" ui-grid="ri.gridOptions" ui-grid-resize-columns ui-grid-grouping ui-grid-move-columns ui-grid-exporter