Is there a way to eliminate certain columns during PDF export using the AngularJS UI Grid?

Currently, I am utilizing Angular JS ui Grid

I need a way to display only 5 columns on the grid, but when exporting to PDF, I do not want certain columns like username to be included.

Is there a method to achieve this?

javascriptangularjsng-gridangular-ui-gridpdfmake

Answer №1

If you want to hide specific columns when exporting data from a grid, you can use the gridOption called exporterSuppressColumns.

I have customized the plunker provided in the UI Grid documentation to show how you can hide the "Gender" column in the exported PDF: http://plnkr.co/edit/89ZVlPZcQbHYzgX5l4yq?p=preview

Whether you choose to export "all" or "visible" data, the gender column will never appear in the exported output.


$scope.gridOptions = {
    columnDefs: [
        { field: 'name', visible: true },
        { field: 'gender', cellFilter: 'mapGender', exporterPdfAlign: 'right', visible: true, enableHiding: true },
        { field: 'company', visible: false }
    ],
    exporterSuppressColumns: ['gender'],
}

You can find more information in the documentation here:

Answer №2

exporterSuppressExport: true

Sample 

{
 title: 'Details', allowEdit: true,
 cellTemplate: '<div class="ui-grid-cell-contents"><div ng-class="{\'viewr-dirty\' : row.inlineEdit.entity[col.field].isValueChanged }">{{row.entity[col.field]}}</div></div>'
},

For additional information, visit

Answer №3

This particular section features a column with a button that should be omitted during the export process

{
    name: null,
    exporterSuppressExport: true, // <--- This is where the exclusion happens
    field: "fake",
    cellTemplate: '<div class="tac"><a class="btn btn-red btn-xs ml5" ng-if="!row.inlineEdit.isEditModeOn" ng-click="grid.appScope.vm.deleteRow(row, $event)"><i class="fa fa-trash"><md-tooltip md-direction="left">delete</md-tooltip></i></a></div>',
    enableCellEdit: false,
    enableFiltering: false,
    enableSorting: false,
    showSortMenu: false,
    enableColumnMenu: false,
    width: 50,
},

Answer №4

To ensure that only the desired column is exported, you can simply include the option exporterSuppressExport: true in your columnDefs for that specific column:

$scope.gridOptions = {
  columnDefs: [
    { field: 'username', exporterSuppressExport: true },
    { field: 'someOtherField' }
  ],
  // other options ...
};

With this configuration, only the column with someOtherField will be included in the export.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the meaning of the second line in the code snippet?

Could you please explain the meaning of the second line in this code snippet? Is it a ternary operation, or something else entirely? And what is its significance? const user = await User.findOne({ email: req.body.email }); !user && res.stat ...

javascriptnode.jsexpress

Exploring the syntax of typescript when using createContext

Just starting out with typescript and I have some questions. Could someone break down the syntax used in this code snippet for me? What is the significance of having two groups containing signIn, signOut, and user here? Is the first group responsible fo ...

javascriptreactjstypescript

Adjust the overflow to automatically decrease at regular intervals

Is there a way to make the scroll automatically move down a bit every few seconds, revealing more text in the process? Here's an example of how I want it to work: http://jsfiddle.net/Bnfkv/2/ ...

javascriptjqueryhtmlcss

Eliminate jQuery cookies by utilizing either null values or empty strings

When it comes to working with jQuery cookies, I've noticed there are multiple methods: $.cookie("fd_showFeatured",""); $.cookie("wm_client_id", null); Are these two methods interchangeable or do they serve different purposes? ...

javascriptjquery

Mastering TypeScript in Router Configuration

I am currently working with a standard router setup. type Routes = '/' | '/achievements' | ... ; This helps in identifying the routers present in the project. However, I am faced with a new challenge of creating an array that includes ...

javascripttypescript

I'm currently working on a Vue template that incorporates Vuetify, and I am interested in integrating Nuxt.js into the template

Hello there, I trust you are doing splendidly I am interested in learning how to incorporate Nuxt js into my Vue template to harness the advantages it offers such as file structure and simplified routing ..etc Do you happen to have any guidance on this ...

javascriptvue.jsnuxt.js

How come the Qunit counter doesn't seem to ever reach its expected target value during this test?

I'm currently stuck on a Qunit test related to jQuery Mobile's listview.filter extension. I can't figure out how the variable _refreshCornersCount ends up with a value of 3. Below is the section causing confusion. module( "Custom search ...

javascriptjqueryjquery-mobilequnit

Angular ng-repeat failing to display data as expected

I've been attempting to create a table from a JSON structure, but I'm having trouble getting it to display correctly. The output is not appearing as expected for the first two cells; "Partial" is empty and only filling the last one. You can see ...

javascripthtmlangularjsjsonangularjs-ng-repeat

Obtaining an Array through a direct input on the command line

I am having trouble incorporating raw command line arguments in my Node.js application. When I try with simple variables, everything works as expected (node example.js variable) However, when I pass an array as an argument, it does not work properly (n ...

javascriptarraysnode.jsarguments

Comparing Server-Side Frameworks with Client-Side Frameworks

Recently, I delved into the world of Django and it dawned on me that it operates as a server-side framework. Having previously worked with Vue and AngularJS, I mistakenly assumed that Django followed a similar structure due to shared features like for loop ...

angularjsdjangovue.jsserver-sideclient-side

"Using the selected option from a dropdown list to pass to a PHP file for autocomplete functionality

Although there is no error in the code, I am facing an issue where, after selecting an option from the brands dropdown, when I type in the product field, it passes "%" instead of the brand id (1, 2, or 3). Is there a way to modify the code so that it passe ...

javascriptajaxjquery-autocomplete

Issue with Chrome extension's popup not displaying

I was developing a chrome extension, but I encountered an issue where the popup does not display when clicking on the icon. After researching online, I found suggestions to change page_action to browser_action. However, even after making this adjustment, ...

javascriptjsongoogle-chrome-extension

Using PHP code to pass a value to JavaScript

I have both PHP and JavaScript code on my page, and I need to retrieve a value from PHP into my JavaScript code. Below is my JavaScript code: <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Bread ...

javascriptphpjquery

Pattern-Based jQuery Selectors

I am looking for a way to use jQuery to select all paragraphs < p > within a < div > that contain time stamps with the following formatting patterns: <p>[22:48]</p> or <p>[22:48 - Subject Line]</p> Can someone provi ...

javascriptjqueryregexstringjquery-selectors

Supporting traditional IE document compatibility within an iFrame

Currently, I am facing an issue with my web application which is being used in an iframe by a web portal (SAP enterprise portal). The portal is responding with the header x-ua-compatible IE=EmulateIE7, causing complications for my AngularJS-based applicati ...

angularjsinternet-explorerx-ua-compatible

Is it possible for React and React Router to render the same element twice with different props, creating two elements with identical props?

Currently, I am exploring how to leverage React in conjunction with React Router v4 to display multiple elements. The concept revolves around a component that showcases a list of articles sourced from various websites. Each route corresponds to a distinct ...

javascriptapireactjscomponentsreact-router

Creating a Website for Compatibility with NoScript

During my journey of building a nameplate site from the ground up for myself, I have delved into the realms of learning and establishing my online presence. The highlight of my project is a sleek tabbed site that employs AJAX and anchor navigation to seaml ...

javascriptcsshtmlnoscript

transform PDFs containing completed form fields into images

Despite numerous attempts and trials, I have been unable to find a way to automatically create an image from a PDF file that includes filled form fields. While some libraries do generate an image, the filled form fields always appear blank. Does anyone kn ...

javascriptpythonpdfaws-lambda

Delete outdated information using Google Apps Scripts when the date is less than the current date plus a specified number of days

I have a Google Sheet where I need to filter out entries based on the number of days since the last check. Specifically, I want to keep only those entries where the number of days since the last check is greater than 10. You can find the Sheet here. fu ...

javascriptgoogle-apps-script

Expanding a Material UI Accordion does not cause the surrounding content to shift or move

I'm currently designing a User Interface for a web application that allows users to have multiple projects open simultaneously. To achieve this, I decided to use an accordion as the logical component in the left navigation bar. The reason behind this ...

javascriptcssreactjsmaterial-ui