J21042
J21042

Reputation: 1284

AngularJS ui-grid export menu missing export buttons

I am new to AngularJS ui-grid, and a first time user of the exporter feature. I am trying to add an export menu to an existing ui-grid running in a groovy/grails app. I am using this example as a guide: http://ui-grid.info/docs/#/tutorial/206_exporting_data

I have added the necessary javascript utility files csv.js, pdfMake.js, vfs_fonts.js. I added the gridOptions exporter options following the example. I tried explicitly setting gridOptions

...
exporterMenuCsv: true,
exporterMenuPdf: true,
...

But when it renders the grid menu, the Export buttons are all missing, only the column selection buttons are visible. I can see through FireBug that the utility javascript files were loaded, and there were no errors reported.

What am I missing that would cause the Export buttons to not be generated in the menu?

The example doc states "Note that the option to export selected data is only visible if you have data selected." However in my case no Export buttons are displayed regardless of any data being selected.

I am using ui-grid 3.0.0-rc.20

Upvotes: 0

Views: 2653

Answers (2)

Sriram
Sriram

Reputation: 711

It is to do with the order of loading options and data.Load your grid options before loading the data.

//call this when page constaining grid loads
$scope.loadPage = function(){
  $scope.gridOptions = {
        columnDefs: [
            { field: 'field1'},
            { field: 'field2'},
            { field: 'rhs' }
        ],
  enableGridMenu: true
  }
}

//call this when payload is available
$scope.gridOptions.data = data;

Upvotes: 0

J21042
J21042

Reputation: 1284

Solved: Problem was caused by a redundant definition of the Angularjs module.

After I read the following

Angular ui grid, change behavior of "Export all data as csv"

Angular ui-grid external export buttons

I tried to explicitly define my own Export button to the menu, and got an "unknown provider error", then I came across the following:

https://docs.angularjs.org/error/$injector/unpr

And that is when I realized that I had accidentally redefined my module and left off the "ui.grid.exporter" in one of the definitions, since I was using multiple AngularJS files in the app. Once I removed the extra module definition, the Export buttons appeared!

Upvotes: 0

Related Questions