Configuration Options - Print & Export

Parent Previous Next

In the previous sections, we saw how to enable a basic set of filters and footers, as well as add paging. In this section, we will look into another powerful feature of the product, print and export.


As with the earlier features, enabling Print and Export is really simple. Just set enableExport and enablePrint to true.  


configuration: <ReactDataGrid id={"grid"} enablePrint enablePreferencePersistence enableExport forcePagerRow enablePaging pageSize={"2"} enableFilters enableFooters >  



This will enable export (word and excel) buttons, as well as a print button.  


Clicking on the Export button (either word or excel) shows a popup like this:



                     

The user can then choose to export either the current page, all pages or specify pages they want to export. If they had something selected, they can choose to specifically export those selected records as well.


One the export button is pressed; we use the excellent Downloadify library to download the file without any server echo.



When you click on the save to disk button, a file is saved on to your system that contains the exported data. (Please note, this only works on a web server, it wont work if you run locally).


Please note: The downloadify library internally uses the Flash Player to save the file to disk. In a browser, there is no fully supported cross browser compliant mechanism that will allow client side generation of the file. Also, if you want to customize the download image, you may need to provide your own download.png image in \flexicious\css\images.  If you want to use a custom UI for the download, and not an image, you can refer to this issue on the downloadify forums: https://github.com/dcneiner/Downloadify/issues/11. If you are deploying to a plug-in free environment like mobile devices, then downloadify will not work. You may need to use the server echo mechanism.


The way you do this is to set enableLocalFilePersistence flag on exportOptions to false. This makes the grid use the server echo mechanism.


       $(document).ready(function(){

           var grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

                   {


                   configuration:  . . . ,

                    dataProvider:

                   });

               grid.excelOptions.enableLocalFilePersistence = false;

       });



There is a full discussion about server echo here:

http://blog.flexicious.com/post/Excel-Word-and-Html-Export-and-the-Echo-URL.aspx



Similar to the Export, Print also works out of the box with the same set of options, i.e. user can then choose to print either the current page, all pages or specify pages they want to print. If they had something selected, they can choose to specifically print those selected records as well.


As with all our features, both Print and Export are quite customizable. The PrintExportOptions and ExportOptions class provide the means to do so. The Print is nothing but an HTML based Export.


Here are lists of properties from the PrintExportOptions class that give you the means to customize this behavior:


excludeHiddenColumns

A flag that will To disable the user from printing or exporting invisible columns altogether . User cannot go into column picker and include these columns. To hide any columns that are not visible from being printed or exported by default, please use the hideHiddenColumns instead

Default: false

hideHiddenColumns

A flag that will hide any columns that are not visible from being printed or exported by default. User can still go into column picker and include these columns. To disable the user from printing or exporting invisible columns altogether, please use the excludeHiddenColumns instead. Please note, when you set this flag, the columnsToPrint will get overwritten, so any changes you make to that array will be ignored.

Default: false

pageFrom

In conjunction with printOption/exportOption = PRINT_EXPORT_SPECIFIED_PAGES determines which pages of a grid with paging enabled to print.

pageTo

In conjunction with printOption/exportOption = PRINT_EXPORT_SPECIFIED_PAGES determines which pages of a grid with paging enabled to print.

printExportOption

Specifies what to export, valid options are: EXPORT_CURRENT_PAGE EXPORT_ALL_PAGES EXPORT_SPECIFIED_PAGES EXPORT_SELECTED_RECORDS

The All pages and specified pages are only available if paging is enabled and the grid is in client mode.

showColumnPicker

Flag to control whether or not to show the column picker. Defaults to true.


Additional parameters can be found here:

http://www.reactdatagrid.com/docs/class/js/flexgrid/export/ExportOptions.js~ExportOptions.html



You can also specify custom exporters, and we will cover this in some of our advanced example deep dives.