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

Question

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?

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
– Samsquanch, Commented Feb 3, 2015 at 17:34
There's also an issue opened on github: github.com/angular-ui/ng-grid/issues/2698 — Samsquanch
– Samsquanch, Commented Feb 3, 2015 at 17:39
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
– JMax2012, Commented Feb 3, 2015 at 19:20
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
– JMax2012, Commented Feb 4, 2015 at 16:08
I'm currently running 3.x RC 18 and still getting the issue.. I don't know how far ahead unstable is. — Samsquanch
– Samsquanch, Commented Feb 4, 2015 at 16:12

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-07-27 05:15:08Z

1

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

edited Jul 27, 2017 at 5:15

Sᴀᴍ Onᴇᴌᴀ

8,3028 gold badges38 silver badges61 bronze badges

answered Jul 27, 2017 at 4:49

Vineetha Simon

413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

zambono · Accepted Answer · 2015-02-10 16:19:43Z

0

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>

answered Feb 10, 2015 at 16:19

zambono

1,3771 gold badge17 silver badges26 bronze badges

1 Comment

JMax2012 Over a year ago

That's actually for the older version - the new, unstable version does an automatic download without the need for creating a hyperlink first. In the end, because our project team didn't want to use an unstable version, I ended up using ngCsv instead and it worked like a charm.

franiis · Accepted Answer · 2019-06-27 05:51:46Z

0

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

edited Jun 27, 2019 at 5:51

franiis

1,3761 gold badge19 silver badges33 bronze badges

answered Jun 27, 2019 at 4:36

Sathya

1

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related